tree

Cuándo utilizarlo

Para un navegador verdaderamente jerárquico: sistema de archivos, organigrama, taxonomía profundamente anidada. Los elementos hijos son role="treeitem", agrupados según sea necesario mediante envoltorios intermedios con role="group".

Si su «árbol» es en realidad un menú de navegación con dos o tres niveles de enlaces, no utilice role="tree". Recurra a <nav> con <ul> y <a> anidados — Tab + Enter es lo que los usuarios esperan para la navegación; la navegación de árbol con teclas de flecha en un menú de sitio resulta poco familiar y lenta.

Un árbol DEBE tener un nombre accesible. Establezca aria-multiselectable="true" si es posible seleccionar varios treeitems simultáneamente.

Contrato de teclado y foco

Según el patrón de treeview de la APG:

• Tab lleva el foco al árbol, situándolo en el treeitem con foco (o el primero); Tab vuelve a salir.
• Las flechas Arriba/Abajo mueven el foco entre los nodos visibles, omitiendo los hijos contraídos.
• Flecha Derecha: si está contraído, expande; si está expandido, se mueve al primer hijo.
• Flecha Izquierda: si está expandido, contrae; si está contraído, se mueve al elemento padre.
• Inicio / Fin se desplazan al primer / último nodo visible.
• Enter o Espacio selecciona el treeitem actual.
• Escritura predictiva: escribir letras salta a los nodos visibles coincidentes.
• Para árboles con selección múltiple: Mayús+Flecha extiende la selección contigua; Ctrl/Cmd+Clic alterna la selección individual.

Use un tabindex itinerante (roving tabindex): solo el treeitem con el foco activo tendrá tabindex="0".

Errores frecuentes

• Todos los treeitems con tabindex="0". El patrón requiere un único punto de tabulación.
• Árbol sin nombre accesible. La navegación por puntos de referencia en los lectores de pantalla no tiene nada que anunciar.
• Treeitems hijos dentro del padre sin un role="group" envolvente. Los lectores de pantalla no pueden anunciar el grupo como unidad.
• aria-expanded="false" en treeitems hoja — anuncia un estado contraído vacío que no tiene sentido.
• Las flechas Derecha/Izquierda usadas para nodo siguiente/anterior en lugar de expandir/contraer.

Ejemplo

<ul role="tree" aria-label="Archivos del proyecto">
  <li role="treeitem" aria-expanded="true" tabindex="0">
    src
    <ul role="group">
      <li role="treeitem" tabindex="-1">index.ts</li>
      <li role="treeitem" aria-expanded="false" tabindex="-1">
        components
        <ul role="group">
          <li role="treeitem" tabindex="-1">Button.tsx</li>
        </ul>
      </li>
    </ul>
  </li>
  <li role="treeitem" tabindex="-1">README.md</li>
</ul>