Notificaciones

Avisos

Las notificaciones se emplean para dar un mensaje de actualización o para destacar alguna información sobre la que queremos llamar la atención.

Anatomía
Variantes
Accesibilidad
Buenas prácticas

Anatomía #

Etiqueta de texto

Descripción de la notificación.

Siempre debe contar con una etiqueta de texto que explique de forma clara la información que se quiera transmitir. El color debe utilizarse para apoyar el mensaje, con el mismo criterio se puede emplear un icono a la izquierda alineado a la parte superior. También existe la posibilidad de incluir una "x" accionable en la esquina superior derecha que permita eliminar la notificación.

Variantes #

Por defecto

Éxito

Alerta

Link 1
Link 2
Link 3

Informativo

Link

Por defecto #

Se emplea de manera estándar, especialmente para informar sobre actualizaciones del sistema (el documento se ha cargado correctamente, …) y es de color azul.

Éxito #

Este tipo es de color verde e incluye un icono de check, se utiliza cuando se quiere informar de que una acción ha sido completada correctamente.

Alerta #

Es de color rojo y aparece un icono de alerta, se emplea cuando se quiere llamar especialmente la atención del usuario, por ejemplo, para errores de la aplicación, información muy importante, información que implica una barrera para realizar una acción, etc.

Informativo #

Se emplea el color azul también y se emplea habitualmente para transmitir algún tipo de información relevante y relacionado con alguna acción: “Debido a la situación por Covid-19, pide cita previa para acudir a nuestras oficinas.”, por ejemplo.

Accesibilidad #

Cómo funciona #

Contenedor que puede tener un encabezado de nivel configurable, un id a nivel de componente y otro para el título, una lista <ul> de items <li>, una etiqueta button con aria-label que permite cerrar la notificación, y unos iconos configurados con role=img y aria-label según la variante.
Este componente se lanza a través de un alert que necesita los atributoos "role": "alert" y "aria-live": "assertive", para que el lector de pantalla interrumpa la acción y salte al título de la alerta.

Basado en el patrón alert de W3C

Qué tener en cuenta
Qué usar	Dónde	Función
`id`	Parámetro Nunjucks dentro del componente	Añade identificadores únicos para el contenedor de la notificación y su título
`role=img` y `aria-label`	En el SVG personalizado	Describe el tipo de modal que se está lanzando.
`role=alert` y `aria-live=assertive`	Dentro del parámetro Nunjucks `attributes` cuando se utiliza un alert para lanzar la notificación.	El lector de pantalla interrumpe la acción y salta al título de la alerta.
`onClick: openDialog(id1, this, id-2)`	En el parámetro Nunjucks `button` del componente alert, dentro de `attributes`.	Ejecuta la función `openDialog`, que permite lanzar la notificación. El primer parámetro de esta función es el `id` del contenido a mostrar, el segundo parámetro es el nodo que debe tomar foco al cerrar el dialog, y el tercer elemento es el `id` del elemento al que se le da el foco al abrir el contenido (suele ser el título de la notificación).

Buenas prácticas #

Se recomienda no abusar de su uso. A la vez no se recomienda mostrar más de 3 notificaciones, en caso de ser necesario podrían agruparse varios mensajes en una única notificación.
Mensajes escuetos y claros.
Si están referenciadas a una acción que quede claro a cual se refieren con el uso de las mismas fórmulas.
Si son de error, que quede claro dónde se ha producido e info de como solucionarlo.