Focusable

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

Focusable is based on Ariakit Focusable component.

Example

Focusable use :focus-visible to ensure that the focus is only visible when needed.

import { Focusable } from "swash/Focusable";

render(
  <>
    <Focusable>Focusable</Focusable>
    <Focusable disabled>Disabled</Focusable>
    <Focusable disabled focusable>
      Focusable
    </Focusable>
  </>,
);