Every Rokkit component includes full keyboard navigation and ARIA support out of the box. No configuration required.
The Navigator Pattern
Rokkit uses a Svelte action called navigator that attaches keyboard handlers
to any container element. Combined with a ListController, it provides:
- Arrow key navigation (up/down, left/right)
- Home/End to jump to first/last item
- Enter/Space to select
- Type-ahead search to jump to matching items
- Proper ARIA roles and attributes
- Focus management and visible focus indicators
Keyboard Shortcuts
| Key | Action | Context |
|---|---|---|
ArrowDown | Move to next item | Lists, Menus, Selects |
ArrowUp | Move to previous item | Lists, Menus, Selects |
ArrowRight | Expand group / next tab | Trees, Tabs |
ArrowLeft | Collapse group / prev tab | Trees, Tabs |
Home | First item | All |
End | Last item | All |
Enter / Space | Select item | All |
Escape | Close dropdown | Select, Menu |
| Type character | Jump to matching item | Lists, Selects |
Tree Navigation
In tree-style components (List with collapsible, Tree), the keyboard follows
the WAI-ARIA TreeView pattern:
ArrowRighton a collapsed group — expands itArrowRighton an expanded group — moves focus to first childArrowLefton a child — moves focus to parent groupArrowLefton an expanded group — collapses itArrowRighton a leaf item — does nothing (no children)
ARIA Support
Components automatically apply correct ARIA roles and attributes:
| Component | Container Role | Item Role |
|---|---|---|
| List | navigation | button / link |
| Tree | tree | treeitem |
| Menu | menu | menuitem |
| Select | listbox | option |
| Tabs | tablist | tab |
Selected items receive aria-selected="true", expanded groups get aria-expanded, and disabled items have aria-disabled="true".
Type-Ahead Search
In List and Select components, typing characters jumps to the first matching item.
The search matches against the display text (the text field) and
resets after a brief pause. This works automatically — no configuration needed.
Focus Management
When a dropdown opens (Select, Menu), focus moves to the first item or the currently selected item. When it closes, focus returns to the trigger element. Tab key moves focus out of the component entirely, following standard web behavior.