Атрибут tabindex
tabindex визначає, чи елемент може отримати фокус з клавіатури (Tab) і в якому порядку відносно інших елементів.
Applies to
global
Values
"0" — елемент фокусується у природному DOM-порядку; додатне число — власний порядок (не рекомендовано); "-1" — елемент програмно фокусований (через JS), але не Tab.
Example
<div tabindex="0" role="button">Кастомна кнопка</div>
Edge cases
- Додатні значення (1, 2, 3...) ламають природний порядок навігації і вважаються anti-pattern — майже завжди краще змінити порядок елементів у DOM, а не tabindex.
- tabindex="-1" корисний для програмного фокусу (наприклад, на модалці після відкриття), без додавання елемента в звичайний Tab-порядок.
Accessibility
- Нативно фокусовані елементи (a, button, input) не потребують tabindex — він потрібен лише для кастомних інтерактивних div/span.