tree

Kiedy używać

Dla prawdziwej hierarchicznej przeglądarki: systemu plików, schematu organizacyjnego, głęboko zagnieżdżonej taksonomii. Elementy potomne to role="treeitem", zgrupowane w razie potrzeby przez pośrednie wrappery role="group".

Jeśli „drzewo” jest tak naprawdę menu nawigacyjnym z dwu- lub trzylevelowymi łączami, nie używaj role="tree". Zamiast tego użyj <nav> z zagnieżdżonymi <ul> i <a> — użytkownicy spodziewają się Tab + Enter przy nawigacji; nawigacja drzewa strzałkami w menu strony jest nieznana i powolna.

Drzewo MUSI mieć dostępną nazwę. Ustaw aria-multiselectable="true", jeśli można wybrać wiele elementów treeitem jednocześnie.

Kontrakt klawiatury i fokusu

Zgodnie z wzorcem APG dla widoku drzewa:

• Tab przenosi fokus do drzewa na skoncentrowany (lub pierwszy) treeitem; Tab przenosi fokus NA ZEWNĄTRZ.
• Strzałki Góra/Dół przesuwają fokus między widocznymi węzłami, pomijając zwinięte elementy potomne.
• Strzałka Prawo: jeśli zwinięty — rozwiń; jeśli rozwinięty — przejdź do pierwszego dziecka.
• Strzałka Lewo: jeśli rozwinięty — zwiń; jeśli zwinięty — przejdź do elementu nadrzędnego.
• Home / End przechodzą do pierwszego / ostatniego widocznego węzła.
• Enter lub Space wybiera bieżący treeitem.
• Typeahead: wpisywanie liter przeskakuje do pasujących widocznych węzłów.
• Dla drzew z wielokrotnym wyborem: Shift+Strzałka rozszerza spójny wybór; Ctrl/Cmd+Klik przełącza indywidualny wybór.

Stosuj roving tabindex: tylko aktualnie skoncentrowany treeitem ma tabindex="0".

Typowe błędy

• Każdy treeitem z tabindex="0". Wzorzec zakłada jeden punkt tabulacji.
• Drzewo bez dostępnej nazwy. Nawigacja po punktach orientacyjnych czytnika ekranu nie ma co ogłosić.
• Elementy potomne treeitem bez wrappera role="group". Czytniki ekranu nie mogą ogłosić grupy jako całości.
• aria-expanded="false" na liściach treeitem — ogłasza pusty stan zwijania.
• Strzałki Prawo/Lewo używane do przechodzenia między rodzeństwem zamiast do zwijania/rozwijania.

Przykład

<ul role="tree" aria-label="Project files">
  <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>