IE 11 не фокусируется на span с tabindex - PullRequest
Новая
       24

IE 11 не фокусируется на span с tabindex

0 голосов
/ 30 августа 2018

Установка:

У нас есть угловое 5.x веб-приложение, в котором есть компонент дерева. Это в основном список <ul> с подвижным индексом табуляции для навигации по клавиатуре.
HTML-код немного сложнее из-за расположения компонента дерева и обладает некоторой рекурсивностью.

Проблема:

Мы заметили странное поведение в Internet Explorer при тестировании TAB-фокуса. В приведенном ниже примере кода вы можете видеть, что <span> в строке 8 имеет tabindex="0" и поэтому должен фокусироваться с помощью клавиши TAB. Другие узлы не должны быть фокусируемыми в этой точке. Теперь только в IE 11 элемент абсолютно не фокусируется через навигацию по клавишам. Все остальные протестированные браузеры (Chrome, Edge, Firefox) отлично справляются с этой задачей.

Вопрос: Почему IE 11 не фокусирует span на tabindex="0"?

Пример HTML для углового компонента, который воспроизводит проблему: 

<div id="hostDivForTree">
<ul class="subtree">
    <li class="item ng-star-inserted" >
        <a class="toggleLink ng-star-inserted">
            <i class="icon arrow"></i>
        </a>
        <a disabled="false" class="nodeName expanded" id="treeIndex_0" data-tag="none">
            <span tabindex="0" class="label">Marketing</span>
        </a>
        <div class="collapse ng-star-inserted" aria-expanded="true" aria-hidden="false" style="height: auto; overflow: visible; display: block;">
            <ul class="subtree">
                <li class="item ng-star-inserted">
                    <a disabled="false" class="nodeName leaf" id="treeIndex_0_0" data-tag="good">
                        <span tabindex="-1" class="label">Level 1</span>
                    </a>
                </li>
                <li class="item ng-star-inserted" >
                    <a disabled="false" class="nodeName leaf" id="treeIndex_0_1" data-tag="none">
                        <span tabindex="-1" class="label">Level 2</span>
                    </a>
                </li>
            </ul>
        </div>
    </li>
    <!-- ... -->
    <!-- Here go further li - items like the one before - its recursive -->     
    <!-- ... -->
</ul>

1 Ответ

0 голосов
/ 30 августа 2018

Возможно, причина в том, что ваши span элементы находятся внутри <a> тегов.

Проверьте сноску caniuse.com 2:

<a> элементы никогда не фокусируются на клавиатуре, даже если они имеют tabindex="0".

https://caniuse.com/#search=tabindex

Также обратите внимание, что disabled="false" не делает того, чего вы можете ожидать. Простое наличие disabled -атрибута означает, что он отключен , независимо от значения, которое вы ему присваиваете (кроме false, не являющегося действительным значением, только disabled является допустимым значением).

...