Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
167 lines (115 sloc) 3.95 KB
path redirect_from
/docs/rover/
/components/step/
/components/step/stepcontainer/
/components/step/stephide/
/components/step/stepnext/
/components/step/stepprevious/
/components/step/stepshow/
/components/step/steptoggle/

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.

You can’t perform that action at this time.