Skip to main content
Reakit
DocumentationNewsletter
Spectrum
GitHub
GitHub

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

Learn more in Composition.

#Props

#useRoverState

  • 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.

  • stopId string | undefined

    Element ID.

11 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.

  • 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) => void

    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.