Value to describe the component can either be provided with aria-labelledby or aria-label props. The treeselect element has a combobox role in addition to aria-haspopup and aria-expanded attributes. The relation between the combobox and the popup is created with aria-controls that refers to the id of the popup.
The popup list has an id that refers to the aria-controls attribute of the combobox element and uses tree as the role. Each list item has a treeitem role along with aria-label, aria-selected and aria-expanded attributes. In checkbox selection, aria-checked is used instead of aria-selected. Checkbox and toggle icons are hidden from screen readers as their parent element with treeitem role and attributes are used instead for readers and keyboard support. The container element of a treenode has the group role. The aria-setsize, aria-posinset and aria-level attributes are calculated implicitly and added to each treeitem.
| Key | Function |
|---|---|
| tab | Moves focus to the treeselect element. |
| space | Opens the popup and moves visual focus to the selected treenode, if there is none then first treenode receives the focus. |
| down arrow | Opens the popup and moves visual focus to the selected option, if there is none then first option receives the focus. |
| Key | Function |
|---|---|
| tab | Moves focus to the next focusable element in the page tab sequence. |
| shift + tab | Moves focus to the previous focusable element in the page tab sequence. |
| enter | Selects the focused option, closes the popup if selection mode is single. |
| space | Selects the focused option, closes the popup if selection mode is single. |
| escape | Closes the popup, moves focus to the treeselect element. |
| down arrow | Moves focus to the next treenode. |
| up arrow | Moves focus to the previous treenode. |
| right arrow | If node is closed, opens the node otherwise moves focus to the first child node. |
| left arrow | If node is open, closes the node otherwise moves focus to the parent node. |