Rename rules and reorganize documentation. (#37)

* [rename] - Rename aria-role-supports-attribute to role-supports-aria-props

* [rename] - rename avoid-positive-tabindex to tabindex-no-positive

* [rename] - rename img-uses-alt to img-has-alt

* [rename] - rename label-uses-for to label-has-for

* [rename] - rename mouse-events-map-to-key-events to mouse-events-have-key-events

* [rename] - rename no-hash-href to href-no-hash

* [rename] - no-invalid-aria to aria-props

* [rename] - Rename no-unsupported-elements-use-aria to aria-unsupported-elements

* [rename] - Rename onclick-uses-role to onclick-has-role

* [rename] - Rename redundant-alt to img-redundant-alt

* [rename] - Rename use-onblur-not-onchange to no-onchange

* [rename] - Rename valid-aria-role to aria-role

* [rename] - Rename rule valid-aria-proptypes to aria-proptypes

* [rename] - Rename role-requires-aria to role-has-required-aria-props

* [cleanup] - Clean up READMEs and alphabetize rules.

README.md

@@ -70,22 +70,22 @@ Then configure the rules you want to use under the rules section.
 
 ## Supported Rules
 
-- [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.
+- [aria-props](docs/rules/aria-props.md): Enforce all `aria-*` props are valid.
+- [aria-proptypes](docs/rules/aria-proptypes.md): Enforce ARIA state and property values are valid.
+- [aria-role](docs/rules/aria-role.md): Enforce that elements with ARIA roles must use a valid, non-abstract ARIA role.
+- [aria-unsupported-elements](docs/rules/aria-unsupported-elements.md): Enforce that elements that do not support ARIA roles, states, and properties do not have those attributes.
+- [href-no-hash](docs/rules/href-no-hash.md): Enforce an anchor element's `href` prop value is not just `#`.
+- [img-has-alt](docs/rules/img-has-alt.md): Enforce that `<img>` JSX elements use the `alt` prop.
+- [img-redundant-alt](docs/rules/img-redundant-alt.md): Enforce `<img>` alt prop does not contain the word "image", "picture", or "photo".
+- [label-has-for](docs/rules/label-has-for.md): Enforce that `<label>` elements have the `htmlFor` prop.
+- [mouse-events-have-key-events](docs/rules/mouse-events-have-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.
+- [no-onchange](docs/rules/no-onchange.md): Enforce that `onBlur` is used instead of `onChange`.
 - [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.
+- [onclick-has-role](docs/rules/onclick-has-role.md): Enforce that non-interactive, visible elements (such as `<div>`) that have click handlers use the role attribute.
+- [role-has-required-aria-props](docs/rules/role-has-required-aria-props.md): Enforce that elements with ARIA roles must have all required attributes for that role.
+- [role-supports-aria-props](docs/rules/role-supports-aria-props.md): Enforce that elements with explicit or implicit roles defined contain only `aria-*` properties supported by that `role`.
+- [tabindex-no-positive](docs/rules/tabindex-no-positive.md): Enforce `tabIndex` value is not greater than zero.
 
 ## License
 

docs/rules/no-invalid-aria.md → docs/rules/aria-props.md

@@ -1,4 +1,4 @@
-# no-invalid-aria
+# aria-props
 
 Elements cannot use an invalid ARIA attribute. This will fail if it finds an `aria-*` property that is not listed in [WAI-ARIA States and Properties spec](https://www.w3.org/TR/wai-aria/states_and_properties#state_prop_def).
 

docs/rules/valid-aria-proptype.md → docs/rules/aria-proptypes.md

@@ -1,4 +1,4 @@
-# valid-aria-proptype
+# aria-proptypes
 
 ARIA state and property values must be valid.
 

docs/rules/valid-aria-role.md → docs/rules/aria-role.md

@@ -1,4 +1,4 @@
-# valid-aria-role
+# aria-role
 
 Elements with ARIA roles must use a valid, non-abstract ARIA role. A reference to all role defintions can be found at [WAI-ARIA](https://www.w3.org/TR/wai-aria/roles#role_definitions) site.
 

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

@@ -1,4 +1,4 @@
-# no-unsupported-elements-use-aria
+# aria-unsupported-elements
 
 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.
 

docs/rules/no-hash-href.md → docs/rules/href-no-hash.md

@@ -1,4 +1,4 @@
-# no-hash-href
+# href-no-hash
 
 Enforce an anchor element's href prop value is not just #. You should use something more descriptive, or use a button instead.
 
@@ -26,8 +26,8 @@ To tell this plugin to also check your `Link` element, specify this in your `.es
 ```json
 {
     "rules": {
-        "jsx-a11y/no-hash-href": [ 2, "Link" ], // OR
-        "jsx-a11y/no-hash-href": [ 2, [ "Link", "Anchor" ] ]
+        "jsx-a11y/href-no-hash": [ 2, "Link" ], // OR
+        "jsx-a11y/href-no-hash": [ 2, [ "Link", "Anchor" ] ]
     }
 }
 ```

docs/rules/img-uses-alt.md → docs/rules/img-has-alt.md

@@ -1,4 +1,4 @@
-# img-uses-alt
+# img-has-alt
 
 Enforce that an `img` element contains the `alt` prop. The `alt` attribute specifies an alternate text for an image, if the image cannot be displayed.
 
@@ -35,8 +35,8 @@ To tell this plugin to also check your `Image` element, specify this in your `.e
 ```json
 {
     "rules": {
-        "jsx-a11y/img-uses-alt": [ 2, "Image" ], <!-- OR -->
-        "jsx-a11y/img-uses-alt": [ 2, [ "Image", "Avatar" ] ]
+        "jsx-a11y/img-has-alt": [ 2, "Image" ], <!-- OR -->
+        "jsx-a11y/img-has-alt": [ 2, [ "Image", "Avatar" ] ]
     }
 }
 ```

docs/rules/redundant-alt.md → docs/rules/img-redundant-alt.md

@@ -1,4 +1,4 @@
-# redundant-alt
+# img-redundant-alt
 
 Enforce img alt attribute does not contain the word image, picture, or photo. Screenreaders already announce `img` elements as an image. There is no need to use words such as *image*, *photo*, and/or *picture*.
 

docs/rules/label-uses-for.md → docs/rules/label-has-for.md

@@ -1,4 +1,4 @@
-# label-uses-for
+# label-has-for
 
 Enforce label tags have htmlFor attribute. Form controls using a label to identify them must have only one label that is programmatically associated with the control using: label htmlFor=[ID of control].
 
@@ -36,8 +36,8 @@ To tell this plugin to also check your `Label` element, specify this in your `.e
 ```json
 {
     "rules": {
-        "jsx-a11y/label-uses-for": [ 2, "Label" ], // OR
-        "jsx-a11y/label-uses-for": [ 2, [ "Label", "InputDescriptor" ] ]
+        "jsx-a11y/label-has-for": [ 2, "Label" ], // OR
+        "jsx-a11y/label-has-for": [ 2, [ "Label", "InputDescriptor" ] ]
     }
 }
 ```

docs/rules/mouse-events-map-to-key-events.md → docs/rules/mouse-events-have-key-events.md

@@ -1,4 +1,4 @@
-# mouse-events-map-to-key-events
+# mouse-events-have-key-events
 
 Enforce onmouseover/onmouseout are accompanied by onfocus/onblur. Coding for the keyboard is important for users with physical disabilities who cannot use a mouse, AT compatability, and screenreader users.
 

docs/rules/use-onblur-not-onchange.md → docs/rules/no-onchange.md

@@ -1,4 +1,4 @@
-# use-onblur-not-onchange
+# no-onchange
 
 Enforce usage of `onBlur` over/in parallel with `onChange` for accessibility. `onBlur` **should** be used instead of `onChange`, unless absolutely necessary and it causes no negative consequences for keyboard only or screen reader users. `onBlur` is a more declarative action by the user: for instance in a dropdown, using the arrow keys to toggle between options will trigger the `onChange` event in some browsers. Regardless, when a change of context results from an `onBlur` event or an `onChange` event, the user should be notified of the change unless it occurs below the currently focused element.
 

docs/rules/onclick-uses-role.md → docs/rules/onclick-has-role.md

@@ -1,4 +1,4 @@
-# onclick-uses-role
+# onclick-has-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.
 

docs/rules/role-requires-aria.md → docs/rules/role-has-required-aria-props.md

@@ -1,4 +1,4 @@
-# role-requires-aria
+# role-has-required-aria-props
 
 Elements with ARIA roles must have all required attributes for that role.
 

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

@@ -1,4 +1,4 @@
-# aria-role-supports-attribute
+# role-supports-aria-props
 
 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"`.
 

docs/rules/avoid-positive-tabindex.md → docs/rules/tabindex-no-positive.md

@@ -1,4 +1,4 @@
-# avoid-positive-tabindex
+# tabindex-no-positive
 
 Avoid positive tabIndex property values to synchronize the flow of the page with keyboard tab order.
 

src/index.js

@@ -2,22 +2,22 @@
 
 module.exports = {
   rules: {
-    'img-uses-alt': require('./rules/img-uses-alt'),
-    'redundant-alt': require('./rules/redundant-alt'),
-    'onclick-uses-role': require('./rules/onclick-uses-role'),
-    'mouse-events-map-to-key-events': require('./rules/mouse-events-map-to-key-events'),
-    'use-onblur-not-onchange': require('./rules/use-onblur-not-onchange'),
+    'aria-props': require('./rules/aria-props'),
+    'aria-proptypes': require('./rules/aria-proptypes'),
+    'aria-role': require('./rules/aria-role'),
+    'aria-unsupported-elements': require('./rules/aria-unsupported-elements'),
+    'href-no-hash': require('./rules/href-no-hash'),
+    'img-has-alt': require('./rules/img-has-alt'),
+    'img-redundant-alt': require('./rules/img-redundant-alt'),
+    'label-has-for': require('./rules/label-has-for'),
+    'mouse-events-have-key-events': require('./rules/mouse-events-have-key-events'),
     'no-access-key': require('./rules/no-access-key'),
-    'label-uses-for': require('./rules/label-uses-for'),
-    'no-hash-href': require('./rules/no-hash-href'),
-    'valid-aria-role': require('./rules/valid-aria-role'),
-    'valid-aria-proptypes': require('./rules/valid-aria-proptypes'),
-    'no-invalid-aria': require('./rules/no-invalid-aria'),
-    'role-requires-aria': require('./rules/role-requires-aria'),
-    'no-unsupported-elements-use-aria': require('./rules/no-unsupported-elements-use-aria'),
-    'avoid-positive-tabindex': require('./rules/avoid-positive-tabindex'),
+    'no-onchange': require('./rules/no-onchange'),
     'onclick-has-focus': require('./rules/onclick-has-focus'),
-    'aria-role-supports-attribute': require('./rules/aria-role-supports-attribute')
+    'onclick-has-role': require('./rules/onclick-has-role'),
+    'role-has-required-aria-props': require('./rules/role-has-required-aria-props'),
+    'role-supports-aria-props': require('./rules/role-supports-aria-props'),
+    'tabindex-no-positive': require('./rules/tabindex-no-positive')
   },
   configs: {
     recommended: {
@@ -27,20 +27,22 @@ module.exports = {
         }
       },
       rules: {
-        'jsx-a11y/img-uses-alt': 2,
-        'jsx-a11y/redundant-alt': 2,
-        'jsx-a11y/onclick-uses-role': 2,
-        'jsx-a11y/mouse-events-map-to-key-events': 2,
-        'jsx-a11y/use-onblur-not-onchange': 2,
+        'jsx-a11y/aria-props': 2,
+        'jsx-a11y/aria-proptypes': 2,
+        'jsx-a11y/aria-role': 2,
+        'jsx-a11y/aria-unsupported-elements': 2,
+        'jsx-a11y/href-no-hash': 2,
+        'jsx-a11y/img-has-alt': 2,
+        'jsx-a11y/img-redundant-alt': 2,
+        'jsx-a11y/label-has-for': 2,
+        'jsx-a11y/mouse-events-have-key-events': 2,
         'jsx-a11y/no-access-key': 2,
-        'jsx-a11y/label-uses-for': 2,
-        'jsx-a11y/no-hash-href': 2,
-        'jsx-a11y/valid-aria-role': 2,
-        'jsx-a11y/valid-aria-proptypes': 2,
-        'jsx-a11y/no-invalid-aria': 2,
-        'jsx-a11y/role-requires-aria': 2,
-        'jsx-a11y/no-unsupported-elements-use-aria': 2,
-        'jsx-a11y/avoid-positive-tabindex': 2
+        'jsx-a11y/no-onchange': 2,
+        'jsx-a11y/onclick-hs-focus': 2,
+        'jsx-a11y/onclick-has-role': 2,
+        'jsx-a11y/role-has-required-aria-props': 2,
+        'jsx-a11y/role-supports-aria-props': 2,
+        'jsx-a11y/tabindex-no-positive': 2
       }
     }
   }

tests/src/rules/no-invalid-aria.js → tests/src/rules/aria-props.js

@@ -9,7 +9,7 @@
 // Requirements
 // -----------------------------------------------------------------------------
 
-import rule from '../../../src/rules/no-invalid-aria';
+import rule from '../../../src/rules/aria-props';
 import { RuleTester } from 'eslint';
 
 const parserOptions = {
@@ -38,7 +38,7 @@ const basicValidityTests = Object.keys(ariaAttributes).map(prop => ({
   parserOptions
 }));
 
-ruleTester.run('no-invalid-aria', rule, {
+ruleTester.run('aria-props', rule, {
   valid: [
     // Variables should pass, as we are only testing literals.
     { code: '<div />', parserOptions },

tests/src/rules/valid-aria-proptypes.js → tests/src/rules/aria-proptypes.js

@@ -9,7 +9,7 @@
 // Requirements
 // -----------------------------------------------------------------------------
 
-import rule from '../../../src/rules/valid-aria-proptypes';
+import rule from '../../../src/rules/aria-proptypes';
 import { RuleTester } from 'eslint';
 
 const parserOptions = {
@@ -46,7 +46,7 @@ const errorMessage = name => {
   }
 };
 
-ruleTester.run('valid-aria-proptypes', rule, {
+ruleTester.run('aria-proptypes', rule, {
   valid: [
     // DON'T TEST INVALID ARIA-* PROPS
     { code: '<div aria-foo="true" />', parserOptions },

tests/src/rules/valid-aria-role.js → tests/src/rules/aria-role.js

@@ -9,7 +9,7 @@
 // Requirements
 // -----------------------------------------------------------------------------
 
-import rule from '../../../src/rules/valid-aria-role';
+import rule from '../../../src/rules/aria-role';
 import { RuleTester } from 'eslint';
 
 const parserOptions = {
@@ -46,7 +46,7 @@ const invalidTests = createTests(invalidRoles).map(test => {
   return test;
 });
 
-ruleTester.run('valid-aria-role', rule, {
+ruleTester.run('aria-role', rule, {
   valid: [
     // Variables should pass, as we are only testing literals.
     { code: '<div />', parserOptions },

tests/src/rules/no-unsupported-elements-use-aria.js → tests/src/rules/aria-unsupported-elements.js

@@ -9,7 +9,7 @@
 // Requirements
 // -----------------------------------------------------------------------------
 
-import rule from '../../../src/rules/no-unsupported-elements-use-aria';
+import rule from '../../../src/rules/aria-unsupported-elements';
 import { RuleTester } from 'eslint';
 
 const parserOptions = {
@@ -70,7 +70,7 @@ const invalidAriaValidityTests = Object.keys(DOM)
     parserOptions
   }));
 
-ruleTester.run('no-unsupported-elements-use-aria', rule, {
+ruleTester.run('aria-unsupported-elements', rule, {
   valid: roleValidityTests.concat(ariaValidityTests),
   invalid: invalidRoleValidityTests.concat(invalidAriaValidityTests)
 });

tests/src/rules/no-hash-href.js → tests/src/rules/href-no-hash.js

@@ -9,7 +9,7 @@
 // Requirements
 // -----------------------------------------------------------------------------
 
-import rule from '../../../src/rules/no-hash-href';
+import rule from '../../../src/rules/href-no-hash';
 import { RuleTester } from 'eslint';
 
 const parserOptions = {
@@ -33,7 +33,7 @@ const expectedError = {
 const string = [ 'Link' ];
 const array = [ [ 'Anchor', 'Link' ] ];
 
-ruleTester.run('no-hash-href', rule, {
+ruleTester.run('href-no-hash', rule, {
   valid: [
     // DEFAULT ELEMENT 'a' TESTS
     { code: '<a />;', parserOptions },

tests/src/rules/img-uses-alt.js → tests/src/rules/img-has-alt.js

@@ -9,7 +9,7 @@
 // Requirements
 // -----------------------------------------------------------------------------
 
-import rule from '../../../src/rules/img-uses-alt';
+import rule from '../../../src/rules/img-has-alt';
 import { RuleTester } from 'eslint';
 
 const parserOptions = {
@@ -39,7 +39,7 @@ const string = [ 'Avatar' ];
 const array = [ [ 'Thumbnail', 'Image' ] ];
 
 
-ruleTester.run('img-uses-alt', rule, {
+ruleTester.run('img-has-alt', rule, {
   valid: [
     // DEFAULT ELEMENT 'img' TESTS
     { code: '<img alt="foo" />;', parserOptions },

tests/src/rules/redundant-alt.js → tests/src/rules/img-redundant-alt.js

@@ -9,7 +9,7 @@
 // Requirements
 // -----------------------------------------------------------------------------
 
-import rule from '../../../src/rules/redundant-alt';
+import rule from '../../../src/rules/img-redundant-alt';
 import { RuleTester } from 'eslint';
 
 const parserOptions = {
@@ -31,7 +31,7 @@ const expectedError = {
   type: 'JSXOpeningElement'
 };
 
-ruleTester.run('redundant-alt', rule, {
+ruleTester.run('img-redundant-alt', rule, {
   valid: [
     { code: '<img alt="foo" />;', parserOptions },
     { code: '<img alt="picture of me taking a photo of an image" aria-hidden />', parserOptions },

tests/src/rules/label-uses-for.js → tests/src/rules/label-has-for.js

@@ -9,7 +9,7 @@
 // Requirements
 // -----------------------------------------------------------------------------
 
-import rule from '../../../src/rules/label-uses-for';
+import rule from '../../../src/rules/label-has-for';
 import { RuleTester } from 'eslint';
 
 const parserOptions  = {
@@ -34,7 +34,7 @@ const expectedError = {
 const string = [ 'Label' ];
 const array = [ [ 'Label', 'Descriptor' ] ];
 
-ruleTester.run('label-uses-for', rule, {
+ruleTester.run('label-has-for', rule, {
   valid: [
     // DEFAULT ELEMENT 'label' TESTS
     { code: '<label htmlFor="foo" />', parserOptions },

tests/src/rules/mouse-events-map-to-key-events.js → tests/src/rules/mouse-events-have-key-events.js

@@ -10,7 +10,7 @@
 // Requirements
 // -----------------------------------------------------------------------------
 
-import rule from '../../../src/rules/mouse-events-map-to-key-events';
+import rule from '../../../src/rules/mouse-events-have-key-events';
 import { RuleTester } from 'eslint';
 
 const parserOptions = {
@@ -35,7 +35,7 @@ const mouseOutError = {
   type: 'JSXOpeningElement'
 };
 
-ruleTester.run('mouse-events-map-to-key-events', rule, {
+ruleTester.run('mouse-events-have-key-events', rule, {
   valid: [
     { code: '<div onMouseOver={() => void 0} onFocus={() => void 0} />;', parserOptions },
     { code: '<div onMouseOver={() => void 0} onFocus={() => void 0} {...props} />;', parserOptions },