Accessible Keyboard Navigation Demos
Move through a dense data grid with the keyboard. Every cell keeps its place while buttons, inputs, selects, and notes stay reachable.
Primary playground
Command table
Click any cell to begin. The focus rail marks the active cell as you move across rows, row groups, and embedded controls.
Live controls
| Track | Owner | Signal | Plan | State | Actions |
|---|---|---|---|---|---|
|
Foundations
TRK-014
|
On track |
|
|||
|
Search index
TRK-027
|
76.8% | Watching |
|
||
|
Signal quality
TRK-041
|
Q3 / 04 | Queued |
|
||
|
Release notes
TRK-058
|
88.6% | On track |
|
||
|
Input audit
TRK-073
|
Q3 / 05 | Watching |
|
||
|
Widget notes
TRK-089
|
Q3 / 06 | Queued |
|
||
|
Archive sweep
TRK-102
|
41.9% | Watching |
|
||
| Summary | 7 tracks | 69.6% avg | 3 plans | Ready | End of grid |
Start click a cell, then use the keys below
Focus: waiting for input
← →cell to cell
↑ ↓same column
PgUp / PgDnrow jump
Home / Endrow edge
Ctrl + Home / Endgrid edge
Enterenter widget
Escreturn to cell
Selector adapter
ARIA grid, same motion
This compact grid uses divs and custom data selectors. The same keyboard contract travels with the markup.
Queue
Owner
Window
Action
Sync passQ-18 / active
09:40 UTC
Index passQ-23 / queued
11:15 UTC
Review passQ-31 / waiting
14:05 UTC
Archive passQ-44 / queued
16:20 UTC
Custom selectors [data-rowgroup] · [data-row] · [data-cell]
Click a cell to focus
Focus telemetry
Input, visible
A small event trace keeps every move legible while you test the grid.
Current target
No cell selected
Press a key inside either grid.
Recent events
- No events yet.