IE 11并不专注于使用tabindex的跨度

Question

Setup:

我们有一个角度5.x webapp，它具有树组件。它基本上是一个<ul>-List，带有用于键盘导航的流动tabindex。 由于树组件的布局，HTML有点复杂，并且具有一些递归性。

Problem:

在测试TAB焦点时，我们注意到Internet Explorer中存在一种奇怪的行为。在下面的代码示例中，您可以看到第8行中的<span>具有tabindex="0"，因此应该可以通过TAB-Key进行聚焦。此时其他节点不应该是可聚焦的。现在仅在IE 11中，元素通过keynavigation绝对无法集中。所有其他经过测试的浏览器（Chrome，Edge，Firefox）都能很好地处理这项任务。

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

Example HTML for an angular component that reproduces the Issue:

<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>元素永远不会是键盘焦点，即使他们有tabindex="0"。

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

另请注意，disabled="false"没有按照您的预期行事。仅仅存在disabled属性意味着它被禁用，无论你赋予它的值（除了false不是有效值，只有disabled是有效值）。