Tabbing into the tree

Newbie question here - hopefully there’s a simple and obvious answer I’m not seeing.

We’re using the dhtmlXTree control in our application, inside an accordion control. We have turned on keyboard navigation in the tree control by calling enableKeyboardNavigation(true). Keyboard navigation is working properly inside the control. The problem is that we can’t seem to navigate TO the control through the keyboard. We have to click in the control using the mouse, and then we can use the keyboard to move around the tree.

Is there something simple and obvious that I need to do to make the control as a whole accessible through the keyboard (perhaps by tabbing to it)? What we need is for the control to take focus and to automatically select the root node.

Sorry if there’s an obvious answer to this I should know - I haven’t worked with this control before, and am also new to Javascript coding. I’m working on making our application accessible to disabled users, and in some types of disabilities users can’t make use of a mouse, so we have to ensure that everything can be reached through the keyboard alone.

Greg S.

To use keyboard navigation a tree must gets focus - it should be clicked.

You can try to use the following code:


Here tree is tree object, itemId is the id of an item that should be selected.

I’ll try that. Two questions:

  1. Which element in the tree control should I be setting the tab stop on to give the control focus? The containerTableStyle DIV that encloses everything? The “superRoot” table? Or someplace else?

(Note that I’ve turned off the tab stop on the hidden edit field to stop the JAWS screen reader from reporting it to the user. I can turn it back on if this is the place where you expect the tab key to land on when tabbing into the tree.

  1. Which event handler would normally be used for detecting the control’s taking focus? More importantly, does dhtmlXTree already have a handler implemented for that event which I’ll need to take into account?



the tree doesn’t have any handler for detecting the control’s taking focus. In the previous answer I provided the solution that allows to make a tree active without clicking ( it is necessary in order to use keyboard navigation).

The input object is tree.parentObject.childNodes[1]

send you solution on "" i guess i can address this problem