[new] - Implement aria-role-supports-attribute (#36)

* [new] - Implement aria-role-supports-attribute

* [refactor] - Refactor out implicit roles from JSON to functions to maintain consistency.

Update error message to delineate between implicit roles and explicit
roles.

Also maintain case consistency in messaging.

* [new] - Update documentation for aria-role-supports-attribute

Author: beefancohen

README.md

@@ -70,6 +70,7 @@ 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.

docs/rules/aria-role-supports-attribute.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>
+```

src/index.js

@@ -16,7 +16,8 @@ module.exports = {
     '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'),
-    'onclick-has-focus': require('./rules/onclick-has-focus')
+    'onclick-has-focus': require('./rules/onclick-has-focus'),
+    'aria-role-supports-attribute': require('./rules/aria-role-supports-attribute')
   },
   configs: {
     recommended: {

src/rules/aria-role-supports-attribute.js

@@ -0,0 +1,61 @@
+/**
+ * @fileoverview Enforce that elements with explicit or implicit roles defined contain only
+ * `aria-*` properties supported by that `role`.
+ * @author Ethan Cohen
+ */
+'use strict';
+
+// ----------------------------------------------------------------------------
+// Rule Definition
+// ----------------------------------------------------------------------------
+
+import hasAttribute from '../util/hasAttribute';
+import { getLiteralAttributeValue } from '../util/getAttributeValue';
+import getNodeType from '../util/getNodeType';
+import ROLES from '../util/attributes/role';
+import ARIA from '../util/attributes/ARIA';
+import getImplicitRole from '../util/getImplicitRole';
+
+const errorMessage = (attr, role, tag, isImplicit) => {
+  if (isImplicit) {
+    return `The attribute ${attr} is not supported by the role ${role}. This role is implicit on the element ${tag}.`;
+  }
+
+  return `The attribute ${attr} is not supported by the role ${role}.`;
+};
+
+module.exports = context => ({
+  JSXOpeningElement: node => {
+    // If role is not explicitly defined, then try and get its implicit role.
+    const type = getNodeType(node);
+    const hasRole = hasAttribute(node.attributes, 'role');
+    const role = hasRole ? getLiteralAttributeValue(hasRole) : getImplicitRole(type, node.attributes);
+    const isImplicit = role && !hasRole;
+
+    // If there is no explicit or implicit role, then assume that the element
+    // can handle the global set of aria-* properties.
+    // This actually isn't true - should fix in future release.
+    if (!role || ROLES[role.toUpperCase()] === undefined) {
+      return;
+    }
+
+    // Make sure it has no aria-* properties defined outside of its property set.
+    const propertySet = ROLES[role.toUpperCase()].props;
+    const invalidAriaPropsForRole = Object.keys(ARIA).filter(attribute => propertySet.indexOf(attribute) === -1);
+    const invalidAttr = hasAttribute(node.attributes, ...invalidAriaPropsForRole);
+
+    if (invalidAttr === false) {
+      return;
+    }
+
+    context.report({
+      node,
+      message: errorMessage(invalidAttr.name.name, role, type, isImplicit)
+    });
+
+  }
+});
+
+module.exports.schema = [
+  { type: 'object' }
+];

src/rules/valid-aria-role.js

@@ -8,7 +8,7 @@
 // Rule Definition
 // ----------------------------------------------------------------------------
 
-import validRoleTypes from '../util/attributes/role';
+import roles from '../util/attributes/role';
 import { getLiteralAttributeValue } from '../util/getAttributeValue';
 
 const errorMessage = 'Elements with ARIA roles must use a valid, non-abstract ARIA role.';
@@ -29,7 +29,8 @@ module.exports = context => ({
     }
 
     const normalizedValues = String(value).toUpperCase().split(' ');
-    const isValid = normalizedValues.every(value => Object.keys(validRoleTypes).indexOf(value) > -1);
+    const validRoles = Object.keys(roles).filter(role => roles[role].abstract === false);
+    const isValid = normalizedValues.every(value => validRoles.indexOf(value) > -1);
 
     if (isValid === true) {
       return;