YUI 树控件的可访问性：如何在 Firefox 上切换到树？

Question

考虑这个显示正在运行的 YUI 树的示例：

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

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

3. 第二次点击选项卡：这将选择树内的一个锚点。

   <块引用>

   标签 0 未突出显示 http://img.skitch.com/20091218-61eqs6gcngp8ay56s1pba3jhb.png

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

   <块引用>

   标签 1 突出显示 http://img.skitch.com/20091218-es5xh4g4k41d8s133hay65ufrr.png

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

Answer 1

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

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() 方法，因此您可以随时手动聚焦树中的任何节点 - 这正是该示例为突出显示第二个节点所做的操作。