apps/web/src/coque/Onglets.tsx
0 → 100644
+85
−0
Loading
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)