Tab Index & Focus

Definition

Mécanisme qui contrôle l'ordre de navigation au clavier. tabindex='0' rend un élément focusable dans l'ordre du DOM, tabindex='-1' permet le focus programmatique uniquement.

Analogie

Comme les numéros de file d'attente : ils déterminent dans quel ordre chaque personne sera servie.

Exemple de code

<!-- Focusable dans l'ordre du DOM -->
<div tabindex="0" role="button">Action</div>
<!-- Focus programmatique seulement -->
<div tabindex="-1" id="modal-title">Titre</div>
<!-- JAMAIS : tabindex positif -->
<!-- <div tabindex="5"> NE PAS FAIRE -->

Cas d'usage

Gérer le focus dans les modales, menus déroulants et composants interactifs custom.

Anti-pattern

Termes lies