Skip to main content
Reakit
DocumentationNewsletter
GitHub
GitHub
Reakit is featured on Product Hunt!

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 as={Button} {...rover}>
        Button 1
      </Rover>
      <Rover as={Button} {...rover} disabled>
        Button 2
      </Rover>
      <Rover as={Button} {...rover} disabled focusable>
        Button 3
      </Rover>
      <Rover as={Button} {...rover}>
        Button 4
      </Rover>
      <Rover as={Button} {...rover}>
        Button 5
      </Rover>
    </Group>
  );
}

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

  • orientation "horizontal" | "vertical" | undefined

    Defines the orientation of the rover list.

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

  • stopId string | undefined

    Element ID.