TreeView

Alpha

An accessible hierarchical tree view with expand/collapse, single/multi-select, and full keyboard navigation following the ARIA treeview pattern.

Import

import { TreeView } from "@compa11y/react";

Usage

Example.tsx

import { TreeView } from "@compa11y/react";

const fileTree = [
  {
    id: "src",
    label: "src",
    children: [
      {
        id: "components",
        label: "components",
        children: [
          { id: "button", label: "Button.tsx" },
          { id: "dialog", label: "Dialog.tsx" },
          { id: "input", label: "Input.tsx" },
        ],
      },
      { id: "index", label: "index.ts" },
    ],
  },
  { id: "readme", label: "README.md" },
  { id: "package", label: "package.json" },
];

function FileExplorer() {
  return (
    <TreeView
      data={fileTree}
      selectionMode="single"
      onSelectionChange={(ids) => console.log("Selected:", ids)}
    />
  );
}

Features

role='tree' with role='treeitem' on each node
aria-expanded on branch nodes
Single and multiple selection modes
Controlled expanded and selected state
Full keyboard navigation: Arrow keys, Home, End, Enter, Space
Type-ahead character search
Screen reader announcements for expand/collapse and selection

Props

TreeView component props
Prop	Type	Default	Description
`data`*	`TreeNodeData[]`	-	Hierarchical tree data
`selectionMode`	`'none' \| 'single' \| 'multiple'`	`'none'`	Selection behavior
`defaultSelectedIds`	`string[]`	-	Default selected node IDs
`onSelectionChange`	`(ids: string[]) => void`	-	Called when selection changes
`expandedIds`	`string[]`	-	Controlled expanded node IDs
`onExpandedChange`	`(ids: string[]) => void`	-	Called when expanded state changes

Keyboard Interactions

Accessibility

All keyboard interactions follow WAI-ARIA best practices and work without any additional configuration.

Keyboard shortcuts for TreeView
Key	Action
`ArrowDown`	Move to next visible node
`ArrowUp`	Move to previous visible node
`ArrowRight`	Expand collapsed node, or move to first child
`ArrowLeft`	Collapse expanded node, or move to parent
`Home`	Move to first node
`End`	Move to last visible node
`Enter / Space`	Select the focused node
`* (asterisk)`	Expand all siblings at the current level