Update no-redundant-roles to allow nav role by default

Author: Callie Callaway

__tests__/src/rules/no-redundant-roles-test.js

@@ -10,7 +10,6 @@
 // -----------------------------------------------------------------------------
 
 import { RuleTester } from 'eslint';
-import { configs } from '../../../src';
 import parserOptionsMapper from '../../__util__/parserOptionsMapper';
 import rule from '../../../src/rules/no-redundant-roles';
 import ruleOptionsMapperFactory from '../../__util__/ruleOptionsMapperFactory';
@@ -41,26 +40,26 @@ const neverValid = [
   { code: '<button role={`${undefined}button`} />', errors: [expectedError('button', 'button')] },
 ];
 
-const recommendedOptions = (configs.recommended.rules[ruleName][1] || {});
-
 ruleTester.run(`${ruleName}:recommended`, rule, {
   valid: [
     ...alwaysValid,
     { code: '<nav role="navigation" />' },
   ]
-    .map(ruleOptionsMapperFactory(recommendedOptions))
     .map(parserOptionsMapper),
   invalid: neverValid
-    .map(ruleOptionsMapperFactory(recommendedOptions))
     .map(parserOptionsMapper),
 });
 
-ruleTester.run(`${ruleName}:strict`, rule, {
+const noNavExceptionsOptions = { nav: [] };
+
+ruleTester.run(`${ruleName}:recommended`, rule, {
   valid: alwaysValid
+    .map(ruleOptionsMapperFactory(noNavExceptionsOptions))
     .map(parserOptionsMapper),
   invalid: [
     ...neverValid,
     { code: '<nav role="navigation" />', errors: [expectedError('nav', 'navigation')] },
   ]
+    .map(ruleOptionsMapperFactory(noNavExceptionsOptions))
     .map(parserOptionsMapper),
 });

docs/rules/no-redundant-roles.md

@@ -7,7 +7,7 @@ Some HTML elements have native semantics that are implemented by the browser. Th
 
 ## Rule details
 
-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.
+The default 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.
 
 ```
 {
@@ -19,12 +19,6 @@ The recommended options for this rule allow an implicit role of `navigation` to
 }
 ```
 
-Under the recommended options, the following code is valid. It would be invalid under the strict rules.
-
-```
-<nav role="navigation" />
-```
-
 ### Succeed
 ```jsx
 <div />

src/index.js

@@ -137,12 +137,7 @@ module.exports = {
           },
         ],
         'jsx-a11y/no-onchange': 'error',
-        'jsx-a11y/no-redundant-roles': [
-          'error',
-          {
-            nav: ['navigation'],
-          },
-        ],
+        'jsx-a11y/no-redundant-roles': 'error',
         'jsx-a11y/no-static-element-interactions': [
           'error',
           {

src/rules/no-redundant-roles.js

@@ -20,6 +20,8 @@ import getImplicitRole from '../util/getImplicitRole';
 const errorMessage = (element, implicitRole) =>
   `The element ${element} has an implicit role of ${implicitRole}. Defining this explicitly is redundant and should be avoided.`;
 
+const DEFAULT_ROLE_EXCEPTIONS = { nav: ['navigation'] };
+
 module.exports = {
   meta: {
     docs: {
@@ -50,8 +52,16 @@ module.exports = {
         }
 
         if (implicitRole === explicitRole) {
-          const allowedRoles = (options[0] || {});
-          if (has(allowedRoles, type) && includes(allowedRoles[type], implicitRole)) {
+          const allowedRedundantRoles = (options[0] || {});
+          let redundantRolesForElement;
+
+          if (has(allowedRedundantRoles, type)) {
+            redundantRolesForElement = allowedRedundantRoles[type];
+          } else {
+            redundantRolesForElement = DEFAULT_ROLE_EXCEPTIONS[type] || [];
+          }
+
+          if (includes(redundantRolesForElement, implicitRole)) {
             return;
           }