Skip to content
Add onKeyUp, role and tabIndex props to react elements with onClick handler.
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
.gitignore
.prettierrc
.travis.yml
package.json
readme.md
yarn.lock

readme.md

babel-plugin-react-add-a11y-props https://travis-ci.org/danielhusar/babel-plugin-react-add-a11y-props NpmLicense npm

Add accessibility attributes to react dom elements

This plugin will add onKeyUp, role="button" and tabIndex="0" to all html react elements that have onClick handler. It will not override those attributes if they are already defined, and onKeyUp will not be added to anchors with href, inputs, buttons and selects. onKeyUp will fire onClick event when pressed enter or space.

Install

npm install --save-dev @daniel.husar/babel-plugin-react-add-a11y-props
yarn add @daniel.husar/babel-plugin-react-add-a11y-props --dev

Usage

Add @daniel.husar/babel-plugin-react-add-a11y-props to your plugins array in .babelrc

See the examples for what comes in and out:

In:

<span onClick={cb} />
<div onClick={cb} />
<article onClick={cb} />
<a onClick={() => foo()} />

Out:

<span onClick={cb} onKeyUp={e => (e.keyCode === 13 || e.keyCode === 32) && cb(e)} tabIndex="0" role="button" />
<div onClick={cb} onKeyUp={e => (e.keyCode === 13 || e.keyCode === 32) && cb(e)} tabIndex="0" role="button" />
<article onClick={cb} onKeyUp={e => (e.keyCode === 13 || e.keyCode === 32) && cb(e)} tabIndex="0" role="button" />
<a onClick={() => foo()} onKeyUp={e => (e.keyCode === 13 || e.keyCode === 32) && (() => foo())(e)} tabIndex="0" role="button" />

In:

<input type="submit" onClick={cb} />
<button onClick={cb} />
<select onClick={() => foo()} />

Out:

<input type="submit" onClick={cb} tabIndex="0" />
<button onClick={cb} tabIndex="0" />
<select onClick={() => foo()} tabIndex="0" />

In:

<div tabIndex="-1" onClick={cb} />
<div tabIndex="1" onClick={cb} />
<div role="foo" onClick={cb} />

Out:

<div tabIndex="-1" onClick={cb} />
<div tabIndex="1" onClick={cb} onKeyUp={e => (e.keyCode === 13 || e.keyCode === 32) && cb(e)} role="button" />
<div role="foo" onClick={cb} onKeyUp={e => (e.keyCode === 13 || e.keyCode === 32) && cb(e)} tabIndex="0" />

Disclaimer

The event passed into the onClick callback from keyUp event is not click but keyboard event which is sligtly different so you should account for both.

Right now this plugin will not take into account onClick added via spread objects.

License

MIT © Daniel Husar

You can’t perform that action at this time.