tree

Кога да се използва

За истински йерархичен браузър: файлова система, организационна схема, дълбоко вложена таксономия. Дъщерните елементи са role="treeitem", групирани при необходимост от междинни обвиващи елементи с role="group".

Ако „дървото” всъщност е навигационно меню с две-три нива от връзки, не трябва да се използва role="tree". Вместо това се препоръчва <nav> с вложени <ul> и <a> — потребителите очакват Tab + Enter за навигация; навигация с клавиши-стрелки в стил дърво в меню на сайт е непозната и бавна.

Дървото ТРЯБВА да има достъпно наименование. Задайте aria-multiselectable="true", ако могат да бъдат избрани няколко treeitem-а едновременно.

Договор за клавиатура и фокус

Съгласно APG шаблона за treeview:

• Tab влиза в дървото, върху фокусирания (или първия) treeitem; Tab излиза от него.
• Стрелките нагоре/надолу преместват фокуса между видимите възли, пропускайки свитите дъщерни елементи.
• Дясна стрелка: ако е свит — разгъва; ако е разгънат — преминава към първото дете.
• Лява стрелка: ако е разгънат — свива; ако е свит — преминава към родителя.
• Home / End преместват към първия / последния видим възел.
• Enter или интервал избира текущия treeitem.
• Typeahead: въвеждането на букви прескача към съответстващите видими възли.
• За дървета с множествен избор: Shift+Стрелка разширява непрекъснатата селекция; Ctrl/Cmd+Клик превключва отделните елементи.

Използва се roving tabindex: само текущо фокусираният treeitem има tabindex="0".

Чести грешки

• Всеки treeitem с tabindex="0". Шаблонът изисква единична Tab-спирка.
• Дърво без достъпно наименование. Навигацията по ориентири в екранния четец няма какво да обяви.
• Дъщерни treeitem-и вътре в родителски елемент без обгръщащ role="group". Екранните четци не могат да обявят групата като цялост.
• aria-expanded="false" върху листови treeitem-и — обявява се празно свиваемо състояние.
• Дясна/Лява стрелка, използвани за следващ/предишен съсед вместо за разгъване/свиване.

Пример

<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>