Skip to main content

@lexical/react/useRovingTabIndex

Interfaces​

RovingTabIndexOptions​

Defined in: packages/lexical-react/src/useRovingTabIndex.ts:13

Properties​

itemSelector?​

optional itemSelector?: string

Defined in: packages/lexical-react/src/useRovingTabIndex.ts:26

Selector for the group's roving items. The default matches direct-child non-disabled buttons. Pass a custom selector to include other focusables or to scope to a marker attribute (e.g. [data-roving-item]).

orientation?​

optional orientation?: RovingOrientation

Defined in: packages/lexical-react/src/useRovingTabIndex.ts:20

Which arrow keys move focus.

  • horizontal (default): ArrowLeft / ArrowRight
  • vertical: ArrowUp / ArrowDown
  • both: any arrow key

Type Aliases​

RovingOrientation​

RovingOrientation = "horizontal" | "vertical" | "both"

Defined in: packages/lexical-react/src/useRovingTabIndex.ts:11

Functions​

useRovingTabIndex()​

useRovingTabIndex(containerRef, options?): void

Defined in: packages/lexical-react/src/useRovingTabIndex.ts:40

Implements the WAI-ARIA roving-tabindex pattern on containerRef. One item carries tabindex="0" at a time; the rest are -1. Arrow keys move focus inside the group; Home/End jump to the ends. Tab leaves the group as a unit, matching the toolbar / menubar pattern.

Items are queried lazily on every interaction so additions or removals during the lifetime of the group are picked up without extra wiring.

Parameters​

containerRef​

RefObject<HTMLElement | null>

options?​

RovingTabIndexOptions = {}

Returns​

void