babel-plugin-jsx-aria

Babel plugin for JSX which transforms camel cased ARIA attributes to kebap cased attributes.

Why

Instead of mixing camel and kebap cased props, like here (snippet from React docs about Accessibility):

<input
  type="text" 
  aria-label={labelText}
  aria-required="true"
  onChange={onchangeHandler}
  value={inputValue}
  name="name"
/>

You can write them all camel cased without getting warnings (Unknown props `ariaLabel`, `ariaRequired` on <input> tag.):

<input
  type="text" 
  ariaLabel={labelText}
  ariaRequired="true"
  onChange={onchangeHandler}
  value={inputValue}
  name="name"
/>

ariaLabel and ariaRequired will be transformed to aria-label and aria-required

Installation

npm

npm install --save-dev babel-plugin-jsx-aria

Yarn

yarn add --dev babel-plugin-jsx-aria

Usage

.babelrc

{
  "plugins": ["jsx-aria"]
}