Aller au contenu

Composant · Feedback

ErrorSummary

Stable

Bloc récapitulatif placé en haut d'un formulaire après un envoi échoué : il liste toutes les erreurs, chaque entrée étant un lien vers le champ fautif. Inspiré du composant « Error summary » du système de design du gouvernement du Canada (GCDS).

Voir le code (Svelte) 
<ErrorSummary
  heading="Il y a un problème"
  errors={[{"href":"#nom","text":"Saisissez votre nom"},{"href":"#courriel","text":"Courriel invalide"},{"href":"#date","text":"La date doit être dans le futur"}]}
/>

Quand l'utiliser

  • Après la soumission d'un formulaire comportant une ou plusieurs erreurs de validation.
  • Pour les formulaires longs : un point d'entrée unique vers chaque champ à corriger.
  • Conjointement aux messages d'erreur en ligne sur chaque champ (Error message).

Quand ne pas l'utiliser

  • Pour une seule erreur ponctuelle : un message en ligne sur le champ suffit.
  • Pour une notification système (succès, info) : utilisez Alert ou Notification.

Exemple

Le récapitulatif prend le focus à l'affichage pour annoncer le problème aux lecteurs d'écran.

Anatomie

  • Conteneur (.st-error-summary) : bordure d'erreur, role=alert, focusable (tabindex=-1).
  • Titre (.st-error-summary__heading) : énonce qu'un problème bloque l'envoi.
  • Liste (.st-error-summary__list) : un lien par erreur vers le champ concerné.

Accessibilité

  • role=alert annonce le récapitulatif dès son apparition.
  • tabindex=-1 permet de déplacer le focus sur le bloc après l'envoi.
  • Chaque lien cible l'ancre du champ (href="#id") pour y amener l'utilisateur.

Lignes directrices

À faire

  • Reprendre le texte exact des erreurs en ligne.
  • Placer le récapitulatif en haut du formulaire.

À éviter

  • Afficher un récapitulatif vide.
  • Omettre les messages d'erreur en ligne sur les champs.

API

PropTypeDéfautDescription
headingstring"There was a problem"Titre du récapitulatif (h2).
errors{ href: string; text: string }[][]Erreurs listées, chaque entrée reliée à un champ.
classstringoptionnelClasse(s) sur le conteneur.
Autres attributsHTMLAttributes<HTMLElement>N/APropagés sur le <section> conteneur.

Tokens utilisés

  • --st-semantic-feedback-error
  • --st-semantic-surface-default
  • --st-semantic-text-primary