react-button-a11y

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 an onClick callback
• enforced labelling via either aria-label or children

Links

• Installation
• Usage
• API
• All Contributors
• Authors
• Changelog
• Contributing
• Code of Conduct

Installation

npm i react-button-a11y

or

yarn add react-button-a11y

Usage

With aria-label

import ButtonA11y from 'react-button-a11y'

// ...

<ButtonA11y
  aria-label="Click this to do X"
  className="some-className"
  onClick={evt => { console.log('press happened: ', evt) }}
/>

Without aria-label

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>

API

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

Contributors

Thanks goes to these wonderful people (emoji key):

Robert Pearce 💻 📖 💡 🤔 ⚠️

This project follows the all-contributors specification. Contributions of any kind welcome!