Что такое tabindex = "- 1" в бутстрапе для

Что атрибут tabindex в Bootstrap 3 для?

В его документации ничего не говорится о них, хотя они используют их практически во всех модалях.

Я только нашел это относительно его использования, которое на самом деле не говорит много

Доступные всплывающие подсказки для пользователей клавиатуры и вспомогательных технологий

Для пользователей, использующих клавиатуру и, в частности, пользователей вспомогательных технологий, вы должны добавлять только всплывающие подсказки к элементам с клавиатурой, такими как ссылки, элементы управления формами или любой произвольный элемент с атрибутом tabindex = "0".

И я узнал Я не могу нажать esc, чтобы скрыть модальность, если атрибут tabindex не является -1.

Ответ 1

Атрибут tabindex явно определяет порядок навигации для настраиваемых элементов (обычно ссылок и элементов управления формами) внутри страницы. Его также можно использовать для определения того, должны ли элементы фокусироваться или нет.

[Both] tabindex="0" и tabindex="-1" имеют особое значение и обеспечивают четкую функциональность в HTML. Значение 0 указывает, что элемент должен быть помещен в навигационный порядок по умолчанию. Это позволяет элементам, которые не являются наводчивыми (например, <div>, <span> и <p>) для получения фокуса клавиатуры. Конечно, обычно нужно использовать ссылки и элементы управления форматом для всех интерактивных элементов, но это позволяет другим элементам фокусироваться и запускать взаимодействие.

A tabindex="-1" Значение удаляет элемент из потока навигации по умолчанию (т.е. пользователь не может в него вставлять), но позволяет ему получать программный фокус смысл фокуса может быть установлен для него из ссылки или с помощью скриптов. ** Это может быть очень полезно для элементов, которые не должны быть привязаны к вкладке, но для этого может потребоваться установить фокус на них.. p >
Хорошим примером является модальное диалоговое окно - при открытии фокус должен быть установлен в диалоговом окне, чтобы экранное устройство начинало чтение, и клавиатура начиналась навигации в диалоговом окне. Поскольку диалог (возможно, только элемент <div>) по умолчанию не настраивается, назначение его tabindex="-1" позволяет настроить фокус на него с помощью скриптов при его представлении.

Значение -1 также может быть полезно в сложных виджетах и меню, в которых используются клавиши со стрелками или другие сочетания клавиш, чтобы гарантировать, что только один элемент внутри виджета можно перемещать с помощью клавиши табуляции, но по-прежнему позволяют настроить фокус на других компонентах виджета.

Источник: http://webaim.org/techniques/keyboard/tabindex

Вот почему вам нужно tabindex="-1" в модальном <div>, чтобы пользователи могли получать доступ к общим ярлыкам мыши и клавиатуры. Надеюсь, что это поможет.

Ответ 2

Атрибут tabindex связан с HTML, он не является специфичным для Bootstrap.

Это свойство отвечает за указание того, доступен ли элемент с помощью клавиатуры.

Вы должны обратить внимание на три различных сценария:

При добавлении tabindex = "0" к элементу это означает, что он доступен с помощью клавиатуры, но порядок определяется исходным порядком документов.
При добавлении положительного значения в атрибут tabindex (например, tabindex = "1", tabindex = "2") эти элементы достижимы с помощью навигации по клавиатуре, а порядок определяется значением атрибута.
При добавлении отрицательного значения в tabindex (обычно tabindex="-1") это означает, что элемент не доступен с помощью клавиатуры, но может быть сфокусирован с помощью функции фокуса в JS.