tree

Quando utilizzarlo

Per un vero browser gerarchico: file system, organigramma, tassonomia profondamente annidata. I figli sono role="treeitem", raggruppati se necessario da wrapper intermedi con role="group".

Se la struttura ad albero è in realtà un menu di navigazione con link a due o tre livelli, non utilizzare role="tree". Utilizzare invece <nav> con <ul> e <a> annidati — Tab + Invio è il comportamento che gli utenti si aspettano per la navigazione; la navigazione ad albero con i tasti freccia in un menu del sito è insolita e lenta.

Un tree DEVE avere un nome accessibile. Impostare aria-multiselectable="true" se è possibile selezionare più treeitem contemporaneamente.

Contratto di tastiera e focus

Come definito nel pattern APG per le treeview:

• Tab sposta il focus nell’albero, sul treeitem focalizzato (o sul primo); Tab lo sposta FUORI.
• I tasti freccia Su/Giù spostano il focus tra i nodi visibili, saltando i figli collassati.
• Freccia Destra: se collassato, espande; se espanso, sposta il focus al primo figlio.
• Freccia Sinistra: se espanso, collassa; se collassato, sposta il focus al genitore.
• Home / End si spostano al primo / all’ultimo nodo visibile.
• Invio o Spazio selezionano il treeitem corrente.
• Typeahead: la digitazione di lettere porta il focus ai nodi visibili corrispondenti.
• Per alberi con selezione multipla: Shift+Freccia estende la selezione contigua; Ctrl/Cmd+Clic attiva o disattiva la selezione individuale.

Utilizzare un roving tabindex: solo il treeitem attualmente focalizzato ha tabindex="0".

Errori comuni

• Ogni treeitem con tabindex="0". Il pattern prevede un unico tab-stop.
• Tree privo di nome accessibile. La navigazione per landmark degli screen reader non ha nulla da annunciare.
• Treeitem figli all’interno di un genitore senza un wrapper role="group". Gli screen reader non riescono ad annunciare il gruppo come unità.
• aria-expanded="false" su treeitem foglia — annuncia uno stato comprimibile vuoto.
• I tasti freccia Destra/Sinistra utilizzati per il fratello successivo/precedente anziché per espandere/collassare.

Esempio

<ul role="tree" aria-label="File del progetto">
  <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>