Accessibilité

CapyCode vise la conformité RGAA 4.1.2 (WCAG 2.2 niveau AA) : tout doit être utilisable au clavier et par un lecteur d'écran, dans les deux thèmes. Ces règles valent pour tout nouveau composant.

Structure de la page

• Un seul h1 (masqué, dans l'en-tête), un h2 par zone : volet latéral, éditeur vide, graphe Git, console.
• Repères : header (barre de menus), nav (barre d'activité), aside (volet latéral, poignée comprise), main (éditeur et console), footer (barre d'état). Tout contenu est dans un repère.
• Liens d'évitement vers l'éditeur, le volet latéral (s'il est ouvert) et la console.

Motifs WAI-ARIA

Chaque widget suit le motif WAI-ARIA correspondant, avec un seul arrêt de tabulation (tabindex itinérant) et les flèches à l'intérieur :

Widget	Motif	Où
Barre de menus	menubar	MenuBar.vue
Bouton à menu	menu button	MenuButton.vue (nouvelle console, branches, fusion)
Barre d'activité	tablist vertical, tabpanel	ActivityBar.vue, App.vue
Onglets de l'éditeur	tablist, tabpanel	EditorTabs.vue
Explorateur, plan	tree	useTreeNavigation
Graphe Git	listbox	GitGraphTable.vue
Palette de commandes	combobox + listbox	CommandPalette.vue
Fenêtres modales	dialog / alertdialog	BaseDialog.vue (toutes les fenêtres)
Poignées de redimensionnement	separator focalisable	useSeparator
Infobulle d'un commit	tooltip	GitCommitTooltip.vue

Les composables et composants communs portent ces motifs ; un nouveau menu, une nouvelle fenêtre ou une nouvelle poignée les réutilise au lieu de réécrire la gestion du clavier.

• MenuButton : ↓, Entrée ou Espace ouvrent sur le premier élément, ↑ sur le dernier ; dans le menu ↑/↓, Début, Fin ; Échap referme et rend le focus au bouton. Les choix exclusifs sont des menuitemradio.
• BaseDialog : focus piégé puis rendu à l'élément d'origine, Échap ferme, aria-labelledby vers le titre.
• useSeparator : flèches (pas de 16 px ou 5 %), Début et Fin pour les limites, Entrée pour la taille par défaut ; aria-valuenow/min/max.
• useTreeNavigation : ↑/↓, → déplie ou entre, ← replie ou remonte, Début, Fin.

Clavier

• Pas de piège (RGAA 12.9) : dans l'éditeur, Échap puis Tab sort du champ (CodeMirror, temporarilySetTabFocusMode) ; dans le terminal et les prompts, useTabEscape fait de même, et Tab sur une ligne vide déplace le focus.
• Alternatives au glisser-déposer (WCAG 2.5.7) : sur un onglet, Ctrl+Maj+←/→ le déplacent dans la barre, Ctrl+Alt+←/→ vers l'autre volet ; commande « Déplacer l'éditeur dans l'autre groupe » ; poignées réglables au clavier.
• Raccourcis propres à un élément annoncés par aria-keyshortcuts (Suppr sur un onglet, F2 et Suppr dans l'explorateur).
• Les boutons qui n'apparaissent qu'au survol (fermer un onglet, actions d'un fichier) sont masqués aux technologies d'assistance : leur action existe au clavier sur l'élément lui-même.

Noms, états, annonces

• Une icône seule est aria-hidden="true" ; son bouton a un aria-label (et le même title).
• Le nom accessible contient le texte visible (WCAG 2.5.3) : on ajoute au texte plutôt que de le remplacer (sr-only pour un complément).
• États : aria-expanded, aria-selected, aria-checked, aria-pressed, aria-current.
• Pas de bouton dans un bouton (axe nested-interactive) : une ligne qui porte des actions (fichier du panneau Git, en-tête de section repliable) n'est pas elle-même un bouton ; son action principale est un <button> à côté des autres.
• Annonces : sorties des consoles en role="log", résultats de recherche et formatage en role="status", notifications en status (erreurs en alert). Une zone d'annonce existe avant son message.
• Rien ne se ferme seul pendant qu'on s'en sert (WCAG 2.2.1) : un toast survolé ou focalisé reste affiché.

Couleurs et tailles

• Couleurs uniquement par les jetons du thème (text-vscode-* dans tailwind.config.js, définis dans src/style.css) : text, textMuted, textBright, et les couleurs sémantiques link, success, warning, error, info, purple. Jamais de couleur Tailwind brute (text-red-400) ni hexadécimale pour du texte.
• Tout texte atteint 4,5:1 sur tous les fonds du thème, le focus 3:1 : vérifié par tests/accessibility/accessibility-axe.spec.ts, qui lit les jetons de style.css. Un nouveau jeton ou un nouveau fond s'y ajoute.
• Cibles d'au moins 24 × 24 px (WCAG 2.5.8), imposées par style.css aux boutons, onglets et éléments de menu.

Vérifier

• tests/accessibility/accessibility-axe.spec.ts : 0 violation axe-core par composant, et contrastes des deux thèmes. Tout nouveau composant y est audité.
• tests/accessibility/keyboard-navigation.spec.ts : comportements clavier (menus, poignées, onglets, Échap puis Tab).
• Dans le navigateur, axe-core sur la page entière dans les deux thèmes, menus et fenêtres ouverts (jsdom ne calcule ni le rendu ni les contrastes réels).