Premium
Managing the FocusThe TreeView implements a roving tab index components strategy. On loading the TreeView, only the first node will contain tabindex="0" and the navigation keys will move the focus to other nodes and change the respective tabindex. When the focus is moved away from the TreeView, the tabindex="0" remains on the last focused node.
The TreeView supports the following keyboard shortcuts:
Shortcut BehaviorEnter Selects the focused tree view item when the selection mode is single or multiple. When the selection mode is multiple and there are other selected items, they get deselected. Space Checks the checkbox of the TreeView node. Up Arrow Goes to the previous tree node. The focus is moved to the previous node and its tabindex is set to 0. Down Arrow Goes to the next tree node. The focus is moved to the next node and its tabindex is set to 0. Left Arrow If the node is expanded, collapses it and the focus remains on the item. If the node is collapsed, the focus is moved to its parent. Right Arrow If the node is collapsed, expands it and the focus remains on the item. If the node is expanded, the focus is moved to the first child node. Home Moves the focus to the first node in the tree without opening or closing a node. End Moves the focus to the last node in the tree that is focusable without opening a node. Ctrl (or Cmd on Mac) + Enter Selects the focused item. When the item is already selected, it gets deselected. Printable Characters Typing M or any other printable character focuses the next or the first item in the list. Resources
WAI-ARIA Authoring Practices: Treeview Pattern
WAI-ARIA Authoring Practices: Navigation Treeview
See AlsoonExpandChangeonItemClickonCheckChangeRetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4