Accessibility of the YUI Tree control: how to tab to the tree on Firefox?

Question

Consider this example showing the YUI tree in action:

http://developer.yahoo.com/yui/examples/treeview/tv%5Fedit.html

1. Select the title in orange ("TreeView Control: Inline Editing of TreeView Node Labels").
2. Hit tab a first time: the link "View example in new window" is selected.

3. Hit tab a second time: this selects an anchor inside the tree.

   

4. From there you can use the up/down keys to navigate through the tree. The current item is always highlighted with a background color.

   

The issue is that the background of the current item is not highlighted on step 3 above (but it is when navigating through the tree on step 4). Is this a bug of the YUI tree, or is there a way to programmatically highlight the current item when the tree receives the focus?

Answer 1

This fails for me entirely (using Google Chrome), but looking at the code the tree is a warren of nested tables - I'd avoid this like the plague if you're serious about accessibility.

Answer 2

The node will lose focus when element on the page that can accept focus is clicked. Clicking on a node in the tree will give that node focus. Every node instance has a focus() method, so you can manually focus any node in the tree whenever you like -- this is exactly what that example is doing to highlight the second node.

Answer 3

A "fix" for this is to register a listener on anchors inside the node, when an anchor gets the focus to find the corresponding node, and call node.focus(). Adding the following to render() in treeview.js does the trick:

var anchors = this.getEl().getElementsByTagName("a");
for (var anchorIndex = 0; anchorIndex < anchors.length; anchorIndex++) {
    var anchor = anchors[anchorIndex];
    Event.on(
     anchor,
     'focus',
     function (ev) {
         var target = Event.getTarget(ev);
         var node = this.getNodeByElement(target);
         node.focus();
        },
        this,
        true
    );
}