¿Para qué sirve tabindex = "- 1" en bootstrap?

¿Para qué sirve el tabindexatributo en Bootstrap 3?

Su documentación no dice nada sobre ellos aunque los usan prácticamente en todos los modales.

Solo encontré esto con respecto a su uso, que realmente no dice mucho

Información sobre herramientas accesible para usuarios de teclados y tecnologías de asistencia

Para los usuarios que navegan con un teclado y, en particular, los usuarios de tecnologías de asistencia, solo deben agregar información sobre herramientas a los elementos que se pueden enfocar con el teclado, como vínculos, controles de formulario o cualquier elemento arbitrario con un atributo tabindex = "0".

Y descubrí que no puedo presionar escpara ocultar un modal si el tabindexatributo no lo es-1 .

• Cierre modal después de presionar la esctecla (con tabindex)
• Modal no se cierra después de presionar la esctecla (sin tabindex)

El tabindexatributo define explícitamente el orden de navegación para los elementos enfocables (generalmente enlaces y controles de formulario) dentro de una página. También se puede utilizar para definir si los elementos deben ser enfocables o no.

[Ambos] tabindex="0"y tabindex="-1"tienen un significado especial y proporcionan una funcionalidad distinta en HTML. Un valor de 0indica que el elemento debe colocarse en el orden de navegación predeterminado. Esto permite que elementos que no son de forma nativa enfocable (tales como <div>, <span>, y<p> ) para recibir el foco del teclado. Por supuesto, generalmente se deben usar enlaces y controles de formulario para todos los elementos interactivos, pero esto permite que otros elementos sean enfocables y activen la interacción.

Un tabindex="-1"valor elimina el elemento del flujo de navegación predeterminado (es decir, un usuario no puede tabularlo), pero le permite recibir el enfoque programático , lo que significa que el enfoque se puede configurar desde un enlace o con secuencias de comandos. ** Esto puede ser muy útil para elementos a los que no se les debe asignar pestañas, pero que pueden necesitar tener el foco establecido en ellos .

Un buen ejemplo es una ventana de diálogo modal : cuando se abre, el foco debe establecerse en el diálogo para que un lector de pantalla comience a leer y el teclado comience a navegar dentro del diálogo. Debido a que el cuadro de diálogo (probablemente solo un <div>elemento) no se puede enfocar de forma predeterminada, asignarlo tabindex="-1"permite establecer el enfoque con secuencias de comandos cuando se presenta.

Un valor de -1también puede ser útil en widgets y menús complejos que utilizan teclas de flecha u otras teclas de método abreviado para garantizar que solo un elemento dentro del widget sea navegable con la tecla de tabulación, pero aún así permitir que el foco se establezca en otros componentes dentro del widget.

Fuente: http://webaim.org/techniques/keyboard/tabindex

Es por eso que necesita tabindex="-1"en el modal <div>, para que los usuarios puedan acceder a atajos de teclado y mouse comunes. Espero que ayude.

El atributo tabindex está asociado con HTML , no es específico de Bootstrap.

Esta propiedad es responsable de indicar si se puede acceder a un elemento mediante la navegación del teclado.

Debe estar atento a tres escenarios diferentes:

1. Cuando se agrega tabindex = "0"a un elemento, esto significa que se puede acceder a él mediante la navegación del teclado, pero el orden está definido por el orden de origen de los documentos.

2. Cuando se agrega un valor positivo al atributo tabindex (por ejemplo tabindex = "1", tabindex = "2"), se puede acceder a esos elementos mediante la navegación del teclado y el orden se define por el valor del atributo.

3. Cuando se agrega un valor negativo a tabindex (generalmente tabindex="-1"), significa que el elemento no es accesible mediante la navegación del teclado, pero se puede enfocar usando la función de enfoque en JS.