Black Lives Matter.  Support the Equal Justice Initiative.
Skip to main content
Reakit
DocumentationNewsletter
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

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