merisia-error-summary
<merisia-error-summary>
Résumé des erreurs de formulaire accessible. Reçoit le focus programmatique
(el.focus()) pour satisfaire WCAG 2.4.3. Les erreurs avec
field génèrent des liens vers les champs concernés.
Démos
Avec plusieurs erreurs (liens vers des composants merisia-inc)
const summary = document.getElementById('form-errors');
// Collecte automatique depuis le formulaire :
summary.collectFrom(document.querySelector('form'));
summary.focus();
// Ou manuellement :
summary.errors = [
{ message: 'Le prénom est requis.', field: 'demo-first-name' },
{ message: "L'adresse courriel est invalide.", field: 'demo-email' },
{ message: 'Vous devez accepter les conditions.' },
];Propriétés
| Propriété | Attribut | Type | Défaut | Description |
|---|---|---|---|---|
| MerisiaErrorSummary (propres) | ||||
| title | title | string | 'Des erreurs ont été détectées dans le formulaire.' | Titre du résumé d'erreurs (i18n) |
| errors | – | ErrorSummaryItem[] | [] |
Liste d'erreurs : { message, field? } — field génère un
lien ancre (propriété JS uniquement)
|
| autoFocus | auto-focus | boolean | false | Déplace le focus sur le résumé à chaque mise à jour avec des erreurs |
| MerisiaElement (hérités) | ||||
| id | id | string | auto-généré | Identifiant unique du composant |
| lang | lang | string | 'fr' | Langue pour les messages internes (i18n) |
| width | width | number | – |
Largeur maximale en caractères : max-width: calc(N ch + 1.5rem)
|
Ressources externes
- Résumé des erreurs — GOV.UK Design System (en anglais)
- Résumé des erreurs — Système de design du Canada
Import
import '@merisia-inc/merisia-components/error-summary';
import '@merisia-inc/merisia-components/input';
import '@merisia-inc/merisia-components/checkboxes';