twitter bootstrap - modal - ¿Para qué sirve el tabindex="- 1" en bootstrap

modal bootstrap

Question

¿Para qué tabindex atributo tabindex en Bootstrap 3?

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

Solo he encontrado esto con respecto a su uso, que realmente no dice mucho

Información sobre herramientas accesible para usuarios de teclado y tecnología de asistencia

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

Y descubrí que no puedo presionar esc para ocultar un modal si el atributo tabindex no es -1 .

• Cierre modal después de presionar la tecla esc (con tabindex)
• El modo no se cierra después de presionar la tecla esc (sin tabindex)

Answer 1

El atributo tabindex define explícitamente el orden de navegación para elementos enfocables (generalmente enlaces y controles de formulario) dentro de una página. También se puede usar 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 0 indica que el elemento debe colocarse en el orden de navegación predeterminado. Esto permite que los elementos que no se pueden enfocar de forma nativa (como <div> , <span> y <p> ) reciban 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 puedan enfocarse y desencadenar la interacción.

Un valor tabindex="-1" elimina el elemento del flujo de navegación predeterminado (es decir, un usuario no puede tabindex="-1" ), pero le permite recibir un enfoque programático , lo que significa que el enfoque se puede establecer 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 tal vez necesiten tener un foco establecido .

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 diálogo (probablemente solo un elemento <div> ) no es enfocable por defecto, asignarlo tabindex="-1" permite que el foco se establezca con scripts cuando se presenta.

Un valor de -1 también puede ser útil en widgets y menús complejos que utilizan teclas de flecha u otras teclas de acceso directo para garantizar que solo un elemento dentro del widget sea navegable con la tecla de tabulación, pero aún así permitir que se establezca el foco en otros componentes dentro 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 los atajos de teclado y mouse comunes. Espero que ayude.

Answer 2

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

Esta propiedad es responsable de indicar si un elemento es accesible mediante la navegación del teclado.

Debe buscar tres escenarios diferentes:

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

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

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