Roving Tabindex

Lightweight roving tabindex utility with fully focus management. Designed for accessible menus, tabs, toolbars, and composite widgets.

[!NOTE] Focus traversal works across shadow DOM boundaries using composed-tree-aware focus detection powered by Power Focusable.

Install

npm i @y14e/roving-tabindex

// npm
import { createRovingTabIndex } from '@y14e/roving-tabindex';

// CDNs
import { createRovingTabIndex } from 'https://esm.sh/@y14e/roving-tabindex'
// or
import { createRovingTabIndex } from 'https://cdn.jsdelivr.net/npm/@y14e/roving-tabindex/+esm';
// or
import { createRovingTabIndex } from 'https://unpkg.com/@y14e/roving-tabindex/dist/index.js';

📦 APIs

createRovingTabIndex

Creates a roving tabindex controller and preserves a single tabbable element within the container while enabling keyboard navigation between focusable items.

const cleanup = createRovingTabIndex(container, options);
// => () => void
//
// container: Element
// options (optional): RovingTabIndexOptions

🪄 Options

interface RovingTabIndexOptions {
  direction?: 'horizontal' | 'vertical' | undefined; // default: both (undefined)
  selector?: string | undefined;
  typeahead?: boolean;                               // default: false
  wrap?: boolean;                                    // default: false
}

typeahead

If true, enables character-based focus navigation. Typing a character moves focus to the next matching element.

wrap

If true, wraps around to the first or last element when reaching the end.

Demo

https://y14e.github.io/roving-tabindex/