# ErrorSummary

O resumo de todos os erros de um formulário, no topo, cada um levando ao campo que precisa de correção.

## 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>Corrija 1 campo para salvar</h3><ul><li><a href="#playground">Escreva um nome para o lembrete</a></li></ul></div>
```

## Quando usar

-   Sempre que um formulário voltar com erro, mesmo que seja um só.

## Quando não usar

-   **Para um problema que não é de campo** (não deu para salvar): Notice com erro.

## Exemplos

### Na página

No topo do conteúdo, antes do formulário: é a primeira coisa que se vê e que se ouve.

Mostrar código

```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>
```

## Anatomia

1.  **Caixa:** o fundo do erro e o traço em vinho, em volta.
2.  **Título:** quantos campos e o que fazer.
3.  **Lista:** um link por erro, com a mesma frase do campo.

## Bons e maus padrões

Faça assim

### Corrija 1 campo para salvar

-   [Escolha um fuso horário](#exemplos)

Mesmo com um erro só, o resumo aparece.

Não faça

### Ops! Há erros no formulário.

Sem a lista, a pessoa caça os erros, e o "Ops" pede desculpa sem ajudar.

## Como escrever

-   Título: "Corrija N campos para salvar", com o verbo do botão.
-   Itens: a mesma frase de cada ErrorMessage, na ordem dos campos.

## Onde fica

-   No topo do conteúdo, depois da trilha (Breadcrumbs) e antes do título da página.
-   O título da aba ganha "Erro: " na frente, para quem volta para a aba saber que algo falta.

## Acessibilidade

-   `role="alert"`: o leitor de tela anuncia o resumo assim que a página carrega, e o foco vai direto para ele.
-   Cada link leva ao campo (ao primeiro, num grupo), que recebe o foco.

## Atributos

Atributo

Valores

Para quê

`class="feitio-error-summary"`

obrigatório

O fundo do erro e o traço em vinho.

`role="alert"`

sempre

Anunciado ao aparecer.

`tabindex="-1"`

sempre

Para o foco ir até ele.

`a href`

`"#id-do-campo"`

Cada erro leva ao seu campo.