Keyboard interactions
Key
Interaction
Tab
Moves focus to the tree view, placing the first tree view item in focus.
Shift + Tab
Moves focus out of the tree view to the previous focusable element.
Down Arrow
Moves focus to the tree view item below or to the next thumbnail of a tree view item.
Up Arrow
Moves focus to the tree view item above or to the previous thumbnail of a tree view item.
Enter or Space
Selects the currently focused tree view item. If focus is on a child of the tree view item, subsequent action is based on the child component’s keyboard interactions. For the drag icon, this places the user in drag-and-drop mode.
Right Arrow (Left Arrow in RTL)
Expands the currently focused tree view item. If the tree view item is already expanded, or if the tree view item is not expandable, focus is moved in a left-to-right direction along child components. If focus is on the rightmost child of the tree view item, focus does not move.
Left Arrow (Right Arrow in RTL)
Collapses the currently focused tree view item. If focus is on a child of the tree view item, focus is moved in a right-to-left direction along child components. If focus is on the leftmost child of the tree view item, focus is placed back on the parent tree view item.
Home
Moves focus to the first item in the tree view without opening or closing a level.
End
Moves focus to the last item in the tree view that is focusable without opening a level.
Cmd + [ (optional)
Moves the currently selected item up in the view order.
Cmd + ] (optional)
Moves the currently selected item down in the view order.
Cmd + Z (optional)
Undoes the action most recently taken, such as after the user drags and drops, reorders, or performs an action on a tree view item.
Cmd + G (optional)
Groups the selected tree view item(s) into a new parent tree view item.
Shift + Cmd + G (optional)
Ungroups or removes the selected parent tree view item, placing its children at the same level of hierarchy as the removed items.
Printable characters
Typeahead: moves focus to next node matching typed text.
* (optional)
Expands all sibling nodes at the same level.
Cursor guidelines
Cursor
Description
Default (Arrow)
Use the default arrow cursor for non-interactive headers and disabled text.
Pointer
Use the pointer cursor for all interactive pieces of the tree view component.
Grab hand
Use the grab hand on the drag handle when tree view objects can be moved.
Grab fist
Use the grab fist cursor when actively dragging tree items.
WCAG 2.2 compliance
Any criterion not mention in the below table are not applicable to this component or are resolved with underlying requirements, engineering, and styles of the entire system.
1 . Perceivable
Requirement
Criterion
Level
Compliance
Non-text content
A
Non-text elements, such as icons used in tree view items, must provide a text alternative that communicates the item's purpose. All tree items, especially icon-only items, need an accessible name (for example, via a title, aria-label, or associated text) so screen readers can announce their function.
Info and relationships, Identify purpose
A, AAA
Tree views should be understandable by assistive technologies like screen readers. This means using the proper semantic HTML or ARIA role should be utilized, including parent/child relationships, expanded/collapsed states, and selection states.
Visual presentation
AAA
The width of text blocks is no more than 80 characters (40 for CJK languages), and text is never justified.
Non-text contrast
AA
The visual presentation of icons and component states have a contrast ratio of at least 3:1.
2 . Operable
Requirement
Criterion
Level
Compliance
Keyboard
A, AAA
All functionality of the component is operable through a keyboard without specific timing for keystrokes.
Seizures and physical reactions
A, AAA, AAA
There is no flashing content or unnecessary motion or animation in this component.
Focus order
A
Navigation sequences receive focus in an order that preserves meaning and operability.