Make non-button elements accessible in React. This component applies the following to an element that wants to be a "button":
role="button"
tabIndex="0"
onKeyDown
listener for enter and spacebar (like normal<button>
s) that will trigger anonClick
callback- enforced labelling via either
aria-label
orchildren
npm i react-button-a11y
or
yarn add react-button-a11y
import ButtonA11y from 'react-button-a11y'
// ...
<ButtonA11y
aria-label="Click this to do X"
className="some-className"
onClick={evt => { console.log('press happened: ', evt) }}
/>
If you don't provide an aria-label
, you need to provide children
so that
there is something to describe what clicking / tapping this button does.
import ButtonA11y from 'react-button-a11y'
// ...
<ButtonA11y
className="some-className"
onClick={evt => { console.log('press happened: ', evt) }}
>
Click this to do X
</ButtonA11y>
Prop | Type | Required | Default | Details |
---|---|---|---|---|
aria-label |
String | yes if children absent |
none | Pass an aria-label if you don't pass children with descriptive text |
children |
Node | yes if aria-label absent |
none | Pass children with descriptive text if you don't pass an aria-label |
element |
String | no | 'span' |
The default element is a div , but you can pass a span , e.g., if you like |
onClick |
Function | yes | Function.prototype |
When the button is "pressed" (via Enter or Spacebar or click), this callback will be triggered with the event |
strictMode |
Bool | no | true |
An error will be thrown if enabled and you fail to pass both an aria-label and children |
Thanks goes to these wonderful people (emoji key):
Robert Pearce 💻 📖 💡 🤔 |
---|
This project follows the all-contributors specification. Contributions of any kind welcome!