Accessibilité, clavier et audit axe

QForm Builder Community 0.1.16 ajoute un contrat d’accessibilité cohérent entre le catalogue, le canvas, l’arborescence, les dialogues et les modes de consultation.

Navigation clavier

Dans le catalogue de gauche :

• Tab place le focus sur un élément ;
• Entrée ou Espace ajoute l’élément au formulaire ;
• le champ ajouté reçoit ensuite le focus dans le canvas.

Dans le canvas en mode édition :

• Tab parcourt les overlays des champs ;
• Entrée ou Espace sélectionne le champ ;
• Alt + Flèche haut déplace le champ vers le haut ;
• Alt + Flèche bas déplace le champ vers le bas.

Dans l’arborescence :

• chaque nœud métier est focalisable ;
• Alt + Flèche haut/bas déclenche la même action de déplacement que le menu contextuel ;
• le focus revient sur le nœud déplacé.

Les boutons de copie et de suppression sont de vrais QBtn avec un nom accessible et un QTooltip enfant direct.

Cohérence clic, sélection et déplacement

Le canvas utilise une session d’interaction unique. Un clic simple sélectionne le champ, tandis qu’un déplacement natif conserve cette sélection jusqu’au drop. Le verrou anti-clic post-drag est associé à la source exacte : il neutralise le clic synthétique du navigateur sans bloquer la sélection d’un autre champ.

Les overlays, actions contextuelles et headers de steps sont délégués à leurs handlers dédiés dès la phase de capture. Ils ne traversent pas la logique générique de clic extérieur : un clic synthétique consommé sur la source déplacée ne peut donc pas effacer une autre sélection valide.

Le réordonnancement clavier reste indépendant du drag pointeur et conserve ses annonces live, sa restitution de focus et l’alternative Alt + Flèche haut/bas.

Annonces et restauration du focus

Le builder contient deux régions live invisibles :

• une région polite pour les ajouts, sélections et déplacements ;
• une région assertive pour les opérations destructives ou prioritaires.

Après la fermeture du Theme Builder, de l’historique ou des dialogues import/export, le focus revient sur le bouton qui a ouvert le panneau.

Les composants personnalisés imbriqués dans le builder peuvent utiliser le composable auto-importé :

Le même composable est disponible par import explicite depuis le sous-chemin public :

import { useFormBuilderAccessibility } from '@vevedh/qform-builder-layer/accessibility'

const accessibility = useFormBuilderAccessibility()

accessibility.announce('Configuration appliquée')
await accessibility.focusField('email')

Le composable reste sûr hors d’un FormBuilder : son implémentation de repli ne produit aucune erreur.

Modes lecture seule et désactivé

Le mode readonly bascule le builder vers l’aperçu et interdit les mutations. Le mode disabled désactive les actions et les contrôles concernés. Les deux états font partie de la fixture d’audit navigateur.

Audit automatisé

Le projet utilise @axe-core/playwright avec les tags WCAG A/AA jusqu’à WCAG 2.2 AA.

bun run accessibility:check
bun run e2e:accessibility
bun run release:browser:check

Le scénario vérifie :

• le builder en édition ;
• l’aperçu ;
• le Theme Builder ;
• les dialogues import/export ;
• les modes lecture seule et désactivé ;
• l’ajout et le déplacement au clavier ;
• la restauration du focus.

Une violation axe fait échouer le test et affiche l’identifiant de la règle, son aide, la cible DOM et le résumé de l’échec.

Limite de l’automatisation

Un audit axe ne remplace pas une revue humaine. Avant une release candidate, vérifier aussi :

• la logique de lecture avec NVDA ou un autre lecteur d’écran ;
• la pertinence des libellés métier ;
• la cohérence de l’ordre de tabulation ;
• l’usage sans souris sur les formulaires complexes ;
• le contraste des thèmes personnalisés fournis par l’application hôte ;
• le zoom à 200 % et le reflow.

Contrat pour les extensions

Un élément ou panneau personnalisé doit :

1. utiliser un contrôle natif ou Quasar approprié ;
2. fournir un nom accessible quand le contenu visible ne suffit pas ;
3. conserver un focus visible ;
4. prendre en charge Entrée et Espace lorsqu’un élément non natif agit comme un bouton ;
5. ne pas utiliser un div cliquable sans rôle ni clavier ;
6. restituer le focus après la fermeture d’un panneau modal ;
7. respecter readonly, disabled et prefers-reduced-motion ;
8. ajouter un scénario Playwright lorsqu’un nouveau parcours clavier est introduit.