CursorCOMPOSER UN COMPOSANT
Prérequis
- Projet React ou Next.js App Router avec composants Client et Server identifiés
- Rule accessibilité dans `.cursor/rules/` (ou prête à être créée via `/create-rule`)
- eslint-plugin-jsx-a11y activé dans le dépôt
- Extension axe DevTools ou lecteur d’écran pour valider un parcours clavier
L’agent Cursor accélère le boilerplate React, mais produit encore trop de `<div onClick>` sans gestion clavier ou de champs sans label associé. En encodant vos exigences dans une rule `.mdc` et en imposant une relecture humaine systématique, vous livrez des composants utilisables au clavier et annoncés correctement aux lecteurs d’écran.
Cadrer le composant et la rule agent
Avant d’ouvrir le chat Agent, identifiez le composant cible (Accordion, Modal, Tabs) et les états à couvrir. Listez les composants existants du design system (@folder `src/components/ui`) pour éviter une réimplémentation parallèle.
Créez ou complétez `.cursor/rules/react-a11y.mdc` avec globs `**/*.tsx`. Le corps doit contenir des exemples / : bouton natif, lien avec `href`, formulaire avec `<label htmlFor>`. Référencez W3C WAI Forms plutôt que de recopier la spec.
Composer avec l’agent et itérer
Prompt type : « Composant Accordion accessible dans `@src/components/ui/accordion.tsx` : un seul panneau ouvert, touches Entrée/Espace sur le trigger, `aria-expanded`, `aria-controls`. Réutilise les tokens Tailwind du projet. »
Relisez le diff : chaque trigger interactif doit être un `<button>` ou un lien ; les icônes décoratives portent `aria-hidden="true"` ; le focus visible n’est pas supprimé par `outline-none` sans substitut.
Valider avant merge
Exécutez eslint-plugin-jsx-a11y sur le fichier modifié. Complétez par axe DevTools sur la page intégrée. Pour un composant critique (navigation, formulaire), une passe VoiceOver ou NVDA reste indispensable.
Erreurs fréquentes
Accepter un `<div role="button">` parce que le rendu visuel est correct : le clavier et les lecteurs d’écran perdent des comportements natifs (activation, disabled).
Empiler `aria-label`, label visible et `title` sur le même contrôle : annonces redondantes ou contradictoires.
Oublier `aria-live` ou `role="alert"` sur les messages d’erreur dynamiques après validation.
Copier un snippet shadcn sans vérifier la version : certains composants anciens utilisaient des patterns corrigés depuis.
Ce qu’il faut retenir
Rule `react-a11y.mdc` + exemples / = comportement agent reproductible.
Sémantique HTML native d’abord ; ARIA uniquement si la sémantique ne suffit pas.
Relecture humaine et test clavier systématiques avant merge.
L’agent accélère ; la conformité RGAA globale exige audit parcours et pages complètes.
FAQ
Non. Il réduit le temps d’implémentation des patterns (labels, focus, ARIA ciblé). La conformité globale exige audit page, parcours métier et recette experte avant mise en prod grand public.
Les comportements interactifs (clavier, focus trap, aria-live) exigent un Client Component. Structurez : shell Server pour le markup statique, îlot `'use client'` pour la logique d’état.
Ouvrez un `.tsx` couvert par le glob, lancez une tâche agent explicite et contrôlez Cursor Settings → Rules que `react-a11y.mdc` apparaît. Ajustez le frontmatter si la rule est ignorée.
ChatGPT