Interaction foundations
Components with the keyboard built in.
A small, practical showcase of inclusive interface patterns. Every control here has a predictable focus path, visible state, and a clear spoken name.
Keyboard firstScreen-reader readyReduced-motion aware
01 / 05
Modal dialog
Tab trapped in dialog · Esc close · focus returns to trigger
03 / 05
Tabs
14 active tasks
Three are due this week.
84% complete
Progress is ahead of plan.
Latest activity
Rae updated the launch checklist 12 minutes ago.
Review activity logTeam members
Six contributors have access to this workspace.
← → switch tabs · one tab stop · Tab enters active panel
04 / 05
Combobox autocomplete
Twenty destinations available. Type to filter results.
↑↓ highlight · Enter choose · Esc revert and close
05 / 05
Disclosure group
The native button handles Enter and Space. Its expanded state stays synchronized with the region, which is hidden from all users only after the closing transition completes.
Yes. This is a disclosure group rather than an exclusive accordion: each section works independently, so readers can compare details without losing their place.
Height changes use a brief transition, while the reduced-motion preference eliminates movement. Content is never hidden from assistive technology while it is visibly open.
Enter Space toggle · independent sections · regions are labeled