Adding tag and role config overrides to no-noninteractive-tabindex rule.

Author: jessebeach

__tests__/src/rules/no-noninteractive-tabindex-test.js

@@ -9,15 +9,19 @@
 // -----------------------------------------------------------------------------
 
 import { RuleTester } from 'eslint';
+import { configs } from '../../../src/index';
 import parserOptionsMapper from '../../__util__/parserOptionsMapper';
 import rule from '../../../src/rules/no-noninteractive-tabindex';
+import ruleOptionsMapperFactory from '../../__util__/ruleOptionsMapperFactory';
 
 // -----------------------------------------------------------------------------
 // Tests
 // -----------------------------------------------------------------------------
 
 const ruleTester = new RuleTester();
 
+const ruleName = 'no-noninteractive-tabindex';
+
 const expectedError = {
   message: '`tabIndex` should only be declared on interactive elements.',
   type: 'JSXAttribute',
@@ -42,11 +46,30 @@ const neverValid = [
   { code: '<article tabIndex={0} />', errors: [expectedError] },
 ];
 
-ruleTester.run('no-noninteractive-tabindex', rule, {
+const recommendedOptions = (
+  configs.recommended.rules[`jsx-a11y/${ruleName}`][1] || {}
+);
+
+ruleTester.run(`${ruleName}:recommended`, rule, {
+  valid: [
+    ...alwaysValid,
+    { code: '<div role="tabpanel" tabIndex="0" />' },
+  ]
+    .map(ruleOptionsMapperFactory(recommendedOptions))
+    .map(parserOptionsMapper),
+  invalid: [
+    ...neverValid,
+  ]
+    .map(ruleOptionsMapperFactory(recommendedOptions))
+    .map(parserOptionsMapper),
+});
+
+ruleTester.run(`${ruleName}:strict`, rule, {
   valid: [
     ...alwaysValid,
   ].map(parserOptionsMapper),
   invalid: [
     ...neverValid,
+    { code: '<div role="tabpanel" tabIndex="0" />', errors: [expectedError] },
   ].map(parserOptionsMapper),
 });

src/index.js

@@ -101,7 +101,13 @@ module.exports = {
             td: ['gridcell'],
           },
         ],
-        'jsx-a11y/no-noninteractive-tabindex': 'error',
+        'jsx-a11y/no-noninteractive-tabindex': [
+          'error',
+          {
+            tags: [],
+            roles: ['tabpanel'],
+          }
+        ],
         'jsx-a11y/no-onchange': 'error',
         'jsx-a11y/no-redundant-roles': 'error',
         'jsx-a11y/no-static-element-interactions': 'warn',
@@ -142,6 +148,7 @@ module.exports = {
         'jsx-a11y/no-interactive-element-to-noninteractive-role': 'error',
         'jsx-a11y/no-noninteractive-element-interactions': 'error',
         'jsx-a11y/no-noninteractive-element-to-interactive-role': 'error',
+        'jsx-a11y/no-noninteractive-tabindex': 'error',
         'jsx-a11y/no-onchange': 'error',
         'jsx-a11y/no-redundant-roles': 'error',
         'jsx-a11y/no-static-element-interactions': 'warn',

src/rules/no-noninteractive-tabindex.js

@@ -32,41 +32,57 @@ module.exports = {
     schema: [schema],
   },
 
-  create: (context: ESLintContext) => ({
-    JSXAttribute: (
-        attribute: ESLintJSXAttribute,
-      ) => {
-      const attributeName = propName(attribute);
-      if (attributeName !== 'tabIndex') {
-        return;
-      }
-      const node = attribute.parent;
-      const attributes = node.attributes;
-      const type = elementType(node);
-      const tabIndex = getLiteralPropValue(
-          getProp(node.attributes, 'tabIndex'),
+  create: (context: ESLintContext) => {
+    const options = context.options;
+    return {
+      JSXOpeningElement: (
+          node: JSXOpeningElement,
+        ) => {
+        const type = elementType(node);
+        const attributes = node.attributes;
+        const tabIndexProp = getProp(attributes, 'tabIndex');
+        const tabIndex = getLiteralPropValue(tabIndexProp);
+        // Early return;
+        if (typeof tabIndex === 'undefined') {
+          return;
+        }
+        const role = getLiteralPropValue(
+          getProp(node.attributes, 'role'),
         );
 
-      if (!dom.has(type)) {
-          // Do not test higher level JSX components, as we do not know what
-          // low-level DOM element this maps to.
-        return;
-      }
-      if (
-        isInteractiveElement(type, attributes)
-        || isInteractiveRole(type, attributes)
-      ) {
-        return;
-      }
-      if (
-          !isNaN(Number.parseInt(tabIndex, 10))
-          && tabIndex >= 0
+
+        if (!dom.has(type)) {
+            // Do not test higher level JSX components, as we do not know what
+            // low-level DOM element this maps to.
+          return;
+        }
+        // Allow for configuration overrides.
+        const {
+          tags,
+          roles,
+        } = (options[0] || {});
+        if (
+          (tags && tags.includes(type))
+          || (roles && roles.includes(role))
+        ) {
+          return;
+        }
+        if (
+          isInteractiveElement(type, attributes)
+          || isInteractiveRole(type, attributes)
         ) {
-        context.report({
-          node: attribute,
-          message: errorMessage,
-        });
-      }
-    },
-  }),
+          return;
+        }
+        if (
+            !isNaN(Number.parseInt(tabIndex, 10))
+            && tabIndex >= 0
+          ) {
+          context.report({
+            node: tabIndexProp,
+            message: errorMessage,
+          });
+        }
+      },
+    };
+  },
 };