IE 11 不关注 tabindex 的跨度

Question

设置：

我们有一个 angular 5.x webapp，它有一个树组件。它基本上是一个 <ul>-List，带有用于键盘导航的移动标签索引。
由于树组件的布局，HTML 有点复杂，它具有一些递归性。

问题：

我们注意到在测试 TAB 焦点时 Internet Explorer 中有一个奇怪的行为。在下面的代码示例中，您可以看到第 8 行中的 <span> 有一个 tabindex="0"，因此应该可以通过 TAB 键聚焦。此时其他节点不应该是可聚焦的。现在 only 在 IE 11 中，该元素绝对不能通过键导航获得焦点。所有其他经过测试的浏览器（Chrome、Edge、Firefox）都能很好地处理任务。

问题： 为什么 IE 11 没有将 span 与 tabindex="0" 集中在一起？

重现问题的 angular 组件的示例 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>

Answer 1

原因可能是您的 span 元素位于 <a> 标签内。

检查caniuse.com脚注2：

<a> elements are never keyboard-focusable, even if they have tabindex="0".

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

另请注意，disabled="false" 并没有按照您的预期执行。 仅存在 disabled 属性就意味着它已被禁用，无论您分配给它的值如何（除了 false 不是有效值，只有 disabled 是有效值）。

IE 11 不关注 tabindex 的跨度

IE 11 doesn't focus on span with tabindex

html

internet-explorer

accessibility

tabindex

angular

设置：

问题：

重现问题的 angular 组件的示例 HTML：