Allow exception for implicit navigation role in no-redundant-roles rule

Callie Callaway · Callie Callaway · commit 3b4e4926f07f · 2018-01-08T13:55:44.000-08:00
diff --git a/__tests__/src/rules/no-redundant-roles-test.js b/__tests__/src/rules/no-redundant-roles-test.js
@@ -10,8 +10,10 @@
 // -----------------------------------------------------------------------------
 
 import { RuleTester } from 'eslint';
+import { configs } from '../../../src/index';
 import parserOptionsMapper from '../../__util__/parserOptionsMapper';
 import rule from '../../../src/rules/no-redundant-roles';
+import ruleOptionsMapperFactory from '../../__util__/ruleOptionsMapperFactory';
 
 // -----------------------------------------------------------------------------
 // Tests
@@ -24,16 +26,41 @@ const expectedError = (element, implicitRole) => ({
   type: 'JSXOpeningElement',
 });
 
-ruleTester.run('no-redundant-roles', rule, {
+const ruleName = 'jsx-a11y/no-redundant-roles';
+
+const alwaysValid = [
+  { code: '<div />;' },
+  { code: '<button role="main" />' },
+  { code: '<MyComponent role="button" />' },
+  { code: '<button role={`${foo}button`} />' },
+];
+
+const neverValid = [
+  { code: '<button role="button" />', errors: [expectedError('button', 'button')] },
+  { code: '<body role="DOCUMENT" />', errors: [expectedError('body', 'document')] },
+  { code: '<button role={`${undefined}button`} />', errors: [expectedError('button', 'button')] },
+];
+
+const recommendedOptions = (configs.recommended.rules[ruleName][1] || {});
+
+ruleTester.run(`${ruleName}:recommended`, rule, {
   valid: [
-    { code: '<div />;' },
-    { code: '<button role="main" />' },
-    { code: '<MyComponent role="button" />' },
-    { code: '<button role={`${foo}button`} />' },
-  ].map(parserOptionsMapper),
+    ...alwaysValid,
+    { code: '<nav role="navigation" />' },
+  ]
+    .map(ruleOptionsMapperFactory(recommendedOptions))
+    .map(parserOptionsMapper),
+  invalid: neverValid
+    .map(ruleOptionsMapperFactory(recommendedOptions))
+    .map(parserOptionsMapper),
+});
+
+ruleTester.run(`${ruleName}:strict`, rule, {
+  valid: alwaysValid
+    .map(parserOptionsMapper),
   invalid: [
-    { code: '<button role="button" />', errors: [expectedError('button', 'button')] },
-    { code: '<body role="DOCUMENT" />', errors: [expectedError('body', 'document')] },
-    { code: '<button role={`${undefined}button`} />', errors: [expectedError('button', 'button')] },
-  ].map(parserOptionsMapper),
+    ...neverValid,
+    { code: '<nav role="navigation" />', errors: [expectedError('nav', 'navigation')] },
+  ]
+    .map(parserOptionsMapper),
 });
diff --git a/docs/rules/no-redundant-roles.md b/docs/rules/no-redundant-roles.md
@@ -7,7 +7,23 @@ Some HTML elements have native semantics that are implemented by the browser. Th
 
 ## Rule details
 
-This rule takes no arguments.
+The recommended options for this rule allow an implicit role of `navigation` to be applied to a `nav` element as is [advised by w3](https://www.w3.org/WAI/GL/wiki/Using_HTML5_nav_element#Example:The_.3Cnav.3E_element). The options are provided as an object keyed by HTML element name; the value is an array of implicit ARIA roles that are allowed on the specified element.
+
+```
+{
+  'jsx-a11y/no-redundant-roles': [
+  'error',
+  {
+    nav: ['navigation'],
+  },
+}
+```
+
+Under the recommended options, the following code is valid. It would be invalid under the strict rules.
+
+```
+<nav role="navigation" />
+```
 
 ### Succeed
 ```jsx
diff --git a/src/index.js b/src/index.js
@@ -137,7 +137,12 @@ module.exports = {
           },
         ],
         'jsx-a11y/no-onchange': 'error',
-        'jsx-a11y/no-redundant-roles': 'error',
+        'jsx-a11y/no-redundant-roles': [
+          'error',
+          {
+            nav: ['navigation'],
+          },
+        ],
         'jsx-a11y/no-static-element-interactions': [
           'error',
           {
diff --git a/src/rules/no-redundant-roles.js b/src/rules/no-redundant-roles.js
@@ -2,13 +2,17 @@
  * @fileoverview Enforce explicit role property is not the
  * same as implicit/default role property on element.
  * @author Ethan Cohen <@evcohen>
+ * @flow
  */
 
 // ----------------------------------------------------------------------------
 // Rule Definition
 // ----------------------------------------------------------------------------
 
 import { elementType } from 'jsx-ast-utils';
+import includes from 'array-includes';
+import type { JSXOpeningElement } from 'ast-types-flow';
+import type { ESLintContext } from '../../flow/eslint';
 import { generateObjSchema } from '../util/schemas';
 import getExplicitRole from '../util/getExplicitRole';
 import getImplicitRole from '../util/getImplicitRole';
@@ -26,22 +30,33 @@ module.exports = {
     schema: [schema],
   },
 
-  create: context => ({
-    JSXOpeningElement: (node) => {
-      const type = elementType(node);
-      const implicitRole = getImplicitRole(type, node.attributes);
-      const explicitRole = getExplicitRole(type, node.attributes);
-
-      if (!implicitRole || !explicitRole) {
-        return;
-      }
-
-      if (implicitRole === explicitRole) {
-        context.report({
-          node,
-          message: errorMessage(type, implicitRole.toLowerCase()),
-        });
-      }
-    },
-  }),
+  create: (context: ESLintContext) => {
+    const { options } = context;
+    return {
+      JSXOpeningElement: (node: JSXOpeningElement) => {
+        const type = elementType(node);
+        const implicitRole = getImplicitRole(type, node.attributes);
+        const explicitRole = getExplicitRole(type, node.attributes);
+
+        if (!implicitRole || !explicitRole) {
+          return;
+        }
+
+        if (implicitRole === explicitRole) {
+          const allowedRoles = (options[0] || {});
+          if (
+            Object.prototype.hasOwnProperty.call(allowedRoles, type) &&
+            includes(allowedRoles[type], implicitRole)
+          ) {
+            return;
+          }
+
+          context.report({
+            node,
+            message: errorMessage(type, implicitRole.toLowerCase()),
+          });
+        }
+      },
+    };
+  },
 };
