Tabbable

Tabbable is an abstract component that makes elements perceivable for keyboard users.

If you also want to make a tabbable element clickable with Enter and Space, see Clickable.

#Installation

npm install reakit

Learn more in Get started.

#Usage

import { Tabbable } from "reakit/Tabbable";

function Example() {
  return (
    <>
      <Tabbable>Tabbable</Tabbable>
      <Tabbable disabled>Disabled</Tabbable>
      <Tabbable disabled focusable>
        Focusable
      </Tabbable>
    </>
  );
}

#Accessibility

• Tabbable has tabindex set to 0 by default. If it's disabled and not focusable, the tabindex attribute is removed.
• Tabbable has aria-disabled set to true when the disabled prop is passed in.
• click, mouseDown and mouseOver events aren't triggered when the disabled prop is passed in.
• Focus is automatically set on Tabbable when it's clicked, which prevents inconsistencies between browsers.

Learn more in Accessibility.

#Composition

• Tabbable uses Role, and is used by Clickable, Composite, and FormInput.

Learn more in Composition.

#Props

#Tabbable

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