Desplegable

Es un componente que nos permite desplegar un contenedor de contenido para realizar otras acciones.

Índice de apartados de esta página

• Anatomía
• Accesibilidad
• Diferencias entre componentes

Anatomía #

La composición de este elemento consiste en una etiqueta de texto, un icono flecha y el contenedor. En general, el contenido que se muestra dentro del contenedor es libre. Se puede emplear para múltiples propósitos.

En cuanto a tipos y tamaños, heredan las mismas especificaciones de los botones. Además, un desplegable puede convivir en una barra de acciones con otros botones, por lo que es conveniente mantener una apariencia y semántica coherente con el grupo en el que se encuentra.

Accesibilidad #

Cómo funciona #

• Etiqueta <button> con un aria-haspopup=true y un aria-expanded que cambia a true o false según si el contenedor está desplegado o no.
• Cuando el primer item recibe el foco, la persona puede abrir el contenedor accionado la tecla enter/espacio.

Qué tener en cuenta #

Todos los atributos de accesibilidad se encuentran por defecto en la configuración del componente.

Diferencias entre componentes #

Existen varios componentes que tienen una apariencia y funcionamiento similar, aunque deben usarse uno u otro dependiendo de la finalidad y el contexto.

1. 1 Selector. Se usa específicamente en formularios, tienen una apariencia y tamaño alineado con los inputs.
2. 2 Desplegable. Es un componente que despliega un contenedor genérico en el que puede incluirse cualquier otro componente.
3. 3 Listado en caja. Se usa para hacer un listado de opciones.
4. 4 Menú de navegación. Se usan específicamente para navegar en la aplicación, puede tener varias apariencias según el contexto.
5. 5 Barra de menús. Genera cambios en otro sitio de la página, pero no navega a otro sitio diferente. Se pueden seleccionar múltiples opciones y agruparlas de distintas maneras. Por ejemplo para filtros.