Quel est le tabindex = "- 1" dans bootstrap pour

À quoi sert l' tabindexattribut dans Bootstrap 3?

Sa documentation ne dit rien à leur sujet bien qu'ils les utilisent pratiquement dans tous les modaux.

Je ne trouve cela que sur son utilisation, ce qui ne dit pas grand-chose

Info-bulles accessibles pour les utilisateurs du clavier et des technologies d'assistance

Pour les utilisateurs naviguant avec un clavier, et en particulier les utilisateurs de technologies d'assistance, vous ne devez ajouter des info-bulles aux éléments sélectionnables au clavier, tels que des liens, des contrôles de formulaire ou tout élément arbitraire avec un attribut tabindex = "0".

Et j'ai découvert que je ne pouvais pas appuyer sur escpour masquer un modal si l' tabindexattribut ne l'est pas-1 .

• Fermeture modale après appui sur la esctouche (avec tabindex)
• Modal ne se ferme pas après avoir appuyé sur la esctouche (sans tabindex)

L' tabindexattribut définit explicitement l'ordre de navigation des éléments focalisables (généralement des liens et des contrôles de formulaire) dans une page. Il peut également être utilisé pour définir si les éléments doivent être focalisables ou non.

[Les deux] tabindex="0"et tabindex="-1"ont une signification particulière et fournissent des fonctionnalités distinctes en HTML. Une valeur de 0indique que l'élément doit être placé dans l'ordre de navigation par défaut. Cela permet à des éléments qui ne sont pas nativement vario (tels que <div>, <span>et <p>) pour recevoir le focus du clavier. Bien sûr, il faut généralement utiliser des liens et des contrôles de formulaire pour tous les éléments interactifs, mais cela permet à d'autres éléments d'être focalisables et de déclencher une interaction.

Une tabindex="-1"valeur supprime l'élément du flux de navigation par défaut (c'est-à-dire qu'un utilisateur ne peut pas y accéder), mais elle lui permet de recevoir le focus programmatique , ce qui signifie que le focus peut être défini sur lui à partir d'un lien ou avec un script. ** Cela peut être très utile pour les éléments qui ne doivent pas être tabulés, mais qui peuvent nécessiter un focus sur eux .

Un bon exemple est une fenêtre de dialogue modale - lorsqu'elle est ouverte, le focus doit être mis sur la boîte de dialogue pour qu'un lecteur d'écran commence à lire et que le clavier commence à naviguer dans la boîte de dialogue. Étant donné que la boîte de dialogue (probablement juste un <div>élément) n'est pas focalisable par défaut, son affectation tabindex="-1"permet de définir le focus avec un script lorsqu'il est présenté.

La valeur de -1peut également être utile dans les widgets et menus complexes qui utilisent des touches fléchées ou d' autres touches de raccourci pour garantir que seul un élément du widget est navigable avec la touche de tabulation, tout en permettant de définir le focus sur d'autres composants du widget.

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

C'est pourquoi vous avez besoin tabindex="-1"du mode modal <div>, afin que les utilisateurs puissent accéder aux raccourcis clavier et souris courants. J'espère que cela pourra aider.

L' attribut tabindex est associé au HTML , il n'est pas spécifique à Bootstrap.

Cette propriété est chargée d'indiquer si un élément est accessible par navigation au clavier.

Vous devez rechercher trois scénarios différents:

1. Lors de l'ajout tabindex = "0"à un élément, cela signifie qu'il est accessible par la navigation au clavier, mais l'ordre est défini par l'ordre source des documents.

2. Lors de l' ajout d'une valeur positive à l'attribut tabindex (par exemple tabindex = "1", tabindex = "2"), ces éléments sont accessibles par navigation au clavier et l'ordre est défini par la valeur de l'attribut.

3. Lors de l' ajout d'une valeur négative à tabindex (généralement tabindex="-1"), cela signifie que l'élément n'est pas accessible par la navigation au clavier, mais peut être ciblé à l'aide de la fonction de mise au point dans JS.