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

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:

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

Rokkit does not include a built-in tooltip component, but all interactive elements support standard HTML title attributes for basic browser tooltips. For richer tooltips, use any Svelte-compatible tooltip library alongside Rokkit components — the class prop and snippet system let you attach tooltip triggers to any item or element without modifying component internals.

For icon-only buttons or toolbar items, use aria-label to provide accessible names that screen readers announce. The data-* attribute structure makes it straightforward to attach tooltip behavior via Svelte actions.

Internationalization

Rokkit components are locale-agnostic by design. All text displayed in components comes from your data (via the fields prop) or from snippets you provide — there are no hard-coded user-facing strings inside Rokkit components themselves.

This means i18n integration is straightforward:

• Pass translated strings in your items arrays — no adapter needed since Rokkit reads whatever field you map via fields.text
• Use Svelte snippets to render custom item content with your i18n library (e.g., $t('key') from svelte-i18n or i18next)
• ARIA labels on container elements come from your layout — add aria-label via the class prop or wrapper elements as needed

Type-ahead search matches against the resolved text field value, so it works correctly with any translated strings passed through your data.