为什么HTML元素的tabindex覆盖为-1？

我已将HTML元素的选项卡索引设置为“

0

”，但在UI中加载时，它会自动更改为“

-1

”

以下是我使用Angular4代码的实际逻辑

<div *ngFor="let employee of employees; let i = index">
        <h4  id="name" tabindex="0" aria-label="{{employee.name}}">{{employee.name}}</h4>
        <p tabindex="0" aria-label="{{employee.id}}">{{employee.id}}</p>
        <p><a  role="link" target="_blank" href="url" aria-label="Show Details" tabindex="0">Show Details</a></p>
        <button  role="button"  aria-label="Move Next" tabindex="0">Move Next</button>
</div>

{{employee.name}
{{{employee.id}

下一步

对于我添加的每个元素，tabindex为“0”

*ngFor只是一个迭代循环

我在employees数组中有4个对象

因此，它被迭代并加载到UI中

对于div中的所有四个元素，前3个引用按预期加载tabindex=“0”

但第四次出现时，tabindex和变为“-1”。因此，可访问性不适用于这两个元素

查找浏览器中加载的元素

    <div >
    <h4  id="name" tabindex="0" aria-label="Employee1">Employee1</h4>
    <p tabindex="0" aria-label="10001">10001</p>
    <p><a  role="link" target="_blank" href="url" aria-label="Show Details" tabindex="0">Show Details</a></p>
    <button  role="button"  aria-label="Move Next" tabindex="0">Move Next</button>
</div>
<div >
    <h4  id="name" tabindex="0" aria-label="Employee2">Employee2</h4>
    <p tabindex="0" aria-label="10002">10002</p>
    <p><a  role="link" target="_blank" href="url" aria-label="Show Details" tabindex="0">Show Details</a></p>
    <button  role="button"  aria-label="Move Next" tabindex="0">Move Next</button>
</div>
<div >
    <h4  id="name" tabindex="0" aria-label="Employee3">Employee3</h4>
    <p tabindex="0" aria-label="10003">10003</p>
    <p><a  role="link" target="_blank" href="url" aria-label="Show Details" tabindex="0">Show Details</a></p>
    <button  role="button"  aria-label="Move Next" tabindex="0">Move Next</button>
</div>
<div >
    <h4  id="name" tabindex="0" aria-label="Employee4">Employee4</h4>
    <p tabindex="0" aria-label="10004">10004</p>
    <p><a  role="link" target="_blank" href="url" aria-label="Show Details" tabindex="-1">Show Details</a></p>
    <button  role="button"  aria-label="Move Next" tabindex="-1">Move Next</button>
</div>

雇员1
10001

下一步
雇员2
10002

下一步
雇员3
10003

下一步
雇员4
10004

下一步

请参见索引的第四个div选项卡中的差异，并更新为“-1”

剩余的循环按预期工作，但为什么不是最后一次

---

有人能告诉我你在用什么浏览器吗？可能是与浏览器相关的问题。可能不是问题的原因，但请确保每个元素都有不同的

id

（如果不需要，请删除该属性）。你所有的

h4

元素都有

id=“name”

@Daniel:在诸如Chrome、FF、Edge等浏览器中签入。所有人都有这个问题你能创建一个stackblitz复制吗？当我将代码复制到stackblitz并运行它时，一切都有正确的tabindex（0）…，我也无法重现该问题。请参阅我对stackblitz的测试：