# ErrorSummary El resumen de todos los errores de un formulario, arriba, cada uno llevando al campo que necesita reparación. ## Playground ```html ``` ## Cuándo usarlo - Cada vez que un formulario regrese con un error, incluso uno solo. ## Cuándo no usarlo - **Para un problema que no sea sobre un campo** (no pudo guardar): un error Notice. ## Ejemplos ### En la página Arriba del contenido, antes del formulario: lo primero que se ve y oye. Mostrar código ```html ``` ## Anatomía 1. **Box:** el fondo de error y la línea roja alrededor. 2. **Title:** cuántos campos y qué hacer. 3. **List:** un enlace por error, con la frase del campo. ## Hacer y no hacer Do ### Fix 1 field to save - [Pick a time zone](#exemplos) Incluso con un solo error, el resumen se muestra. Don’t ### ¡Ups! El formulario tiene errores. Sin la lista, la persona busca los errores, y "Oops" disculpa sin ayudar. ## Escritura - Título: "Fix N fields to save", con el verbo del botón. - Items: la misma frase que cada ErrorMessage, en orden de campo. ## Donde va - En la parte superior del contenido, después de la pista (Breadcrumbs) y antes del encabezado de la página. - El título de la pestaña obtiene "Error: " delante, así que quien vuelva a la pestaña sabe que algo falta. ## Accesibilidad - `role="alert"`: los lectores de pantalla anuncian el resumen tan pronto como carga la página y el foco va directamente a él. - Cada enlace lleva a su campo (el primero, en un grupo), que toma el foco. ## Atributos Atributo Valores Para qué sirve `class="feitio-error-summary"` obligatorio El fondo de error y la línea de vino. `role="alert"` siempre Anunciado cuando aparece. `tabindex="-1"` siempre Así el foco puede ir a él. `a href` `"#id-do-campo"` Cada error lleva a su campo.