Rover

Rover is an abstract component that implements the roving tabindex method to manage focus between items (rovers).

#Installation

npm install reakit

Learn more in Get started.

#Usage

import { useRoverState, Rover } from "reakit/Rover";
import { Group } from "reakit/Group";
import { Button } from "reakit/Button";

function Example() {
  const rover = useRoverState();
  return (
    <Group>
      <Rover {...rover} as={Button}>
        Button 1
      </Rover>
      <Rover {...rover} as={Button} disabled>
        Button 2
      </Rover>
      <Rover {...rover} as={Button} disabled focusable>
        Button 3
      </Rover>
      <Rover {...rover} as={Button}>
        Button 4
      </Rover>
      <Rover {...rover} as={Button}>
        Button 5
      </Rover>
    </Group>
  );
}

#Loop

If you set loop to true on useRoverState, the roving tabindex will loop from the last item to the first item.

import { useRoverState, Rover } from "reakit/Rover";

function Example() {
  const rover = useRoverState({ loop: true });
  return (
    <>
      <Rover {...rover}>Button 1</Rover>
      <Rover {...rover}>Button 2</Rover>
      <Rover {...rover}>Button 3</Rover>
      <Rover {...rover}>Button 4</Rover>
      <Rover {...rover}>Button 5</Rover>
    </>
  );
}

#Accessibility

Rover has tabindex set to 0 if it's the current element. Otherwise tabindex is set to -1.
Pressing ↑ moves focus to the previous Rover if orientation is vertical or not defined.
Pressing ↓ moves focus to the next Rover if orientation is vertical or not defined.
Pressing → moves focus to the next Rover if orientation is horizontal or not defined.
Pressing ← moves focus to the previous Rover if orientation is horizontal or not defined.
Pressing Home or PageUp moves focus to the first Rover.
Pressing End or PageDown moves focus to the last Rover.

Learn more in Accessibility.

#Composition

Rover uses Clickable.

Learn more in Composition.

#Props

#`useRoverState`

baseId string

ID that will serve as a base for all the items IDs.
orientation "horizontal" | "vertical" | undefined

Defines the orientation of the rover list.
currentId string | null

The current focused element ID.
loop boolean

If enabled:
- Jumps to the first item when moving next from the last item.
- Jumps to the last item when moving previous from the first item.

#`Rover`

disabled boolean | undefined

Same as the HTML attribute.
focusable boolean | undefined

When an element is disabled, it may still be focusable. It works similarly to readOnly on form elements. In this case, only aria-disabled will be set.
id string | undefined

Same as the HTML attribute.
stopId string | undefined

Element ID.

12 state props

These props are returned by the state hook. You can spread them into this component ({...state}) or pass them separately. You can also provide these props from your own state logic.

baseId string

ID that will serve as a base for all the items IDs.
orientation "horizontal" | "vertical" | undefined

Defines the orientation of the rover list.
unstable_moves number

Stores the number of moves that have been made by calling move, next, previous, first or last.
currentId string | null

The current focused element ID.
stops Stop[]

A list of element refs and IDs of the roving items.
register (id: string, ref: RefObject<HTMLElement>) => void

Registers the element ID and ref in the roving tab index list.
unregister (id: string) => void

Unregisters the roving item.
move (id: string | null, unstable_silent?: boolean |...

Moves focus to a given element ID.
next () => void

Moves focus to the next element.
previous () => void

Moves focus to the previous element.
first () => void

Moves focus to the first element.
last () => void

Moves focus to the last element.