Question

设置：

我们有一个有角度的5.x Webapp，其中包含一个树组件。它基本上是一个<ul>-列表，带有一个用于键盘导航的漫游tabindex。
由于树组件的布局，HTML稍微复杂一些，并且具有一定的递归性。

问题：

我们在测试TAB焦点时注意到Internet Explorer中有一个奇怪的行为。在下面的代码示例中，您可以看到第8行中的<span>具有tabindex="0"，因此应该可以通过TAB-Key进行聚焦。此时其他节点不应集中。现在，在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>

Answer 1

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

检查caniuse.com脚注2：

<a>元素永远不会以键盘为焦点，即使它们具有tabindex="0"。

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

还请注意，disabled="false"并没有达到您的预期。 仅存在disabled属性意味着它已被禁用，无论您分配给它的值是什么（除了false有效值，只有disabled是有效值）。

IE 11并不专注于tabindex

设置：

问题：

用于复制问题的角度组件的示例HTML：

1 个答案: