Package Exports

react-button-a11y

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-button-a11y) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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`

Contributors

Thanks goes to these wonderful people (emoji key):

_{Robert Pearce} 💻 📖 💡 🤔 ⚠️

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

react-button-a11y