我已将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>
对于每个元素我都将tabindex添加为&#39; 0&#39;
* ngFor只不过是一个迭代循环。
我在员工数组中有4个对象。
所以它在UI中被迭代并加载
前3次出现按预期加载tabindex =&#34; 0&#34;对于div中的所有四个元素。
但是对于第四次出现的tabindex并改为&#34; -1&#34;。所以可访问性不适用于这两个元素。
查找浏览器中加载的元素
<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>
查看第4个div tabindex的差异并更新为&#34; -1&#34;
一切都是剩下的循环按预期工作但为什么不是最后一次出现?
任何人都可以澄清我