import { Meta, Primary } from '@storybook/blocks'; import * as Stories from '../SySelect.stories.ts'; import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg'; import { AccessibilityGuideLayout, CriteriaSection, CriteriaCard, DemoSection, BestPracticesSection, ResourcesSection, } from '@/stories/accessibility/AccessibilityGuideLayout.mdx';

Rapport d’audit manuel : Voir le rapport

Correctifs associés (issue #787), (issue #931)

Afin de respecter les directives du RGAA, le composant SySelect implémente rigoureusement le pattern WAI-ARIA combobox associé à une listbox.

En mode sélection multiple, des cases à cocher sont affichées à côté de chaque option pour faciliter la compréhension visuelle. Cependant, les règles d'accessibilité interdisent l'imbrication d'éléments interactifs (comme placer un véritable <input type="checkbox"> à l'intérieur d'un élément <div role="option">).

Pour résoudre ce problème, SySelect utilise la propriété decorative du composant SyCheckbox. La case à cocher devient alors purement visuelle et est ignorée par les lecteurs d'écran (aria-hidden="true"). C'est le conteneur de l'option (role="option") qui se charge de communiquer l'état de sélection de manière standardisée via l'attribut aria-selected="true|false". Cela garantit une navigation au clavier fluide et une restitution vocale sans erreur.

  • Nom accessible du champ : le composant calcule un nom accessible robuste en priorisant aria-label, puis le label, puis le texte d’aide.
  • Gestion du libellé : le champ conserve un libellé visible via la prop label, avec gestion optionnelle de l’astérisque pour les champs requis.
  • Rôle du composant : l’input exposé par le composant reçoit le rôle combobox avec les états et propriétés associés (aria-expanded, aria-controls, aria-activedescendant, aria-autocomplete).
  • Popup nommée : la liste déroulante est exposée avec le rôle grid et associée à un libellé caché via aria-labelledby.
  • Descriptions associées : le composant construit dynamiquement aria-describedby pour relier le champ au texte d’aide, aux messages et à la zone de statut selon le contexte.
  • Ouverture et navigation : la navigation clavier est gérée sur le champ avec Entrée, Espace, Flèche bas, Flèche haut, Home, End, Page Up, Page Down, Tab et Échap.
  • Focus DOM conservé sur le champ : le focus reste sur l’input et l’option active est exposée via aria-activedescendant.
  • Focus visible : un style de focus spécifique est prévu pour les éléments interactifs et pour les lignes actives de la liste.
  • Pas de suppression arbitraire du focus : à la fermeture, le composant peut restaurer le focus sur l’input afin de conserver un parcours clavier cohérent.
  • Bouton de réinitialisation : le bouton de suppression de la sélection est un vrai button, actionnable à la souris, à Entrée et à Espace, avec un libellé accessible.
  • Champ requis : le composant expose aria-required lorsque cela est nécessaire.
  • Champ invalide : le composant expose aria-invalid="true" lorsque la validation échoue ou lorsque des messages d’erreur sont présents.
  • Messages associés : les messages d’erreur et le texte d’aide sont liés au champ par des identifiants dédiés.
  • Annonce dynamique : une zone de statut en aria-live="polite" et aria-atomic="true" est prévue pour annoncer les erreurs.
  • Indications visibles : le texte d’aide peut être affiché dans la zone de message ou sous le champ selon l’état du composant.
  • Sélection simple : la sélection d’une option met à jour la valeur puis referme la liste.
  • Sélection multiple : le composant permet de conserver la liste ouverte pendant la sélection de plusieurs options.
  • Restitution des sélections : les valeurs sélectionnées sont affichées soit sous forme de texte, soit sous forme de chips.
  • Suppression d’une sélection : chaque chip peut être retirée via son contrôle de fermeture avec un libellé dédié.
  • Cas particulier de l’option par défaut : une option placeholder de type « choisir / sélectionner » est traitée spécifiquement pour éviter une sélection non pertinente.