Hub: index · watch · videos · note

Treeview demo (roving tabindex + aria-expanded)

A “file tree” can be easy to build visually and surprisingly hard to make keyboard-accessible. This micro-demo compares a click-only tree (BEFORE) with a real role="tree" + role="treeitem" structure (AFTER).

AFTER Keyboard: Tab to enter · ↑/↓ move · → expand · ← collapse · Enter open
Compare

Interactive demo

AFTERRoving tabindex + arrow keys + aria-expanded on parent nodes.
src (folder)
components (folder)
TreeView.jsx (file)
Tabs.jsx (file)
App.jsx (file)
README.md (file)
Focused: src. Expanded. Use ↑/↓ to move.
Try: ↓ to move · → on a folder to expand · ← to collapse · Home/End jump · Enter “open” an item (announcement only).
Share

Companion note: Treeview: roving focus + expand/collapse

Checklist (what the AFTER version adds)

  • Semantics: role="tree", role="treeitem", and role="group" for children.
  • State: aria-expanded on expandable nodes only.
  • Keyboard: ↑/↓ move between visible items; → expands or moves into children; ← collapses or moves to parent.
  • Roving tabindex: only one treeitem is Tab-focusable at a time.
  • Predictable focus: collapse a folder keeps focus on that folder (doesn’t “teleport” focus).
  • Announcements: a polite status line for “opened” items (so screen readers get feedback without spam).

This is a compact demo, not a full file explorer. Real apps may also support typeahead, multi-select, or context menus — but the core is still semantics + roving focus + predictable expand/collapse.