Create accessible tree component
with-heart opened this issue · comments
Instead of using nested details elements to display the syntax tree, we should create a tree component that is compliant with the WAI-ARIA single-select Tree View design pattern.
This will give our users a wide range of control over the tree:
- navigate open nodes using the up/down arrows
- navigate to parent of closed node with left arrow
- open/close nodes using left/right arrows
- navigate to first node with Home
- navigate to last node with End
- activate the node (set it as
window.$node) with Enter - typeahead search (type first letter/first few letters to move to the next node with that text)
- expand/collapse sibling nodes with *
See https://www.w3.org/WAI/ARIA/apg/example-index/treeview/treeview-1/treeview-1a.html for an example.