Introduction
Start with the rail's accessible name and observe the initially selected first marker.
Vanilla · debug profile
Accessibility and keyboard navigation
This scenario demonstrates Tracker's public accessible naming and keyboard interaction contract. Complete application accessibility still depends on the surrounding content, controls, styles, and testing.
Focus, selection, and activation
- DOM focusTab places focus on the Tracker root.
- Tracker selectionAxis arrows change the selected rendered item while focus stays on the root.
- ActivationEnter or Space activates the selected item, scrolls to its source, and applies the rule's focus behavior.
DOM focus, logical Tracker selection, and activation are separate states. Selection starts at the first rendered item as soon as keyboard accessibility mounts.
Accessible Tracker name
Demo section navigation
Core exposes this configured name as the Tracker root's accessible label. The root enters the native tab order only when both accessibility and keyboard support are enabled.
Keyboard model
- Tab
- Enter or leave the Tracker root through normal page order.
- ↑ ↓
- Move selection on this vertical rail.
- Home End
- Select the first or last marker.
- Enter Space
- Activate the selected marker.
Current state
- DOM focus
- Tracker selection
- Last selection transition
- Last activation
Try the native tab path
Focus the first button, then use only the keyboard. The Tracker root is inserted between these two ordinary application controls in DOM order.
Tracked sections
Clustering is disabled, so each source has one independently selectable marker.
Installation
Press Arrow Down while the rail has focus to move the logical selection here.
Configuration
Selection changes the Tracker-owned marker state without moving DOM focus away from the rail.
Events
The application observes committed selection transitions and marker activation through public events.
Cleanup
Activation moves focus to the selected source because this demo rule explicitly enables focus behavior.