React-button-a11y NPM

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

Installation

npm i react-button-a11y

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`