Roving Tabindex

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

Install

npm i @y14e/roving-tabindex

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

// CDNs
import { createRovingTabIndex } from 'https://esm.sh/@y14e/[email protected]';
// or
import { createRovingTabIndex } from 'https://cdn.jsdelivr.net/npm/@y14e/[email protected]/+esm';
// or
import { createRovingTabIndex } from 'https://esm.unpkg.com/@y14e/[email protected]';

📦 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: Direction;    // default: 'both'
  navigationOnly: boolean; // default: false
  noMemory: boolean;       // default: false
  noStart: boolean;        // default: false
  selector: string;        // default: ''
  typeahead: boolean;      // default: false
  wrap: boolean;           // default: false
}

type Direction = 'both' | 'horizontal' | 'vertical';

navigationOnly

If true, enables keyboard navigation without modifying tabindex. Useful for widgets like accordions where all items should remain tabbable while still supporting arrow key navigation.

noMemory

If true, disables focus memory. Focus always starts from the first item.

noStart

If true, does not assign tabindex="0" to the first item during initialization.

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/