@accessible/using-keyboard

React utilities for adding accessible focus styles to elements when only someone is using keyboard navigation.

Usage no npm install needed!

<script type="module">
  import accessibleUsingKeyboard from 'https://cdn.skypack.dev/@accessible/using-keyboard';
</script>

README


<UsingKeyboard>

Bundlephobia Types Code coverage Build status NPM Version MIT License

npm i @accessible/using-keyboard

React utilities for adding accessible focus styles to elements when someone is using keyboard navigation.

Quick Start

import {
  UsingKeyboard,
  BodyUsingKeyboard,
  useUsingKeyboard,
} from '@accessibile/using-keyboard'

const App = (props) => (
  <UsingKeyboard className='using-keyboard'>
    <div className='my-app'>
      // This will have the class name 'my-app using-keyboard' // when a
      keyboard drew the last focus in a document. // That is, during keyboard
      navigation
    </div>
  </UsingKeyboard>
)

API

useUsingKeyboard(defaultUsingKeyboard)

A React hook that returns true when the keyboard was used more recently than the mouse for focusing an element.

Arguments

Argument Type Required Default Description
defaultUsingKeyboard boolean false false Sets the default value of usingKeyboard

Returns boolean

<BodyUsingKeyboard>

A React component that adds a using-keyboard class to the <body> when the keyboard was used more recently than the mouse for focusing an element. It removes the class each time a mousedown event fires.

Prop Type Required Default Description
className string false "using-keyboard" This is the class name that gets appended to the body
defaultUsingKeyboard boolean false false Sets the default value of usingKeyboard
children React.ReactElement false undefined By default this renders no children, but it will render any children you provide here.

<UsingKeyboard>

A React component that adds a using-keyboard class to its child element when the keyboard was used more recently than the mouse for focusing an element. It removes the class each time a mousedown event fires.

Prop Type Required Default Description
className string false "using-keyboard" This is the class name that gets appended to the child element
defaultUsingKeyboard boolean false false Sets the default value of usingKeyboard
children React.ReactElement false undefined By default this renders no children, but it will render any children you provide here.

LICENSE

MIT