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.

Import

import '@merisia-inc/merisia-components/error-summary';
import '@merisia-inc/merisia-components/input';
import '@merisia-inc/merisia-components/checkboxes';

Extension

Vous pouvez sous-classer ce composant pour ajouter ou redéfinir des propriétés, méthodes ou styles :

import { customElement } from 'lit/decorators.js';
import { MerisiaErrorSummary } from '@merisia-inc/merisia-components';

@customElement('my-error-summary')
export class MyErrorSummary extends MerisiaErrorSummary {
  // Ajoutez ou redéfinissez des propriétés, méthodes ou styles ici.
}

Démos

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