Что tabindex = "- 1" в начальной загрузке для

Для чего tabindexнужен атрибут в Bootstrap 3?

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

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

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

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

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

• Модальное закрытие после нажатия escклавиши (с tabindex)
• Модальное escокно не закрывается после нажатия клавиши (без tabindex)

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

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

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

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

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

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

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

TabIndex атрибут связан с HTML , это не относится к Bootstrap.

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

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

1. При добавлении tabindex = "0"к элементу это означает, что он доступен для навигации с клавиатуры, но порядок определяется исходным порядком документов.

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

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