YUI树控件的可访问性：如何在Firefox上选项卡到树？

Question

请考虑此示例显示正在运行的YUI树：

http://developer.yahoo.com/yui/examples/treeview/tv_edit.html

1. 以橙色选择标题（“TreeView控件：TreeView节点标签的内联编辑”）。
2. 第一次点击标签：选择了“在新窗口中查看示例”链接。

3. 第二次点击标签：这会在树中选择一个锚点。

     

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

4. 从那里，您可以使用向上/向下键在树中导航。当前项目始终以背景颜色突出显示。

     

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

问题是当前项目的背景未在上面的步骤3中突出显示（但是在步骤4中导航到树时）。这是YUI树的错误，还是有办法在树获得焦点时以编程方式突出显示当前项？

Answer 1

对此的“修复”是在节点内的锚点上注册侦听器，当锚点获得焦点以找到相应的节点时，并调用node.focus()。将以下内容添加到render()中的treeview.js可以解决问题：

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
    );
}

Answer 2

这对我来说完全失败了（使用谷歌浏览器），但是查看代码树是嵌套表格的代表 - 如果你认真对待可访问性，我会像瘟疫一样避免这种情况。

Answer 3

单击页面上可以接受焦点的元素时，节点将失去焦点。单击树中的节点将为该节点提供焦点。每个节点实例都有一个focus（）方法，因此您可以随时手动将任何节点聚焦在树中 - 这正是该示例为突出显示第二个节点所做的工作。