@sproutsocial/seeds-react-tree

A WAI-ARIA treeview component for the Seeds design system. Provides a primitive Tree + TreeItem API plus a TreeCombobox wrapper that pairs the tree with a role="combobox" input following the WAI-ARIA combobox pattern.

Status: under development. Exported under the ./base subpath (@sproutsocial/seeds-react-tree/base) and shown in Storybook under "Really Under Development / Tree".

Usage

import { Tree, TreeItem } from "@sproutsocial/seeds-react-tree/base";

<Tree aria-label="Files" defaultExpanded={["src"]}>
  <TreeItem id="src" label="src">
    <TreeItem id="Button.tsx" label="Button.tsx" />
    <TreeItem id="Modal.tsx" label="Modal.tsx" />
  </TreeItem>
  <TreeItem id="package.json" label="package.json" />
</Tree>;

For the combobox variant:

import { TreeCombobox } from "@sproutsocial/seeds-react-tree/base";

<TreeCombobox
  aria-label="Pick a collection"
  items={collections}
  selectionMode="single"
  renderSelectionIndicator={radioIndicator}
/>;

Accessibility

The base Tree follows WAI-ARIA APG Treeview pattern 1b:

• role="tree", role="treeitem", role="group"
• aria-level, aria-expanded, aria-selected / aria-checked, aria-disabled
• Single tab stop with roving tabindex
• Keyboard: ↑/↓ ← → Home End Enter Space * + type-ahead first-letter

TreeCombobox follows the combobox-autocomplete-list example, with a tree as the popup:

• <input role="combobox" aria-expanded aria-controls aria-haspopup="tree" aria-autocomplete="list" aria-activedescendant>
• DOM focus stays on the input; the active treeitem is tracked via aria-activedescendant
• Keyboard on the input: ↑/↓ ← → Home End move the active item, Enter toggles selection (or expansion for branches in selectionMode="none"), Escape clears a non-empty query