Доступность элемента управления YUI Tree: как перейти к дереву в 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(). Добавление следующего к 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

Узел потеряет фокус при щелчке по элементу на странице, который может принять фокус. Нажатие на узел в дереве даст этому узлу фокус. Каждый экземпляр узла имеет метод focus (), так что вы можете вручную сфокусировать любой узел в дереве, когда захотите - это именно то, что делает этот пример, чтобы выделить второй узел.

Answer 3

Это полностью проваливается для меня (с использованием Google Chrome), но, глядя на код, дерево представляет собой скопление вложенных таблиц - я бы избежал этого, как чумы, если вы серьезно относитесь к доступности.