Accessibility

All interactive Rokkit components support full keyboard navigation and ARIA out of the box. This is implemented via two primitives — controllers (state machines) and the navigator action (DOM binding) — that you can also use to build your own accessible components.

Overview

Arrow key navigation in all lists, trees, menus, and selects
Home / End to jump to first / last item
Enter / Space to select
Escape to close dropdowns and restore focus
ARIA roles, states, and properties on all interactive elements
Focus management: focus returns to trigger on close

Keyboard Navigation

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:

ArrowRight on a collapsed group — expands it
ArrowRight on an expanded group — moves focus to first child
ArrowLeft on a child — moves focus to parent group
ArrowLeft on an expanded group — collapses it
ArrowRight on 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.

Tooltips

Coming soon.

Internationalization