useArrowKeyNav

Arrow-key navigation with a roving tabindex for toolbars, lists and grids.

Moves focus between items with the arrow keys, Home and End while the group stays one Tab stop. The active item has tabIndex 0 and the rest -1. Keys typed in text fields and keys with Command, Control or Alt are left alone.

Usage

import { useArrowKeyNav } from '@gaudi/design-system/hooks';
const { getItemProps, containerProps } = useArrowKeyNav(tools.length, { orientation: 'horizontal', role: 'toolbar', wrap: true });
<div {...containerProps} aria-label='Formatting'>  {tools.map((tool, index) => <Button key={tool} {...getItemProps(index)}>{tool}</Button>)}</div>

Examples

Toolbar

Vertical section list

API

Accessibility

Implements the WAI-ARIA roving tabindex pattern: one Tab stop for the group, arrows inside it. Name the container (aria-label or aria-labelledby) and give it the role the widget really is, such as toolbar.

Notes

• Gaudi Tabs, ToggleGroup, RadioGroup and menus already handle their own arrow keys.
• getNextIndex(current, key, options) is exported for custom key handling.

Related