Merge branch 'master' of https://github.com/evcohen/eslint-plugin-jsx-a11y

Author: Ethan Cohen

.eslintignore

@@ -1,4 +1,3 @@
-node_modules/**
-reports/**
-index.js
+node_modules/
+reports/
 lib/

.eslintrc.js

@@ -64,7 +64,6 @@ module.exports = {
       "ignorePattern": "((^import[^;]+;$)|(^\\s*it\\())",
       "ignoreUrls": true
     } ],
-    "new-cap": 2,
     "no-alert": 2,
     "no-confusing-arrow": 2,
     "no-caller": 2,
@@ -144,6 +143,7 @@ module.exports = {
     "prefer-const": 2,
     "prefer-spread": 2,
     "prefer-template": 2,
+    'quotes': [2, 'single', 'avoid-escape'],
     "radix": 2,
     "semi": 2,
     "sort-vars": [ 2, {

README.md

@@ -14,6 +14,10 @@
   <a href='https://coveralls.io/github/evcohen/eslint-plugin-jsx-a11y?branch=master'>
     <img src='https://coveralls.io/repos/github/evcohen/eslint-plugin-jsx-a11y/badge.svg?branch=master' alt='Coverage Status' />
   </a>
+  <a href='https://npmjs.org/package/eslint-plugin-jsx-a11y'>
+    <img src='https://img.shields.io/npm/dt/eslint-plugin-jsx-a11y.svg?maxAge=2592000'
+    alt='Total npm downloads' />
+  </a>
 </p>
 
 # eslint-plugin-jsx-a11y
@@ -29,13 +33,13 @@ Ryan Florence built out this awesome runtime-analysis tool called [react-a11y](h
 
 You'll first need to install [ESLint](http://eslint.org):
 
-```
+```sh
 $ npm i eslint --save-dev
 ```
 
 Next, install `eslint-plugin-jsx-a11y`:
 
-```
+```sh
 $ npm install eslint-plugin-jsx-a11y --save-dev
 ```
 
@@ -47,9 +51,9 @@ Add `jsx-a11y` to the plugins section of your `.eslintrc` configuration file. Yo
 
 ```json
 {
-    "plugins": [
-        "jsx-a11y"
-    ]
+  "plugins": [
+    "jsx-a11y"
+  ]
 }
 ```
 
@@ -58,27 +62,30 @@ Then configure the rules you want to use under the rules section.
 
 ```json
 {
-    "rules": {
-        "jsx-a11y/rule-name": 2
-    }
+  "rules": {
+    "jsx-a11y/rule-name": 2
+  }
 }
 ```
 
 ## Supported Rules
 
-- [img-uses-alt](docs/rules/img-uses-alt.md): Enforce that img jsx elements use the alt attribute.
-- [onclick-uses-role](docs/rules/onclick-uses-role.md): Enforce that non-interactive, visible elements (such as div) that have click handlers use the role attribute.
-- [mouse-events-map-to-key-events](docs/rules/mouse-events-map-to-key-events.md): Enforce that onMouseOver/onMouseOut are accompanied by onFocus/onBlur for strictly keyboard users.
-- [use-onblur-not-onchange](docs/rules/use-onblur-not-onchange.md): Enforce that onBlur is used instead of onChange.
-- [no-access-key](docs/rules/no-access-key.md): Enforce that the accessKey prop is not used on any element to avoid complications with keyboard commands used by a screenreader.
-- [label-uses-for](docs/rules/label-uses-for.md): Enforce that label elements have the htmlFor attribute
-- [redundant-alt](docs/rules/redundant-alt.md): Enforce img alt attribute does not contain the word image, picture, or photo.
-- [no-hash-href](docs/rules/no-hash-href.md): Enforce an anchor element's href prop value is not just #.
+- [aria-role-supports-attribute](docs/rules/aria-role-supports-attribute.md): Enforce that elements with explicit or implicit roles defined contain only `aria-*` properties supported by that `role`.
+- [avoid-positive-tabindex](docs/rules/avoid-positive-tabindex.md): Enforce `tabIndex` value is not greater than zero.
+- [img-uses-alt](docs/rules/img-uses-alt.md): Enforce that `<img>` JSX elements use the `alt` prop.
+- [label-uses-for](docs/rules/label-uses-for.md): Enforce that `<label>` elements have the `htmlFor` prop.
+- [mouse-events-map-to-key-events](docs/rules/mouse-events-map-to-key-events.md): Enforce that `onMouseOver`/`onMouseOut` are accompanied by `onFocus`/`onBlur` for keyboard-only users.
+- [no-access-key](docs/rules/no-access-key.md): Enforce that the `accessKey` prop is not used on any element to avoid complications with keyboard commands used by a screenreader.
+- [no-hash-href](docs/rules/no-hash-href.md): Enforce an anchor element's `href` prop value is not just `#`.
+- [no-invalid-aria](docs/rules/no-invalid-aria.md): Enforce all `aria-*` props are valid.
+- [no-unsupported-elements-use-aria](docs/rules/no-unsupported-elements-use-aria.md): Enforce that elements that do not support ARIA roles, states, and properties do not have those attributes.
+- [onclick-has-focus](docs/rules/onclick-has-focus.md): Enforce that elements with `onClick` handlers must be focusable.
+- [onclick-uses-role](docs/rules/onclick-uses-role.md): Enforce that non-interactive, visible elements (such as `<div>`) that have click handlers use the role attribute.
+- [redundant-alt](docs/rules/redundant-alt.md): Enforce `<img>` alt prop does not contain the word "image", "picture", or "photo".
+- [role-requires-aria](docs/rules/role-requires-aria.md): Enforce that elements with ARIA roles must have all required attributes for that role.
+- [use-onblur-not-onchange](docs/rules/use-onblur-not-onchange.md): Enforce that `onBlur` is used instead of `onChange`.
+- [valid-aria-proptype](docs/rules/valid-aria-proptype.md): Enforce ARIA state and property values are valid.
 - [valid-aria-role](docs/rules/valid-aria-role.md): Enforce that elements with ARIA roles must use a valid, non-abstract ARIA role.
-- [no-invalid-aria](docs/rules/no-invalid-aria.md): Enforce all aria-* properties are valid.
-
-## Contributing
-Feel free to contribute! I am currently using [Google Chrome's Audit Rules](https://github.com/GoogleChrome/accessibility-developer-tools/wiki/Audit-Rules) to map out as rules for this plugin.
 
 ## License
 

TODO.md

@@ -0,0 +1,32 @@
+# aria-role-supports-attribute
+
+Enforce that elements with explicit or implicit roles defined contain only `aria-*` properties supported by that `role`. Many ARIA attributes (states and properties) can only be used on elements with particular roles. Some elements have implicit roles, such as `<a href="#" />`, which will resolve to `role="link"`.
+
+#### References
+1. [AX_ARIA_10](https://github.com/GoogleChrome/accessibility-developer-tools/wiki/Audit-Rules#ax_aria_10)
+2. [Supported States & Properties](https://www.w3.org/TR/wai-aria/roles#supportedState)
+
+## Rule details
+
+This rule takes no arguments.
+
+### Succeed
+```jsx
+<!-- Good: the radiogroup role does support the aria-required property -->
+<ul role="radiogroup" aria-required aria-labelledby="foo">
+    <li tabIndex="-1" role="radio" aria-checked="false">Rainbow Trout</li>
+    <li tabIndex="-1" role="radio" aria-checked="false">Brook Trout</li>
+    <li tabIndex="0" role="radio" aria-checked="true">Lake Trout</li>
+</ul>
+```
+
+### Fail
+
+```jsx
+<!-- Bad: the radio role does not support the aria-required property -->
+<ul role="radiogroup" aria-labelledby="foo">
+    <li aria-required tabIndex="-1" role="radio" aria-checked="false">Rainbow Trout</li>
+    <li aria-required tabIndex="-1" role="radio" aria-checked="false">Brook Trout</li>
+    <li aria-required tabIndex="0" role="radio" aria-checked="true">Lake Trout</li>
+</ul>
+```

docs/rules/aria-role-supports-attribute.md

@@ -0,0 +1,26 @@
+# avoid-positive-tabindex
+
+Avoid positive tabIndex property values to synchronize the flow of the page with keyboard tab order.
+
+#### References
+1. [AX_FOCUS_03](https://github.com/GoogleChrome/accessibility-developer-tools/wiki/Audit-Rules#ax_focus_03)
+
+## Rule details
+
+This rule takes no arguments.
+
+### Succeed
+```jsx
+<span tabIndex="0">foo</span>
+<span tabIndex="-1">bar</span>
+<span tabIndex={0}>baz</span>
+```
+
+### Fail
+```jsx
+<span tabIndex="5">foo</span>
+<span tabIndex="3">bar</span>
+<span tabIndex="1">baz</span>
+<span tabIndex="2">never really sure what goes after baz</span>
+```
+

docs/rules/avoid-positive-tabindex.md

@@ -0,0 +1,23 @@
+# no-unsupported-elements-use-aria
+
+Certain reserved DOM elements do not support ARIA roles, states and properties. This is often because they are not visible, for example `meta`, `html`, `script`, `style`. This rule enforces that these DOM elements do not contain the `role` and/or `aria-*` props.
+
+#### References
+1. [AX_ARIA_12](https://github.com/GoogleChrome/accessibility-developer-tools/wiki/Audit-Rules#ax_aria_12)
+
+## Rule details
+
+This rule takes no arguments.
+
+### Succeed
+```jsx
+<!-- Good: the meta element should not be given any ARIA attributes -->
+<meta charset="UTF-8" />
+```
+
+### Fail
+```jsx
+<!-- Bad: the meta element should not be given any ARIA attributes -->
+<meta charset="UTF-8" aria-hidden="false" />
+```
+

docs/rules/no-unsupported-elements-use-aria.md

@@ -0,0 +1,39 @@
+# onclick-has-focus
+
+Enforce that visible elements with onClick handlers must be focusable. Visible means that it is not hidden from a screen reader. Examples of non-interactive elements are `div`, `section`, and `a` elements without a href prop. Elements which have click handlers but are not focusable can not be used by keyboard-only users.
+
+To make an element focusable, you can either set the tabIndex property, or use an element type which is inherently focusable.
+
+Elements that are inherently focusable are as follows:
+- `<input>`, `<button>`, `<select>` and `<textarea>` elements which are not disabled
+- `<a>` or `<area>` elements with an `href` attribute.
+
+#### References
+1. [AX_FOCUS_02](https://github.com/GoogleChrome/accessibility-developer-tools/wiki/Audit-Rules#ax_focus_02)
+2. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role#Keyboard_and_focus)
+
+## Rule details
+
+This rule takes no arguments.
+
+### Succeed
+```jsx
+<!-- Good: div with onClick attribute is hidden from screen reader -->
+<div aria-hidden onClick={() => void 0} />
+<!-- Good: span with onClick attribute is in the tab order -->
+<span onClick="doSomething();" tabIndex="0">Click me!</span>
+<!-- Good: span with onClick attribute may be focused programmatically -->
+<span onClick="doSomething();" tabIndex="-1">Click me too!</span>
+<!-- Good: anchor element with href is inherently focusable -->
+<a href="javascript:void(0);" onClick="doSomething();">Click ALL the things!</a>
+<!-- Good: buttons are inherently focusable -->
+<button onClick="doSomething();">Click the button :)</a>
+```
+
+### Fail
+```jsx
+<!-- Bad: span with onClick attribute has no tabindex -->
+<span onclick="submitForm();">Submit</span>
+<!-- Bad: anchor element without href is not focusable -->
+<a onclick="showNextPage();">Next page</a>
+```

docs/rules/onclick-has-focus.md

@@ -1,6 +1,9 @@
 # onclick-uses-role
 
-Enforce visible, non-interactive elements with click handlers use role attribute. Visible means that it is not hidden from a screen reader. Examples of non-interactive elements are `div`, `section`, and `a` elements without a href prop.The purpose of the role attribute is to identify to screenreaders the exact function of an element.
+Enforce visible, non-interactive elements with click handlers use role attribute. Visible means that it is not hidden from a screen reader. Examples of non-interactive elements are `div`, `section`, and `a` elements without a href prop. The purpose of the role attribute is to identify to screenreaders the exact function of an element.
+
+#### References
+1. [MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role#Keyboard_and_focus)
 
 ## Rule details
 
@@ -21,5 +24,4 @@ This rule takes no arguments.
 <div onClick={() => void 0} {...props} />
 <div onClick={() => void 0} aria-hidden={false} />
 <a onClick={() => void 0} />
-<input onClick={() => void 0} type="hidden" /> // May not be hidden from screenreader ¯\_(ツ)_/¯
-```
+```

docs/rules/onclick-uses-role.md

@@ -0,0 +1,24 @@
+# role-requires-aria
+
+Elements with ARIA roles must have all required attributes for that role.
+
+#### References
+1. [Spec](https://www.w3.org/TR/wai-aria/roles)
+2. [AX_ARIA_03](https://github.com/GoogleChrome/accessibility-developer-tools/wiki/Audit-Rules#ax_aria_03)
+
+## Rule details
+
+This rule takes no arguments.
+
+### Succeed
+```jsx
+<!-- Good: the checkbox role requires the aria-checked state -->
+<span role="checkbox" aria-checked="false" aria-labelledby="foo" tabindex="0"></span>
+```
+
+### Fail
+
+```jsx
+<!-- Bad: the checkbox role requires the aria-checked state -->
+<span role="checkbox" aria-labelledby="foo" tabindex="0"></span>
+```