Desplegable

Componentes

Desplegable

Un menú desplegable muestra una lista de opciones del cual el usuario puede seleccionar una o varias en función de su tipo.

Vista Previa

Figma

Usos

Cuándo usar

Cuando necesitamos mostrar un listado de acciones o enlaces.

Cuándo no usar

Cuando necesitemos un elemento de formulario (mejor usar select).

Cuando queremos seleccionar múltiples opciones

Buenas prácticas

Se pueden desplegar varios elementos.

Evitar textos que ocupen más de una linea.

Utilizar iconos cuando exista un valor añadido en el uso del icono y no solo fines ilustrativos.

Ordenar las opciones en un orden lógico colocando la opción más seleccionada en la parte superior, si la conocemos.

Para las opciones de acción utilizar verbos que describan la acción, por ejemplo “Mover” , Ocultar capas”.

En la mayoría de los casos, los enlaces deben ser sustantivos, por ejemplo “Perfil”.

En los casos de tener acciones deshabilitadas, debemos mostrarlas ya que ayudan al usuario a saber que existen en las condiciones adecuadas.

Comportamiento

Estados

isualización del componente desplegable en estado por defecto

Default

Hover

Visualización del componente desplegable en estado enfocado

Focus

Visualización del componente desplegable en estado presionado

Pressed

Visualización del componente desplegable en estado seleccionado

Select

Visualización del componente desplegable en estado deshabilitado

Disabled

Tipos de selección

Visualización del componente desplegable con una selección

Selección única

Visualización del componente desplegable con una selección + icono

Selección única + icono

Visualización del componente desplegable con múltiples selecciones

Selección múltiple

Tamaños de botón

Por defecto

Compacto

Accesibilidad

Este componente ha sido validado para cumplir con los requisitos de accesibilidad la UNE-EN 301549:2022 en la que se engloban los criterios de la WCAG 2.1 (AA), sin embargo, los cambios del contenido y estilos pueden afectar al cumplimiento de la accesibilidad. Debemos de asegurarnos de revisar y seguir las directrices de esta sección cuando actualice o añada nuevo contenido o estilo a este componente.

El elemento que muestra y oculta el contenido tiene role="button".

Cuando el contenido es visible, el elemento con role="button" tiene aria-expanded establecido a true. Cuando el área de contenido está oculta, tiene el valor false.

El elemento con role="button" tiene un valor especificado para aria-controls que hace referencia al elemento que contiene todo el contenido que se muestra u oculta.

El elemento con role="button" tiene tabindex="0" para hacer posible acceder a él usando la tecla de tabulación o mover el foco mediante programación.

El elemento con role="button" tiene el atributo aria-haspopup="menu" que indica la disponibilidad y el tipo de elemento emergente interactivo que puede ser activado.

El dropdown tiene la propiedad aria-activedescendant para identificar el elemento actualmente activo cuando el foco está en el dropdown.

Cada item del dropdown tiene role=”menuitem”.

Cada item del dropdown tiene tabindex=”0” para poder acceder a él.

Cada item del dropdown tiene la propiedad aria-disabled para saber si está deshabilitado.

Cada item del dropdown tiene la propiedad aria-current para saber si está seleccionado.