Quatre barres d'onglets où la couleur portait seule l'information

Un « div » et des « button » stylés selon l'onglet actif, écrits quatre fois à
la main. À l'écran cela se voit ; pour le reste, non. Aucun « tablist », aucun
« aria-selected » : un lecteur d'écran annonçait des boutons ordinaires sans
dire qu'ils forment un jeu, ni lequel est ouvert. Et le dossier de préparation
demandait quinze appuis sur « Tab » pour être traversé.

── Ma liste des « trois » était fausse dans les deux sens

Le tableau des actions n'est pas une barre d'onglets : ce sont deux bascules
indépendantes, « Par cellule » et « Voir les abandonnées ». Et il en existait
deux que je n'avais pas citées — la console d'instance et le dossier de
préparation, celui-là même qui souffrait le plus du défaut avec ses quinze
onglets.

Cinquième fois dans cette session qu'une énumération à la main se révèle fausse.
J'ai donc balayé la forme d'abord : un état nommé « onglet », des boutons
stylés par comparaison à cet état, un panneau conditionnel en dessous. Quatre
écrans répondent à cette description — la conduite, la veille externe, la
console, le dossier de préparation.

── Un composant, pas quatre copies

« coque/Onglets.tsx ». Le motif ARIA tient en trois pièces, plus une quatrième
qu'on oublie toujours : la barre porte « tablist » et son nom, chaque onglet
porte « tab » et « aria-selected », le panneau porte « tabpanel » et le nom de
l'onglet qui l'a ouvert — et le clavier fait de la barre un seul arrêt de
tabulation, les flèches circulant entre les onglets. C'est cette quatrième pièce
qui justifie le composant : une gestion clavier ne se recopie pas quatre fois,
et une barre à moitié posée est pire qu'une barre absente. Annoncer « onglet »
sans donner les flèches, c'est promettre un comportement qui n'existe pas.

Le panneau ne reçoit pas de « tabIndex » : les quatre contiennent des éléments
focalisables, et les pratiques ARIA ne demandent l'arrêt supplémentaire que pour
un panneau qui n'en a aucun.

Un détail qui compte pour la veille externe : son bouton « Collecter
maintenant » vivait dans la même rangée que les onglets. La barre s'y niche
désormais, le bouton reste son frère — un « tablist » n'accueille que des
onglets. Vérifié : zéro enfant non-onglet dans la barre.

── Deux garanties, parce qu'une moitié de motif est pire que rien

L'une interdit d'écrire une barre à la main — la comparaison « onglet === … ? »
hors du composant. L'autre exige le panneau qui va avec : sans lui,
« aria-controls » désignerait le vide.

── Vérifié à l'écran, pas au source

Dossier de préparation : quinze onglets, un seul sélectionné, un seul arrêt de
tabulation, tous les « aria-controls » résolvent vers le panneau, et le panneau
porte le nom de l'onglet actif. Flèche droite deux fois depuis « Préparation »
mène à « Étiquettes » — sélection, focus et nom du panneau suivent ensemble.
« Fin » mène à « Historique », et flèche droite y revient au début.

Les trois autres de même. La conduite garde ses grands boutons — « petit » est
une propriété, la mise en page ne change pas d'un pixel.

1181 garanties au vert, et quatre clés d'anglais pour les noms des barres : le
compteur de couverture les a réclamées avant que j'y pense, ce qui est
exactement son travail.

── Ce que je n'ai pas touché

Les bascules du tableau des actions et le « Composer » du cockpit n'ont pas
d'« aria-pressed » : rien ne dit si elles sont enfoncées. Le choix de registre
de la clôture est un jeu de boutons sans nom qui n'ouvre aucun panneau — un
groupe, pas des onglets. Le périmètre du cockpit — « Toute la crise » et les
cellules — est un filtre logé dans une rangée qui porte aussi le « Composer » :
en faire une barre d'onglets demanderait de séparer la rangée. Trois écarts
distincts, à traiter comme tels.

Co-Authored-By: Claude (RCA)