About trees

A tree is composed of three core elements, a treeview, a tree and a treeitem. The treeview, .qw-treeview, is the container for the tree, and is the class that our JavaScript targets. The tree, the outermost ul will receive the class .qw-tree. This element wraps the primary level of branches and leaves. Branches have addtional child branches and leaves.

Markup

• role="tree" is placed on the root ul
• role="tree" element has aria-labelledby applied that points to the tree's heading element.
• role="treeitem" is placed on the tree li elements
• aria-level is applied to treeitem elements to indicate their nesting depth
• aria-expanded is applied to treeitem elements that have child nodes. It is set to true or false
• aria-selected="true" is applied to treeitem elements that are selected
• tabindex="0" is applied to the treeitem that is in focus. All others treeitem elements receive tabindex="-1"
• role="group" is applied to child tree node (branch) container uls

Interaction

• Only a single action per tree item
• Only 1 focusable item per tree

Navigation

• Clicking on a tree item selects it.
• Up and down arrow keys move :focus and aria-selected. If a node is expanded, the :focus will move between levels of the tree to the neighbor. Previous selections are cleared.
• Right arrow key will expand a collapsed node
• Left arrow key will move :focus and aria-selected to the parent on an end child node, and will collapse the node if on a parent node and toggle the aria-expanded to false.