Почему tabindex элемента HTML переопределяется как -1? - PullRequest
Новая
       34

Почему tabindex элемента HTML переопределяется как -1?

0 голосов
/ 07 мая 2018

Я установил индекс табуляции HTML-элемента как '0', но при загрузке в пользовательском интерфейсе он автоматически изменился на '-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 как '0'

* ngFor - не что иное, как итерационный цикл.

У меня есть 4 объекта в массиве сотрудников .

Таким образом, он повторяется и загружается в пользовательский интерфейс

Первые 3 вхождения загружаются ожидаемым образом с tabindex = "0" для всех четырех элементов внутри div.

Но для четвертого вхождения tabindex и изменился как "-1". Таким образом, доступность не работает для этих 2 элементов.

Найти элементы, загруженные в браузер 

    <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 и обновляется как "-1"

Все ли остальные циклы работают как положено, но почему не последнее вхождение?

Может кто-нибудь уточнить меня

...