A cosa serve tabindex = "- 1" in bootstrap

A cosa tabindexserve l' attributo in Bootstrap 3?

La sua documentazione non dice nulla su di loro anche se li usano praticamente in tutti i modi.

L'ho trovato solo per quanto riguarda il suo utilizzo, il che non dice molto

Descrizioni comandi accessibili per gli utenti della tastiera e della tecnologia assistiva

Per gli utenti che navigano con una tastiera e in particolare per gli utenti di tecnologie assistive, è necessario aggiungere solo suggerimenti agli elementi attivabili da tastiera come collegamenti, controlli del modulo o qualsiasi elemento arbitrario con un attributo tabindex = "0".

E ho scoperto che non posso premere escper nascondere un modale se l' tabindexattributo non lo è-1 .

• Chiusura modale dopo aver premuto il esctasto (con tabindex)
• Modal non si chiude dopo aver premuto il esctasto (senza tabindex)

L' tabindexattributo definisce esplicitamente l'ordine di navigazione per gli elementi attivabili (in genere collegamenti e controlli del modulo) all'interno di una pagina. Può anche essere utilizzato per definire se gli elementi devono essere attivabili o meno.

[Entrambi] tabindex="0"e tabindex="-1"hanno un significato speciale e forniscono funzionalità distinte in HTML. Un valore di 0indica che l'elemento deve essere posizionato nell'ordine di navigazione predefinito. Questo permette elementi non nativo focalizzabile (quali <div>, <span>, e <p>) per ricevere attivo. Ovviamente si dovrebbero generalmente utilizzare collegamenti e controlli del modulo per tutti gli elementi interattivi, ma questo consente ad altri elementi di essere focalizzati e attivare l'interazione.

Un tabindex="-1"valore rimuove l'elemento dal flusso di navigazione predefinito (ovvero, un utente non può selezionarlo), ma gli consente di ricevere lo stato attivo programmatico , il che significa che lo stato attivo può essere impostato su di esso da un collegamento o con script. ** Questo può essere molto utile per gli elementi che non dovrebbero essere tabulati, ma su cui potrebbe essere necessario il focus .

Un buon esempio è una finestra di dialogo modale : quando viene aperta, il focus dovrebbe essere impostato sulla finestra di dialogo in modo che uno screen reader inizi a leggere e la tastiera inizi a navigare all'interno della finestra di dialogo. Poiché la finestra di dialogo (probabilmente solo un <div>elemento) non è attivabile per impostazione predefinita, assegnarla tabindex="-1"consente di impostarla con lo script quando viene presentata.

Un valore di -1può anche essere utile in widget e menu complessi che utilizzano i tasti freccia o altri tasti di scelta rapida per garantire che solo un elemento all'interno del widget sia navigabile con il tasto Tab, ma consentire comunque di impostare lo stato attivo su altri componenti all'interno del widget.

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

Questo è il motivo per cui è necessario tabindex="-1"il modale <div>, in modo che gli utenti possano accedere alle scorciatoie da tastiera e da mouse comuni. Spero che aiuti.

L' attributo tabindex è associato all'HTML , non è specifico a Bootstrap.

Questa proprietà è responsabile di indicare se un elemento è raggiungibile tramite la navigazione da tastiera.

Devi cercare tre diversi scenari:

1. Quando si aggiunge tabindex = "0"a un elemento questo significa che è raggiungibile dalla navigazione da tastiera ma l'ordine è definito dall'ordine di origine dei documenti.

2. Quando si aggiunge un valore positivo all'attributo tabindex (ad esempio tabindex = "1", tabindex = "2"), tali elementi sono raggiungibili dalla navigazione da tastiera e l'ordine è definito dal valore dell'attributo.

3. Quando si aggiunge un valore negativo a tabindex (di solito tabindex="-1") significa che l'elemento non è raggiungibile dalla navigazione da tastiera, ma può essere focalizzato utilizzando la funzione focus in JS.