# ErrorSummary

Le résumé de toutes les erreurs d'un formulaire, en haut, chacune menant vers le champ à corriger.

## Playground

```html
<div class="feitio-error-summary" role="alert" tabindex="-1"><h3><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-close"></use></svg>Corrigez 1 champ pour enregistrer</h3><ul><li><a href="#playground">Écrivez un nom pour le rappel</a></li></ul></div>
```

## Quand l'utiliser

-   À chaque fois qu'un formulaire renvoie une erreur, même une seule.

## Quand ne pas l'utiliser

-   **Pour un problème qui ne concerne pas un champ** (impossibilité de sauvegarder) : une erreur Notice.

## Exemples

### Sur la page

En haut du contenu, avant le formulaire : la première chose vue et entendue.

Afficher le code

```html
<div class="feitio-error-summary" role="alert" tabindex="-1">
  <h2>…Corrija 2 campos para salvar</h2>
  <ul>
    <li><a href="#nome">Escreva um nome para o agendamento</a></li>
    <li><a href="#hora">Use um horário entre 00:00 e 23:59</a></li>
  </ul>
</div>
```

## Anatomie

1.  **Boîte :** l'arrière-plan d'erreur et la ligne rouge qui l'entoure.
2.  **Titre :** le nombre de champs et ce qu'il faut faire.
3.  **Liste :** un lien par erreur, avec la phrase du champ.

## Faire et ne pas faire

Do

### Fix 1 field to save

-   [Choisir une zone horaire](#exemplos)

Même avec une seule erreur, le résumé s'affiche.

Don’t

### Oups ! Le formulaire a des erreurs.

Sans la liste, la personne cherche les erreurs, et "Oups" excuse sans aider.

## Écriture

-   Titre : "Corriger N champs pour sauvegarder", avec le verbe du bouton.
-   Éléments : la même phrase que chaque ErrorMessage, dans l'ordre des champs.

## Où cela va

-   En haut du contenu, après les traces (Breadcrumbs) et avant le titre de page.
-   Le titre de l'onglet obtient "Erreur : " devant, donc quiconque revient à l'onglet sait que quelque chose manque.

## Accessibilité

-   `role="alert"` : les lecteurs d'écran annoncent le résumé dès le chargement de la page, et le focus passe directement dessus.
-   Chaque lien mène à son champ (le premier, dans un groupe), qui prend le focus.

## Attributs

Attribut

Valeurs

Pour quoi

`class="feitio-error-summary"`

obligatoire

L'arrière-plan d'erreur et la ligne rouge.

`role="alert"`

toujours

Annoncé lorsqu'il apparaît.

`tabindex="-1"`

toujours

Ainsi, le focus peut y aller.

`a href`

`"#id-do-campo"`

Chaque erreur mène à son champ.