Modal

Se trata de una ventana emergente o pop-up y se emplean cuando queremos centrar toda la atención en cierta información, generalmente, cuando se requiere alguna acción antes de continuar con el proceso.

Anatomía
Variantes
Accesibilidad
Buenas prácticas

Anatomía #

Esta ventana aparece superpuesta sobre la página y el foco queda atrapado en ella. Está formada por los siguientes elementos:

Contenedor: Es la ventana que aparece superpuesta a la página, con borde 1 px y neutral-base. El área exterior deberá estar con una capa de color black al 50% de opacidad, para ocultar el contenido de la página.
Botón de cierre: Se posiciona en la esquina superior derecha y permite cerrar la ventana.
Icono como apoyo visual: Se posiciona encima del encabezado, con unas dimensiones de 64x64 px y en la variante primary-light o alert-light según el tipo de modal.
Cabecera: Se compone de un título que explique de manera clara y concisa el motivo de aparición del modal.
Contenido: Texto descriptivo que puede llevar scroll en caso de ser necesario.
Acciones: Botón o grupo de botones que deberán quedar alineados a la izquierda, centrado cuando sólo es un único botón u distribuidos equitativamente a lo largo del ancho. En los casos en los que se requiera consistencia visual, como por ejemplo con un stepper, deberán ir alineado cada uno a un lado, para reforzar el significado de dirección de los botones (‘Anterior’, ‘Siguiente’).

Variantes #

Modal informativa

Si sales de la pantalla de edición sin guardar, perderás los cambios realizados.

Modal destructiva

Esta acción no se puede deshacer ¿Estás seguro?

Informativa #

En este caso, el botón principal se coloca a la izquierda.

Destruciva #

En caso de que la acción requiera confirmar la eliminación de una determinada información, el botón principal se coloca a la derecha, con color rojo (alerta), al igual que el icono.

Accesibilidad #

Cómo funciona #

La modal se lanza a través de un dialog, que muestra el componente sobre la página con una capa negra semitransparente por debajo. Si haces click en la capa negra de debajo o si pulsas la tecla Esc se cierra el contenido del Dialog. Mira el código para ver cómo usamos la función openDialog. El contenedor que despliega la modal necesita los atributos "role":"dialog", "aria-modal": true y un aria-labelledby que apunta al id del título de la modal.

Los iconos de apoyo configurados en el componente tienen su propio role=presentation y aria-hidden=true para ocultarlo de los lectores de pantalla. El icono de cierre tiene su aria-label también configurado.

Cuando una persona navega con teclado y aparece la modal, el foco salta al título y queda atrapado en el contenedor hasta que realiza una acción.

Basado en el patrón Dialog Modal 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 modal y su título
`aria-label`	En el SVG personalizado	Describe el tipo de modal que se está lanzando.
`role=dialog`, `aria-labelledby` y `aria-modal=true`	Dentro del parámetro Nunjucks `attributes` cuando se utiliza un dialog para lanzar la modal.	Necesarios para que el componente sea legible por lectores de pantalla.
`onClick: openDialog(id-1, this, id-2)`	En el parámetro Nunjucks `button` del componente dialog, dentro de `attributes`.	Ejecuta la función `openDialog`, que permite lanzar la modal. 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.

Buenas prácticas #

Se recomienda emplear solamente para transmitir información relevante, incluyendo únicamente un mensaje por modal.
Se recomienda mantener los campos de entradas y las llamadas a acciones al mínimo.
En caso de emplear un icono en la cabecera, debe acompañar el mensaje y aporte información relevante, no se incluye de manera decorativa. Además, se deben emplear iconos de la librería Streamline bold como apoyo visual, a un tamaño de entre 64px y 120px. Deberás incluirlo como SVG.