Implement valid-aria-role rule.

Author: beefancohen

README.md

@@ -74,6 +74,7 @@ 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 #.
+- [valid-aria-role](docs/rules/valid-aria-role.md): Enforce that elements with ARIA roles must use a valid, non-abstract ARIA role.
 
 ## License
 

docs/rules/valid-aria-role.md

@@ -0,0 +1,22 @@
+# valid-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.
+
+## Rule details
+
+This rule takes no arguments.
+
+### Succeed
+```jsx
+<div role="button"></div>     <!-- Good: "button" is a valid ARIA role -->
+<div role={role}></div>       <!-- Good: role is a variable & cannot be determined until runtime. -->
+<div></div>                   <!-- Good: No ARIA role -->
+```
+
+### Fail
+
+```jsx
+<div role="datepicker"></div> <!-- Bad: "datepicker" is not an ARIA role -->
+<div role="range"></div>      <!-- Bad: "range" is an _abstract_ ARIA role -->
+<div role=""></div>           <!-- Bad: An empty ARIA role is not allowed -->
+```

package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-jsx-a11y",
-  "version": "0.4.3",
+  "version": "0.5.0",
   "description": "A static analysis linter of jsx and their accessibility with screen readers.",
   "keywords": [
     "eslint",

src/index.js

@@ -9,7 +9,8 @@ module.exports = {
     'use-onblur-not-onchange': require('./rules/use-onblur-not-onchange'),
     'no-access-key': require('./rules/no-access-key'),
     'label-uses-for': require('./rules/label-uses-for'),
-    'no-hash-href': require('./rules/no-hash-href')
+    'no-hash-href': require('./rules/no-hash-href'),
+    'valid-aria-role': require('./rules/valid-aria-role')
   },
   configs: {
     recommended: {
@@ -26,7 +27,8 @@ module.exports = {
         "jsx-a11y/use-onblur-not-onchange": 2,
         "jsx-a11y/no-access-key": 2,
         "jsx-a11y/label-uses-for": 2,
-        "jsx-a11y/no-hash-href": 2
+        "jsx-a11y/no-hash-href": 2,
+        "jsx-a11y/valid-aria-role": 2
       }
     }
   }

src/rules/valid-aria-role.js

@@ -0,0 +1,58 @@
+/**
+ * @fileoverview Enforce aria role attribute is valid.
+ * @author Ethan Cohen
+ */
+'use strict';
+
+// ----------------------------------------------------------------------------
+// Rule Definition
+// ----------------------------------------------------------------------------
+
+import validRoleTypes from '../util/validRoleTypes';
+import getAttributeValue from '../util/getAttributeValue';
+
+const errorMessage = 'Elements with ARIA roles must use a valid, non-abstract ARIA role.';
+
+module.exports = context => ({
+  JSXAttribute: attribute => {
+    const normalizedName = attribute.name.name.toUpperCase();
+    const normalizedType = attribute.value.type.toUpperCase();
+
+    if (normalizedName !== 'ROLE') {
+      return;
+    }
+
+    // Only check literals, as we cannot enforce variables representing role types.
+    // Check expression containers to determine null or undefined values.
+    if (normalizedType === 'JSXEXPRESSIONCONTAINER') {
+      const expressionValue = getAttributeValue(attribute);
+      const isUndefinedOrNull = expressionValue === undefined || expressionValue === null;
+
+      if (isUndefinedOrNull) {
+        context.report({
+          node: attribute,
+          message: errorMessage
+        });
+      }
+
+      return;
+    } else if (normalizedType !== 'LITERAL') {
+      return;
+    }
+
+    // If value is a literal.
+    const normalizedValue = attribute.value.value.toUpperCase();
+    const isValid = validRoleTypes.indexOf(normalizedValue) > -1;
+
+    if (isValid === false) {
+      context.report({
+        node: attribute,
+        message: errorMessage
+      });
+    }
+  }
+});
+
+module.exports.schema = [
+  { type: 'object' }
+];

src/util/validRoleTypes.js

@@ -0,0 +1,19 @@
+// Taken from https://www.w3.org/TR/wai-aria/roles#role_definitions
+
+export default [
+  'ALERT', 'ALERTDIALOG', 'APPLICATION', 'ARTICLE',
+  'BANNER', 'BUTTON', 'CHECKBOX', 'COLUMNHEADER',
+  'COMBOBOX', 'COMPLEMENTARY',
+  'CONTENTINFO', 'DEFINITION', 'DIALOG', 'DIRECTORY',
+  'DOCUMENT', 'FORM', 'GRID', 'GRIDCELL',
+  'GROUP', 'HEADING', 'IMG', 'LINK', 'LIST', 'LISTBOX',
+  'LISTITEM', 'LOG', 'MAIN', 'MARQUEE',
+  'MATH', 'MENU', 'MENUBAR', 'MENUITEM',
+  'MENUITEMCHECKBOX', 'MENUITEMRADIO', 'NAVIGATION', 'NOTE',
+  'OPTION', 'PRESENTATION', 'PROGRESSBAR', 'RADIO',
+  'RADIOGROUP', 'REGION', 'ROW', 'ROWGROUP', 'ROWHEADER',
+  'SCROLLBAR', 'SEARCH', 'SEPARATOR', 'SLIDER',
+  'SPINBUTTON', 'STATUS', 'TAB', 'TABLIST', 'TABPANEL',
+  'TEXTBOX', 'TIMER', 'TOOLBAR', 'TOOLTIP',
+  'TREE', 'TREEGRID', 'TREEITEM'
+];

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

@@ -0,0 +1,58 @@
+/**
+ * @fileoverview Enforce aria role attribute is valid.
+ * @author Ethan Cohen
+ */
+
+'use strict';
+
+// -----------------------------------------------------------------------------
+// Requirements
+// -----------------------------------------------------------------------------
+
+import rule from '../../../src/rules/valid-aria-role';
+import { RuleTester } from 'eslint';
+
+const parserOptions = {
+  ecmaVersion: 6,
+  ecmaFeatures: {
+    jsx: true
+  }
+};
+
+// -----------------------------------------------------------------------------
+// Tests
+// -----------------------------------------------------------------------------
+
+const ruleTester = new RuleTester();
+
+const errorMessage = {
+  message: 'Elements with ARIA roles must use a valid, non-abstract ARIA role.',
+  type: 'JSXAttribute'
+};
+
+import validRoleTypes from '../../../src/util/validRoleTypes';
+
+// Create basic test cases using all valid role types.
+const basicValidityTests = validRoleTypes.map(role => ({
+  code: `<div role="${role.toLowerCase()}" />`,
+  parserOptions
+}));
+
+ruleTester.run('valid-aria-role', rule, {
+  valid: [
+    // Variables should pass, as we are only testing literals.
+    { code: '<div />', parserOptions },
+    { code: '<div></div>', parserOptions },
+    { code: '<div role={role} />', parserOptions },
+    { code: '<div role={role || "button"} />', parserOptions },
+    { code: '<div role={role || "foobar"} />', parserOptions }
+  ].concat(basicValidityTests),
+  invalid: [
+    { code: '<div role="foobar" />', errors: [ errorMessage ], parserOptions },
+    { code: '<div role="datepicker"></div>', errors: [ errorMessage ], parserOptions },
+    { code: '<div role="range"></div>', errors: [ errorMessage ], parserOptions },
+    { code: '<div role=""></div>', errors: [ errorMessage ], parserOptions },
+    { code: '<div role={undefined}></div>', errors: [ errorMessage ], parserOptions },
+    { code: '<div role={null}></div>', errors: [ errorMessage ], parserOptions }
+  ]
+});