Tree
The tree organizes data into a tree-like structure with collapsible and expandable nodes. It allows users to navigate complex hierarchical information, such as directories and categories. The component typically includes parent and child nodes, where parent nodes can be expanded to reveal their children.
Keyboard interactions
| Command | Description |
|---|---|
| Tab | Moves focus into the tree (to the first selected node, or the first visible node) or to the next focusable element when leaving the tree. Inline action controls inside a node are tabbable. |
| Shift + Tab | Moves focus to the previous focusable element (can move focus out of the tree). |
| Arrow Down | Moves focus to the next visible node. |
| Arrow Up | Moves focus to the previous visible node. |
| Arrow Right | On a collapsed, expandable node: expands it and keeps focus. On an expanded node: moves focus to its first child. |
| Arrow Left | On an expanded node: collapses it and keeps focus. On a leaf node (the nodes which don't have any child nodes are called leaf nodes): moves focus to its parent. |
| Home | Moves focus to the first visible node. |
| End | Moves focus to the last visible node. |
| Enter / Space | Selects or toggles selection of the focused node. |
WAI-ARIA
In the component itself we use multiple aria-attributes to assure the component works well with a range of assistive technologies. For some attributes however it is not possible for the Design System to add a meaningful value, because it relies on the context or way a component is used.
Attributes that we recommend you add in certain scenarios are mentioned below.
Tree
| Attribute | Value | Description |
|---|---|---|
aria-label | string | Accessible name for the sl-tree. |
aria-labelledby | string | References (via id) a visible element that labels the tree (e.g. a heading). |