The tree follows the WAI-ARIA tree view pattern: roles, levels and states for screen readers, a single tab stop, and the keyboard to move around. Press Tab to reach the tree. Nothing is selected yet, so the first node is the tab stop. Press Enter to open a node. The panels on the right show what assistive technology sees.
Form
The keys only act on the tree when the focus is on a node, so Home, End, Enter and the arrow keys still work in these fields. Tab moves on to the tree.
Dinosaurs
Opened node
Enter dispatches tree.activate. A real app
would go to the edit page of the node; this page shows the node
here, in a live region so a screen reader reads it.
From code
Changes made while the focus is elsewhere are not announced by a screen reader. This page announces them in a live region.
Options
Focused node
Focus a node to see how it is described.
Keyboard
| Tab | Move the focus into or out of the tree. The tree is one tab stop. |
|---|---|
| ↓ | Select the next visible node. |
| ↑ | Select the previous visible node. |
| → | Open a closed folder, or move to its first child. |
| ← | Close an open folder, or move to the parent. |
| Home | Select the first node. |
| End | Select the last visible node. |
| Enter | Open the node: dispatch tree.activate. |
| Space | Select the first node when nothing is selected. |
Accessibility tree
The treeitems a screen reader can reach, built from the aria
attributes. tab marks the node with
tabindex="0".