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


Consider this example showing the YUI tree in action:


  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.

    Label 0 not highlighted http://img.skitch.com/20091218-61eqs6gcngp8ay56s1pba3jhb.png

  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.

    Label 1 is highlighted http://img.skitch.com/20091218-es5xh4g4k41d8s133hay65ufrr.png

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?

Best Solution

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];
        function (ev) {
            var target = Event.getTarget(ev);
            var node = this.getNodeByElement(target);
Related Question