Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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

About

Add onKeyUp, role and tabIndex props to react elements with onClick handler.

Resources

Packages

No packages published