Roving Focus Group

Utility component that implements the roving tabindex method to manage focus between items.

RovingFocusGroup is used throughout Wave in components such as Tabs and Menu.

Learn more about roving tabindex in Keyboard Navigation Inside Composite Components

Import#

import {
  RovingFocusGroup,
  createRovingFocusGroupScope
} from '@volue/wave-react';

// you may also access RovingFocusGroup context via hook:
// import { useRovingFocusContext } from '@volue/wave-react';

Examples#

Horizontal#

Vertical#

When tabbing into below group, item 3 is initially focused because of active prop.

Loop#

Use loop property to enable roving from last item to the first item, and vice versa.

Unfocusable items#

Use focusable property to control if RovingFocusGroup.Item can be focused.

Right-to-left direction#

Use dir property to change direction.

Keyboard support#

← moves focus to the previous item (if orientation is horizontal).
→ moves focus to the next item (if orientation is horizontal).
↑ moves focus to the previous item (if orientation is vertical).
↓ moves focus to the previous item (if orientation is vertical).
home moves focus to the first item.
end moves focus to the last item.
Space or Enter triggers click on the item.

API Reference#

RovingFocusGroup.Root#

Prop	Type	Default
`as`	`enum`	`span`
`css`	`StitchesCss`	No default value
`orientation`	`enum`	No default value
`dir`	`enum`	`ltr`
`loop`	`boolean`	`false`

RovingFocusGroup.Item#

Prop	Type	Default
`as`	`enum`	`span`
`css`	`StitchesCss`	No default value
`focusable`	`boolean`	`true`
`active`	`boolean`	`false`