@accessible/using-keyboard NPM

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.