https://github.com/accessible-ui/using-keyboard
🅰 React utilities for adding accessible focus styles to elements when only someone is using keyboard navigation
https://github.com/accessible-ui/using-keyboard
a11y accessibility aria focus-management keyboard-navigation react using-keyboard
Last synced: 4 months ago
JSON representation
🅰 React utilities for adding accessible focus styles to elements when only someone is using keyboard navigation
- Host: GitHub
- URL: https://github.com/accessible-ui/using-keyboard
- Owner: accessible-ui
- License: mit
- Created: 2019-10-20T22:50:47.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T02:13:38.000Z (over 2 years ago)
- Last Synced: 2025-01-14T20:22:39.659Z (5 months ago)
- Topics: a11y, accessibility, aria, focus-management, keyboard-navigation, react, using-keyboard
- Language: TypeScript
- Homepage:
- Size: 1.23 MB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
<UsingKeyboard>
npm i @accessible/using-keyboard
React utilities for adding accessible focus styles to elements when someone is using keyboard navigation.
## Quick Start
```jsx harmony
import {
UsingKeyboard,
BodyUsingKeyboard,
useUsingKeyboard,
} from '@accessibile/using-keyboard'
const App = (props) => (
// 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
)
```
## 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 `` 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