Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

@accessible/using-keyboard

accessible-ui5.7kMIT2.1.1TypeScript support: included

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

react, react component, a11y, aria, accessibility, accessible, accessible focus, a11y focus, aria focus, accessible keyboard navigation, a11y keyboard navigation, aria keyboard navigation, using keyboard

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

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

const App = (props) => ( <UsingKeyboard className='using-keyboard'>

// 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
</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

changelog

Changelog

All notable changes to this project will be documented in this file. See standard-version for commit guidelines.

2.1.1 (2020-07-07)