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

Author: beefancohen

README.md

@@ -74,8 +74,11 @@ Then configure the rules you want to use under the rules section.
 - [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 #.
+- [no-invalid-aria](docs/rules/no-invalid-aria.md): Enforce all aria-* properties 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.
 - [valid-aria-proptype](docs/rules/valid-aria-proptype.md): Enforce ARIA state and property values are valid.
+- [role-requires-aria](docs/rules/role-requires-aria.md): Enforce that elements with ARIA roles must have all required attributes for that role.
+- [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.
 
 ## 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.

TODO.md

@@ -1,2 +1 @@
 # TODO
-1. Allow `alt=""` if `role="presentation"` on img-uses-alt rule.

docs/rules/no-invalid-aria.md

@@ -0,0 +1,22 @@
+# no-invalid-aria
+
+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).
+
+## Rule details
+
+This rule takes no arguments.
+
+### Succeed
+```jsx
+<!-- Good: Labeled using correctly spelled aria-labelledby -->
+<div id="address_label">Enter your address</div>
+<input aria-labelledby="address_label">
+```
+
+### Fail
+
+```jsx
+<!-- Bad: Labeled using incorrectly spelled aria-labeledby -->
+<div id="address_label">Enter your address</div>
+<input aria-labeledby="address_label">
+```

docs/rules/no-unsupported-elements-use-aria.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/role-requires-aria.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>
+```

src/index.js

@@ -11,7 +11,10 @@ module.exports = {
     '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')
+    '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')
   },
   configs: {
     recommended: {
@@ -30,7 +33,10 @@ module.exports = {
         "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/valid-aria-proptypes": 2,
+        "jsx-a11y/no-invalid-aria": 2,
+        "jsx-a11y/role-requires-aria": 2,
+        "jsx-a11y/no-unsupported-elements-use-aria": 2
       }
     }
   }

src/rules/no-invalid-aria.js

@@ -0,0 +1,38 @@
+/**
+ * @fileoverview Enforce all aria-* properties are valid.
+ * @author Ethan Cohen
+ */
+'use strict';
+
+// ----------------------------------------------------------------------------
+// Rule Definition
+// ----------------------------------------------------------------------------
+
+import ariaAttributes from '../util/attributes/ARIA';
+
+const errorMessage = name => `${name}: This attribute is an invalid ARIA attribute.`;
+
+module.exports = context => ({
+  JSXAttribute: attribute => {
+    const name = attribute.name.name;
+    const normalizedName = name.toUpperCase();
+
+    // `aria` needs to be prefix of property.
+    if (normalizedName.indexOf('ARIA-') !== 0) {
+      return;
+    }
+
+    const isValid = Object.keys(ariaAttributes).indexOf(normalizedName) > -1;
+
+    if (isValid === false) {
+      context.report({
+        node: attribute,
+        message: errorMessage(name)
+      });
+    }
+  }
+});
+
+module.exports.schema = [
+  { type: 'object' }
+];

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

@@ -0,0 +1,44 @@
+/**
+ * @fileoverview Enforce that elements that do not support ARIA roles, states and properties do not have those attributes.
+ * @author Ethan Cohen
+ */
+'use strict';
+
+// ----------------------------------------------------------------------------
+// Rule Definition
+// ----------------------------------------------------------------------------
+
+import DOM from '../util/attributes/DOM';
+import ARIA from '../util/attributes/ARIA';
+import hasAttribute from '../util/hasAttribute';
+import getNodeType from '../util/getNodeType';
+
+const errorMessage = 'This element does not support ARIA roles, states and properties.';
+
+module.exports = context => ({
+  JSXOpeningElement: node => {
+    const nodeType = getNodeType(node);
+    const nodeAttrs = DOM[nodeType.toUpperCase()];
+    const isReservedNodeType = nodeAttrs && nodeAttrs.reserved || false;
+
+    // If it's not reserved, then it can have ARIA-* roles, states, and properties
+    if (isReservedNodeType === false) {
+      return;
+    }
+
+    // Check if it has role attribute;
+    const hasRole = hasAttribute(node.attributes, 'role');
+    const hasAria = Object.keys(ARIA).some(prop => hasAttribute(node.attributes, prop.toLowerCase()));
+
+    if (hasRole || hasAria) {
+      context.report({
+        node,
+        message: errorMessage
+      });
+    }
+  }
+});
+
+module.exports.schema = [
+  { type: 'object' }
+];

src/rules/role-requires-aria.js

@@ -0,0 +1,57 @@
+/**
+ * @fileoverview Enforce that elements with ARIA roles must have all required attributes for that role.
+ * @author Ethan Cohen
+ */
+'use strict';
+
+// ----------------------------------------------------------------------------
+// Rule Definition
+// ----------------------------------------------------------------------------
+
+import validRoleTypes from '../util/attributes/role';
+import { getLiteralAttributeValue } from '../util/getAttributeValue';
+import hasAttribute from '../util/hasAttribute';
+
+const errorMessage = (role, requiredProps) =>
+  `Elements with the ARIA role "${role}" must have the following ` +
+  `attributes defined: ${requiredProps.toString().toLowerCase()}`;
+
+module.exports = context => ({
+  JSXAttribute: attribute => {
+    const normalizedName = attribute.name.name.toUpperCase();
+    if (normalizedName !== 'ROLE') {
+      return;
+    }
+
+    const value = getLiteralAttributeValue(attribute);
+
+    // If value is undefined, then the role attribute will be dropped in the DOM.
+    // If value is null, then getLiteralAttributeValue is telling us that the value isn't in the form of a literal.
+    if (value === undefined || value === null) {
+      return;
+    }
+
+    const normalizedValues = `${value}`.toUpperCase().split(" ");
+    const validRoles = normalizedValues.filter(value => Object.keys(validRoleTypes).indexOf(value) > -1);
+
+    validRoles.forEach(role => {
+      const { requiredProps } = validRoleTypes[role];
+
+      if (requiredProps.length > 0) {
+        const hasRequiredProps = requiredProps.every(prop => hasAttribute(attribute.parent.attributes, prop));
+
+        if (hasRequiredProps === false) {
+          context.report({
+            node: attribute,
+            message: errorMessage(role.toLowerCase(), requiredProps)
+          });
+        }
+      }
+    });
+
+  }
+});
+
+module.exports.schema = [
+  { type: 'object' }
+];

src/rules/valid-aria-proptypes.js

@@ -8,12 +8,27 @@
 // Rule Definition
 // ----------------------------------------------------------------------------
 
-import ariaAttributes from '../util/ariaAttributes';
+import ariaAttributes from '../util/attributes/ARIA';
 import { getLiteralAttributeValue } from '../util/getAttributeValue';
 
-const errorMessage = (name, type) => `${name} must be of type ${type}.`;
+const errorMessage = (name, type, permittedValues) => {
+  switch (type) {
+    case 'tristate':
+      return `The value for ${name} must be a boolean or the string "mixed".`;
+    case 'token':
+      return `The value for ${name} must be a single token from the following: ${permittedValues}.`;
+    case 'tokenlist':
+      return `The value for ${name} must be a list of one or more tokens from the following: ${permittedValues}.`;
+    case 'boolean':
+    case 'string':
+    case 'integer':
+    case 'number':
+    default:
+      return `The value for ${name} must be a ${type}.`;
+  }
+};
 
-const validityCheck = (value, expectedType, tokens) => {
+const validityCheck = (value, expectedType, permittedValues) => {
   switch (expectedType) {
     case 'boolean':
       return typeof value === 'boolean';
@@ -26,9 +41,9 @@ const validityCheck = (value, expectedType, tokens) => {
       // Booleans resolve to 0/1 values so hard check that it's not first.
       return typeof value !== 'boolean' && isNaN(Number(value)) === false;
     case 'token':
-      return typeof value === 'string' && tokens.some(token => value.toLowerCase() == token);
+      return typeof value === 'string' && permittedValues.indexOf(value.toLowerCase()) > -1;
     case 'tokenlist':
-      return typeof value === 'string' && value.split(' ').every(token => tokens.indexOf(token.toLowerCase()) > -1);
+      return typeof value === 'string' && value.split(' ').every(token => permittedValues.indexOf(token.toLowerCase()) > -1);
     default:
       return false;
   }
@@ -39,8 +54,8 @@ module.exports = context => ({
     const name = attribute.name.name;
     const normalizedName = name.toUpperCase();
 
-    // Not an aria-* state or property.
-    if (normalizedName.indexOf('ARIA-') === -1) {
+    // Not a valid aria-* state or property.
+    if (normalizedName.indexOf('ARIA-') !== 0 || ariaAttributes[normalizedName] === undefined) {
       return;
     }
 
@@ -53,19 +68,19 @@ module.exports = context => ({
 
     // These are the attributes of the property/state to check against.
     const attributes = ariaAttributes[normalizedName];
-    const permittedType = attributes.value;
+    const permittedType = attributes.type;
     const allowUndefined = attributes.allowUndefined || false;
-    const tokens = attributes.tokens || [];
+    const permittedValues = attributes.values || [];
 
-    const isValid = validityCheck(value, permittedType, tokens) || (allowUndefined && value === undefined);
+    const isValid = validityCheck(value, permittedType, permittedValues) || (allowUndefined && value === undefined);
 
     if (isValid) {
       return;
     }
 
     context.report({
       node: attribute,
-      message: errorMessage(name, permittedType)
+      message: errorMessage(name, permittedType, permittedValues)
     });
   }
 });