TreeView

TreeView is a hierarchical list of items that may have a parent-child relationship where children can be toggled into view by expanding or collapsing their parent item.

Page navigation navigation

Behavioral expectations

The TreeView replicates the experience of an operating system's file explorer capabilities. It is designed to allow a user to navigate and take action on groups of items listed in a hierarchical format. This is a different experience than website navigation, which has a different mental model, operational requirements, and usability expectations.

Label

TreeViews need an accessible name to be supplied, ideally via aria-labelledby pointing at an appropriate heading before the tree. If the TreeView has enough surrounding context that it doesn't need a visible label, apply sr-only to the heading to hide it visually, but preserve the underlying programatic association.

Key(s)	Description
`Enter`	Performs the default action (e.g. onclick event) for the focused node which is to activate the link.
`Tab`	Moves focus outside of the TreeView to the next focusable node.
`ArrowDown`	Moves focus to the next node that is focusable without opening or closing a node. If focus is on the last node, does nothing.
`ArrowUp`	Moves focus to the previous node that is focusable without opening or closing a node. If focus is on the first node, does nothing.
`ArrowRight`	When focus is on a closed node, opens the node; focus does not move. When focus is on a open node, moves focus to the first child node. When focus is on an end node, does nothing.
`ArrowLeft`	When focus is on an open node, closes the node. When focus is on a child node that is also either an end node or a closed node, moves focus to its parent node. When focus is on a root node that is also either an end node or a closed node, does nothing.
`Home`	Moves focus to first node without opening or closing a node.
`End`	Moves focus to the last node that can be focused without expanding any nodes that are closed.
`a-z`, `A-Z`, all printable characters	Focus moves to the next node with a name that starts with the typed character. Search wraps to first node if a matching name is not found among the nodes that follow the focused node. Search ignores nodes that are descendants of closed nodes. Focus should not move if no nodes match the search.

Typeahead behavior

Focus moves to the next node with a name that starts with the typed character(s). Wait for 300ms from the last key press to stop searching.

Typeahead behavior is case insensitive, and any printable character can be used, not just alphanumeric characters.

The Space key is ignored because it's being reserved for toggling a TreeView node's checkbox. Nodes with checkboxes are not supported yet, but they may in the future.

Focus behavior

Focus in

If moving focus into the TreeView for the first time, focus on the first node.

If moving focus back into the TreeView after the user already interacted with it, focus the previously focused TreeView node.

Focus out

If activating a node causes new content to appear without a page refresh, focus should be moved to the new content. By default, focus should be moved to the first focusable control within the main content region. We should avoid skipping any content so that the user can easily go back to the TreeView if they activate a node by accident.

If the first focusable element would cause a confusing experience for folks who listen to content using a screen reader, then an alternate element may be defined

Minimum click target area for the chevron

The chevron has a generous click area to make it an easier target to hit, but it's kept compact to preserve horizontal space in deeply nested nodes.

When we detect that the user is on a device with a coarse pointer, the click target is enlarged.