Tree YUI树控件的可访问性：如何在Firefox上标记树？

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

在orange TreeView控件中选择标题：树视图节点标签的内联编辑。 第一次点击选项卡：选择新窗口中的链接视图示例。 再次点击标签：这将选择树内的锚

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

---

问题在于，在上面的步骤3中，当前项目的背景没有突出显示，但在步骤4中浏览树时，背景会突出显示。这是YUI树的一个bug，还是有一种方法可以在树接收到焦点时以编程方式突出显示当前项？

对于我来说，使用Google Chrome完全无法做到这一点，但从代码上看，这棵树是嵌套表的大本营——如果你认真考虑可访问性，我会像瘟疫一样避免这一点

对于我来说，完全使用Google Chrome是失败的，但从代码上看，这棵树是一个嵌套表的沃伦-如果你认真考虑可访问性，我会像瘟疫一样避免这种情况

单击页面上可接受焦点的元素时，节点将失去焦点。单击树中的节点将获得该节点的焦点。每个节点实例都有一个focus方法，因此您可以随时手动聚焦树中的任何节点-这正是该示例用来突出显示第二个节点的操作。

当单击页面上可接受聚焦的元素时，该节点将失去聚焦。单击树中的节点将获得该节点的焦点。每个节点实例都有一个focus方法，因此您可以随时手动聚焦树中的任何节点-这正是该示例用来突出显示第二个节点的操作。

解决方法是在节点内的锚上注册一个侦听器，当锚获得焦点以查找相应的节点时，调用node.focus。添加以下内容以在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
    );
}

---

对此的修复方法是，当锚获得焦点以查找相应节点时，在节点内的锚上注册侦听器，并调用node.focus。添加以下内容以在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
    );
}

---

我知道使用HTML表格可能会给屏幕阅读器带来问题，但我的目标只是让树状视图可以与键盘一起使用，这通常是可访问性的一部分，但我同意，是一个非常特殊的特性。当前元素上的初始淡蓝色背景高亮显示将作为一个类应用于多个s。由于文档中的选项卡只关注s，因此您需要使用一些可怕的javascript来复制它。简言之，制表符不起作用。箭头可以。标签是一种默认的浏览器行为，针对标签，YUI-Tree是一个使用箭头键的自定义界面。两个不相容但重叠的系统。YUI正试图重新发明轮子。使用表格。我知道使用HTML表格可能会给屏幕阅读器带来问题，但我的目标只是让树状视图可以与键盘一起使用，这通常是可访问性的一部分，但我同意，是一个非常特殊的特性。当前元素上的初始淡蓝色背景高亮显示将作为一个类应用于多个s。由于文档中的选项卡只关注s，因此您需要使用一些可怕的javascript来复制它。简言之，制表符不起作用。箭头可以。标签是一种默认的浏览器行为，针对标签，YUI-Tree是一个使用箭头键的自定义界面。两个不相容但重叠的系统。YUI正试图重新发明轮子。使用表格。亚当，谢谢你的回答。是：如果你点击一个节点，如果你得到焦点并得到背景色，就像预期的那样。如果使用键盘方向键从一个节点移动到另一个节点，则同上。似乎不起作用的是，当节点获得焦点时，通过点击页面上其他地方的选项卡来设置节点的背景色，而不是单击该节点。此1分钟的屏幕广播显示以下内容：。这更有意义吗？亚当，我找到了这个问题的解决方案，我把它作为这个问题的答案发布了。亚当，谢谢你的回答。是：如果你点击一个节点，如果你得到焦点并得到背景色，就像预期的那样。如果使用键盘方向键从一个节点移动到另一个节点，则同上。似乎不起作用的是，当节点获得焦点时，通过点击页面上其他地方的选项卡来设置节点的背景色，而不是单击该节点。此1分钟的屏幕广播显示以下内容：。这更有意义吗？亚当，我找到了这个问题的解决方案，我把它作为这个问题的答案贴了出来。