@accessible/using-keyboard
v2.1.1
Published
React utilities for adding accessible focus styles to elements when only someone is using keyboard navigation.
Downloads
7,161
Maintainers
jaredlundeReadme
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