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

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

另请注意，disabled="false" 不会按照您的预期执行。 disabled-attribute 的存在意味着它被禁用，无论您分配给它的值是多少（除了false 不是有效值，只有disabled 是有效值）。