Rendre les contrôles des éditeurs accessibles au clavier #93

New issue

Open

opened 2026-07-16 17:25:48 +00:00 by Reliodas · 0 comments

Reliodas commented

2026-07-16 17:25:48 +00:00

Owner

Contexte

L'interface est largement utilisable à la souris, mais plusieurs contrôles n'exposent pas de sémantique ou d'alternative clavier.

Les 32 pastilles de thème sont des éléments div avec onclick, sans rôle, nom accessible ni gestion du clavier. Les boutons dynamiques de suppression utilisent uniquement le caractère ×, les champs label ne sont généralement pas reliés à leur contrôle par for/id, et les illustrations générées n'ont pas d'attribut alt explicite.

Ces limites ne bloquent pas l'impression, mais rendent l'édition difficile avec un clavier ou un lecteur d'écran et compliquent les tests d'interface robustes.

Modifications à faire

Remplacer les pastilles de thème par de vrais boutons ou leur donner une sémantique, un nom accessible et une navigation clavier équivalente.
Indiquer l'état sélectionné du thème avec aria-pressed ou une primitive adaptée.
Donner un libellé accessible aux boutons icônes ou × générés par card-editor.js et les éditeurs.
Relier les libellés de formulaire à leurs champs quand une association explicite est nécessaire.
Définir alt vide pour les illustrations purement décoratives ou un texte pertinent lorsqu'elles portent une information.
Vérifier l'ordre de tabulation, le focus visible, les onglets et la recherche de préréglages.
Ajouter une validation Playwright minimale pilotée uniquement au clavier sur un éditeur représentatif.
Conserver le rendu visuel et les dimensions d'impression.

Critères d'acceptation

Tous les contrôles interactifs sont atteignables et activables au clavier.
Chaque pastille de thème possède un nom accessible et expose son état sélectionné.
Les boutons de suppression sont compréhensibles par un lecteur d'écran sans dépendre du seul symbole ×.
Les champs principaux annoncent leur libellé associé.
Les images décoratives ne génèrent pas de nom de fichier ou d'URL comme texte alternatif.
Un parcours Playwright sélectionne un préréglage, change un thème et modifie une liste sans utiliser la souris.
Les smoke tests et la validation visuelle passent sans modification du rendu imprimé.

## Contexte L'interface est largement utilisable à la souris, mais plusieurs contrôles n'exposent pas de sémantique ou d'alternative clavier. Les 32 pastilles de thème sont des éléments div avec onclick, sans rôle, nom accessible ni gestion du clavier. Les boutons dynamiques de suppression utilisent uniquement le caractère ×, les champs label ne sont généralement pas reliés à leur contrôle par for/id, et les illustrations générées n'ont pas d'attribut alt explicite. Ces limites ne bloquent pas l'impression, mais rendent l'édition difficile avec un clavier ou un lecteur d'écran et compliquent les tests d'interface robustes. ## Modifications à faire - Remplacer les pastilles de thème par de vrais boutons ou leur donner une sémantique, un nom accessible et une navigation clavier équivalente. - Indiquer l'état sélectionné du thème avec aria-pressed ou une primitive adaptée. - Donner un libellé accessible aux boutons icônes ou × générés par card-editor.js et les éditeurs. - Relier les libellés de formulaire à leurs champs quand une association explicite est nécessaire. - Définir alt vide pour les illustrations purement décoratives ou un texte pertinent lorsqu'elles portent une information. - Vérifier l'ordre de tabulation, le focus visible, les onglets et la recherche de préréglages. - Ajouter une validation Playwright minimale pilotée uniquement au clavier sur un éditeur représentatif. - Conserver le rendu visuel et les dimensions d'impression. ## Critères d'acceptation - Tous les contrôles interactifs sont atteignables et activables au clavier. - Chaque pastille de thème possède un nom accessible et expose son état sélectionné. - Les boutons de suppression sont compréhensibles par un lecteur d'écran sans dépendre du seul symbole ×. - Les champs principaux annoncent leur libellé associé. - Les images décoratives ne génèrent pas de nom de fichier ou d'URL comme texte alternatif. - Un parcours Playwright sélectionne un préréglage, change un thème et modifie une liste sans utiliser la souris. - Les smoke tests et la validation visuelle passent sans modification du rendu imprimé.