Add no-invalid-aria rule.

Enforce that all aria-* properties are valid (aka listed in the spec) :)

Author: Ethan Cohen

README.md

@@ -75,6 +75,7 @@ Then configure the rules you want to use under the rules section.
 - [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 #.
 - [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.

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">
+```

src/index.js

@@ -10,7 +10,8 @@ module.exports = {
     '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-role': require('./rules/valid-aria-role'),
+    'no-invalid-aria': require('./rules/no-invalid-aria')
   },
   configs: {
     recommended: {
@@ -28,7 +29,8 @@ module.exports = {
         "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-role": 2,
+        "jsx-a11y/no-invalid-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 validAriaProperties from '../util/validAriaProperties';
+
+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 = validAriaProperties.indexOf(normalizedName) > -1;
+
+    if (isValid === false) {
+      context.report({
+        node: attribute,
+        message: errorMessage(name)
+      });
+    }
+  }
+});
+
+module.exports.schema = [
+  { type: 'object' }
+];

src/util/validAriaProperties.js

@@ -0,0 +1,22 @@
+// Taken from https://www.w3.org/TR/wai-aria/states_and_properties#state_prop_def
+
+export default [
+  'ARIA-ACTIVEDESCENDANT', 'ARIA-ATOMIC',
+  'ARIA-AUTOCOMPLETE', 'ARIA-BUSY',
+  'ARIA-CHECKED', 'ARIA-CONTROLS',
+  'ARIA-DESCRIBEDBY', 'ARIA-DISABLED',
+  'ARIA-DROPEFFECT', 'ARIA-EXPANDED',
+  'ARIA-FLOWTO', 'ARIA-GRABBED',
+  'ARIA-HASPOPUP', 'ARIA-HIDDEN',
+  'ARIA-INVALID', 'ARIA-LABEL',
+  'ARIA-LABELLEDBY', 'ARIA-LEVEL',
+  'ARIA-LIVE', 'ARIA-MULTILINE',
+  'ARIA-MULTISELECTABLE', 'ARIA-ORIENTATION',
+  'ARIA-OWNS', 'ARIA-POSINSET',
+  'ARIA-PRESSED', 'ARIA-READONLY',
+  'ARIA-RELEVANT', 'ARIA-REQUIRED',
+  'ARIA-SELECTED', 'ARIA-SETSIZE',
+  'ARIA-SORT', 'ARIA-VALUEMAX',
+  'ARIA-VALUEMIN', 'ARIA-VALUENOW',
+  'ARIA-VALUETEXT'
+];

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

@@ -0,0 +1,55 @@
+/**
+ * @fileoverview Enforce all aria-* properties are valid.
+ * @author Ethan Cohen
+ */
+
+'use strict';
+
+// -----------------------------------------------------------------------------
+// Requirements
+// -----------------------------------------------------------------------------
+
+import rule from '../../../src/rules/no-invalid-aria';
+import { RuleTester } from 'eslint';
+
+const parserOptions = {
+  ecmaVersion: 6,
+  ecmaFeatures: {
+    jsx: true
+  }
+};
+
+// -----------------------------------------------------------------------------
+// Tests
+// -----------------------------------------------------------------------------
+
+const ruleTester = new RuleTester();
+
+const errorMessage = name => ({
+  message: `${name}: This attribute is an invalid ARIA attribute.`,
+  type: 'JSXAttribute'
+});
+
+import validAriaProperties from '../../../src/util/validAriaProperties';
+
+// Create basic test cases using all valid role types.
+const basicValidityTests = validAriaProperties.map(prop => ({
+  code: `<div ${prop.toLowerCase()}="foobar" />`,
+  parserOptions
+}));
+
+ruleTester.run('no-invalid-aria', rule, {
+  valid: [
+    // Variables should pass, as we are only testing literals.
+    { code: '<div />', parserOptions },
+    { code: '<div></div>', parserOptions },
+    { code: '<div aria="wee"></div>', parserOptions }, // Needs aria-*
+    { code: '<div abcARIAdef="true"></div>', parserOptions },
+    { code: '<Bar baz />', parserOptions }
+  ].concat(basicValidityTests),
+  invalid: [
+    { code: '<div aria-="foobar" />', errors: [ errorMessage('aria-') ], parserOptions },
+    { code: '<div aria-labeledby="foobar" />', errors: [ errorMessage('aria-labeledby') ], parserOptions },
+    { code: '<div aria-skldjfaria-klajsd="foobar" />', errors: [ errorMessage('aria-skldjfaria-klajsd') ], parserOptions }
+  ]
+});