Tree

Accessibility

Import Tree, TreeMode, TreeSelectionMode from @prepared911/ui/tree.

Data mode

Roles. The root ul is role="tree", each row's li is a treeitem, and each nested list is a group. The tree takes its name from aria-label or aria-labelledby.
Name and description. A treeitem is named by its label through aria-labelledby, so the rows of a nested group never leak into its name. Secondary text and accessories (counter, badge, status text) are its description.
Position and state. Each treeitem sets aria-level, aria-posinset and aria-setsize. aria-expanded is set only on rows with children. With selection on, every treeitem carries aria-selected="true" or "false", and a multiple-selection tree is aria-multiselectable. A disabled row sets aria-disabled; a loading row sets aria-busy.
Roving focus. Exactly one treeitem is tabbable: the first selected enabled row, otherwise the first enabled row. Disabled rows are skipped when moving and are never the tab stop.
Keys.

Key	Action
Up, Down	Previous or next visible row.
Right (Left in right-to-left)	Expand a collapsed parent; on an expanded parent, move to its first enabled child.
Left (Right in right-to-left)	Collapse an expanded parent; otherwise move to the parent.
Home, End	First or last visible enabled row.
Enter	Activate the row: run `onClick`, follow `href`, select it, or toggle a plain parent.
Space	Select the row, or toggle it in a multiple-selection tree.
`*`	Expand every collapsed sibling of the row.
Letters	Move to the next visible row whose label starts with what you typed.

Chevron. The chevron is not a tab stop. It is reached with Right and Left, and a click on it toggles the row even when the row has no onClick or href.
Row action. A row's action is a real button. In a data tree it joins the tab order only on the row that holds the tab stop, so the tree stays one stop plus the active row's action.
Links. A row with href renders a link that is not a tab stop; Enter on the row follows it. A click on the link returns focus to the row.
Long labels. A label wider than its row fades out at its end and slides into view while a mouse hovers the row and while the row shows keyboard focus (:focus-visible), with the same pause and pace; it glides back when focus leaves. A tooltip with the full text opens when a navigation key moves focus onto the row, and Escape or blur closes it. The label is not a tab stop, so roving focus is unchanged, and there is no native title; a screen reader reads the label once, from the row's text. Reduced motion removes the slide, and the tooltip still shows.
Compact. Each icon-only row is named by its hidden label, and the label shows in a Tooltip on hover and on keyboard focus. The tooltip is visual only, so the name is not read twice.
Focus after a collapse. When an ancestor collapses while a descendant has focus, focus moves to the collapsed ancestor's row, in both modes, before the fading group becomes inert.
Focus after compact mode. When compact unmounts the row that has focus, focus moves to its top-level ancestor. The same applies when new items remove the focused row; focus held outside the tree is left alone.

The tree adds no landmark; provide nav (or another landmark) and name it.
Lists keep the list role. A disclosure is a button with aria-expanded and, while its list is mounted, aria-controls. A link row marks the current page with aria-current="page".
A parent row with a destination has a second button for the disclosure, named by toggleLabel and the row label (for example, "Toggle Reports").
Every control keeps its native tab stop; collapsed lists are not rendered, and a list that is collapsing is inert, so its links are not in the order.

Motion and contrast

Groups open and close on the glide spring and fade; the chevron turns. The selected wash glides between rows. Under prefers-reduced-motion: reduce the height, the turn and the glide change at once, and the fades remain.
The selected wash is a system-color outline in forced colors. Focus rings use CanvasText there.
Secondary text uses the subtle foreground, which clears the label tier of contrast.

Tree / API and Development

On this page

Tree

Accessibility

Import Tree, TreeMode, TreeSelectionMode from @prepared911/ui/tree.

Data mode

Roles. The root ul is role="tree", each row's li is a treeitem, and each nested list is a group. The tree takes its name from aria-label or aria-labelledby.
Name and description. A treeitem is named by its label through aria-labelledby, so the rows of a nested group never leak into its name. Secondary text and accessories (counter, badge, status text) are its description.
Position and state. Each treeitem sets aria-level, aria-posinset and aria-setsize. aria-expanded is set only on rows with children. With selection on, every treeitem carries aria-selected="true" or "false", and a multiple-selection tree is aria-multiselectable. A disabled row sets aria-disabled; a loading row sets aria-busy.
Roving focus. Exactly one treeitem is tabbable: the first selected enabled row, otherwise the first enabled row. Disabled rows are skipped when moving and are never the tab stop.
Keys.

Key	Action
Up, Down	Previous or next visible row.
Right (Left in right-to-left)	Expand a collapsed parent; on an expanded parent, move to its first enabled child.
Left (Right in right-to-left)	Collapse an expanded parent; otherwise move to the parent.
Home, End	First or last visible enabled row.
Enter	Activate the row: run `onClick`, follow `href`, select it, or toggle a plain parent.
Space	Select the row, or toggle it in a multiple-selection tree.
`*`	Expand every collapsed sibling of the row.
Letters	Move to the next visible row whose label starts with what you typed.

Chevron. The chevron is not a tab stop. It is reached with Right and Left, and a click on it toggles the row even when the row has no onClick or href.
Row action. A row's action is a real button. In a data tree it joins the tab order only on the row that holds the tab stop, so the tree stays one stop plus the active row's action.
Links. A row with href renders a link that is not a tab stop; Enter on the row follows it. A click on the link returns focus to the row.
Long labels. A label wider than its row fades out at its end and slides into view while a mouse hovers the row and while the row shows keyboard focus (:focus-visible), with the same pause and pace; it glides back when focus leaves. A tooltip with the full text opens when a navigation key moves focus onto the row, and Escape or blur closes it. The label is not a tab stop, so roving focus is unchanged, and there is no native title; a screen reader reads the label once, from the row's text. Reduced motion removes the slide, and the tooltip still shows.
Compact. Each icon-only row is named by its hidden label, and the label shows in a Tooltip on hover and on keyboard focus. The tooltip is visual only, so the name is not read twice.
Focus after a collapse. When an ancestor collapses while a descendant has focus, focus moves to the collapsed ancestor's row, in both modes, before the fading group becomes inert.
Focus after compact mode. When compact unmounts the row that has focus, focus moves to its top-level ancestor. The same applies when new items remove the focused row; focus held outside the tree is left alone.

The tree adds no landmark; provide nav (or another landmark) and name it.
Lists keep the list role. A disclosure is a button with aria-expanded and, while its list is mounted, aria-controls. A link row marks the current page with aria-current="page".
A parent row with a destination has a second button for the disclosure, named by toggleLabel and the row label (for example, "Toggle Reports").
Every control keeps its native tab stop; collapsed lists are not rendered, and a list that is collapsing is inert, so its links are not in the order.

Motion and contrast

Groups open and close on the glide spring and fade; the chevron turns. The selected wash glides between rows. Under prefers-reduced-motion: reduce the height, the turn and the glide change at once, and the fades remain.
The selected wash is a system-color outline in forced colors. Focus rings use CanvasText there.
Secondary text uses the subtle foreground, which clears the label tier of contrast.

Tree / API and Development

On this page