Skip to content
This repository has been archived by the owner on Sep 20, 2023. It is now read-only.

rpearce/react-button-a11y

react-button-a11y

All Contributors npm version npm downloads Build Status Coverage Status Maintainability

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

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!