DESY

Sistema de Diseño del Gobierno de Aragón.

Árbol

Este elemento ofrece la posibilidad de seleccionar una o varias opciones organizadas jerárquicamente.

Índice de apartados de esta página

Anatomía

Anatomía de elementos del árbol
  • Etiqueta: Indica la información a incluir en el campo, siempre tiene que estar. En caso de que se quiera ocultar deberá tener la clase sr-only, para que sea legible por los lectores de pantalla.
  • Pista: Es opcional y es una descripción del dato a introducir.
  • Buscador: Cuando el listado sea muy extenso, se puede incluir una barra de búsqueda que ayude a la parsona a encontrar los items que busca.
  • Error: En caso de que el campo requiera validación o sea obligatorio, puede aparecer un error indicando el problema con el dato introducido.
  • Item: Pueden ser botones de selección múltiple o selección única, con todas las variantes que ellos conllevan. Los items que albergan subitems contienen un botón en forma de más + que los muestra al ser pulsado. Una vez desplegado este botón toma la apariencia de un menos - pudiendo ser accionado de nuevo para ocultar los subitems.

Tamaños

Tamaño base
Tamaño pequeño

Tamaño base

Utilizar por defecto para cualquier tipo de situaciones y layouts. Siempre que sea posible se recomienda usar este tamaño por motivos de accesibilidad.

Tamaño pequeño

Se recomienda su uso cuando el elemento estándar sea demasiado grande para el espacio donde debe de encajar.

Accesibilidad

Cómo funciona

El componente está rodeado con un fieldset. Se trata de una lista ul con role=tree que contiene otras listas anidadas. Cada lista anidada tiene un role=group y cada item tiene un role=treeitem, un input y un label. El aria-expanded de cada item padre indica al lector de pantalla si está contraído o no.

Al tomar el foco, la persona que utiliza el teclado puede navegar por los items de la lista con las flechas de dirección.

Basado en el patrón tree de W3C

Qué tener en cuenta
Qué usar Dónde Función
fieldset Parámetro Nunjucks dentro del componente Utiliza el parámetro legend de su interior como título. Debe ser visible.
aria-labelledby En la lista de subitems Apunta al id del item padre. El lector de pantalla anunciará quién es el padre del item actual.