Я несколько раз замечал следующий шаблон в кодовой базе, над которой сейчас работаю:

<button tabindex="0">A button</button>
<ul tabindex="-1">...

Конечно, tabindex="-1" на ul предотвращает фокусировку, но какой смысл устанавливать tabindex=0 на кнопку? Разве этот элемент не доступен по умолчанию?

0
mrtnmgs 22 Янв 2019 в 01:58

2 ответа

Лучший ответ

Оба использования tabindex излишни.

Просто чтобы подробнее рассказать об использовании tabindex и о том, что это означает в данном контексте:

Tabindex = "0" означает: возможность фокусировки с помощью клавиши табуляции и из сценария (с использованием element.focus()) и вставка в естественный порядок табуляции (также известный как порядок, логически следующий за DOM). Так как это поведение кнопок по умолчанию, вы можете отбросить <button tabindex="0"> как бессмыслицу и раздутый код.

Tabindex больше 0 назначает настраиваемый порядок табуляции. Итак, если вы скажете <button tabindex="1">, кнопка всегда будет фокусироваться первой при использовании вкладки, независимо от DOM-структуры. Этот метод не рекомендуется.

Tabindex = "- 1" говорит, что вы не можете сфокусировать его с помощью вкладки, но функция JavaScript element.focus() будет работать. На ul это имеет смысл только в том случае, если вы хотите в какой-то момент сфокусировать его из сценария. В противном случае это тоже код, который также назначает непреднамеренную роль.

1
TimB 26 Янв 2019 в 21:57