Skip to content
+

Accessibility

Learn how the Tree View implements accessibility features and guidelines, including keyboard navigation that follows international standards.

Guidelines

Common conformance guidelines for accessibility include:

  • Globally accepted standard: WCAG
  • US:
  • Europe: EAA (European Accessibility Act)

WCAG 2.1 has three levels of conformance: A, AA, and AAA. Level AA exceeds the basic criteria for accessibility and is a common target for most organizations, so this is what we aim to support.

The WAI-ARIA Authoring Practices provide valuable information on how to optimize the accessibility of a Tree View.

Keyboard interactions

Keys Description
Enter Activates the focused item.
  • If item has children, it is expanded or collapsed
  • If the item does not have children, it is selected
Arrow Up Moves focus to the previous focusable item, without expanding or collapsing it
Arrow Down Moves focus to the next focusable item, without expanding or collapsing it
Arrow Right + RTL off
Arrow Left + RTL on
  • If focus is on a collapsed item, expands the item without moving focus
  • If focus is on an expanded item, moves focus to the first child
  • If focus is on an end item, nothing happens
Arrow Left + RTL off
Arrow Right RTL on
  • If focus is on an expanded item, collapses the item
  • If focus is on a collapsed item that has a parent, moves focus to its parent
  • If focus is on a root item, nothing happens
Home Focuses the first item in the tree
End Focuses the last item in the tree
* Expands all siblings that are at the same level as the focused item without moving focus

When typing a set of characters, focus moves to the next item with a label that starts with the typed characters.

Selection

The Tree View components support both single and multi-selection. To learn more about the selection API, visit the dedicated page for SimpleTreeView or RichTreeView.

To read more about the distinction between selection and focus, refer to the WAI-ARIA Authoring Practices guide.

On single-select trees

When a single-select tree receives focus:

  • If none of the items are selected when the tree receives focus, then the focus is set on the first item.
  • If an item is selected before the tree receives focus, then the focus is set on the selected item.
Keys Description
Space Toggles the selection state of the focused item.
Enter Selects the focused item if the item does not have children.

On multi-select trees

When a multi-select tree receives focus:

  • If none of the items are selected when the tree receives focus, then the focus is set on the first item.
  • If one or more items are selected before the tree receives focus, then the focus is set on:
    • the first selected item if it is the first render
    • the item that was last selected otherwise
Keys Description
Space Toggles the selection state of the focused item.
Shift+Arrow Up Moves focus and toggles the selection state of the previous item.
Shift+Arrow Down Moves focus and toggles the selection state of the next item.
Ctrl+Shift+Home Selects the focused item and all items up to the first item.
Ctrl+Shift+End Selects the focused item and all the items down to the last item.
Ctrl+A Selects all items.