Keyboard & accessibility

The default UI implements the WAI-ARIA tree view pattern, including the required keyboard model and ARIA attributes.

Keyboard

Key	Action
↓	Focus next visible item
↑	Focus previous visible item
→	On a closed branch: open it · on an open branch: focus first child · leaf: no-op
←	Close an open branch · on a closed item or leaf: focus parent
Enter	Activate the focused item (fires onClickItem)

The → / ← behaviors match the canonical WAI-ARIA tree pattern, so muscle memory from VS Code, Finder, and the GitHub file tree all carry over.

ARIA attributes

• Container: role="tree"
• Every item: role="treeitem" + aria-level (1-based depth)
• Items with children: aria-expanded="true|false"
• Active item: aria-selected="true"
• Sibling info: aria-setsize + aria-posinset
• Roving tabindex: the focused item has tabIndex=0, all others tabIndex=-1

Opt out of keyboard

Pass disableKeyboard to skip the <div tabIndex={0}> wrapper entirely. Use this when embedding a TreeMenu inside another widget that owns keyboard focus.

<TreeMenu data={data} disableKeyboard />

Screen-reader labels

Customize the search input’s accessible name via the labels prop:

<TreeMenu
  data={data}
  labels={{
    searchPlaceholder: 'Chercher…',
    searchAriaLabel: 'Rechercher l\u2019arbre',
  }}
/>