Adding the rule no-noninteractive-tabindex

Author: jessebeach

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

@@ -0,0 +1,52 @@
+/* eslint-env jest */
+/**
+ * @fileoverview Disallow tabindex on static and noninteractive elements
+ * @author jessebeach
+ */
+
+// -----------------------------------------------------------------------------
+// Requirements
+// -----------------------------------------------------------------------------
+
+import { RuleTester } from 'eslint';
+import parserOptionsMapper from '../../__util__/parserOptionsMapper';
+import rule from '../../../src/rules/no-noninteractive-tabindex';
+
+// -----------------------------------------------------------------------------
+// Tests
+// -----------------------------------------------------------------------------
+
+const ruleTester = new RuleTester();
+
+const expectedError = {
+  message: 'TabIndex should only be declared on interactive elements.',
+  type: 'JSXAttribute',
+};
+
+const alwaysValid = [
+  { code: '<MyButton tabIndex={0} />' },
+  { code: '<button />' },
+  { code: '<button tabIndex="0" />' },
+  { code: '<button tabIndex={0} />' },
+  { code: '<div />' },
+  { code: '<div tabIndex="-1" />' },
+  { code: '<div role="button" tabIndex="0" />' },
+  { code: '<div role="article" tabIndex="-1" />' },
+  { code: '<article tabIndex="-1" />' },
+];
+
+const neverValid = [
+  { code: '<div tabIndex="0" />', errors: [expectedError] },
+  { code: '<div role="article" tabIndex="0" />', errors: [expectedError] },
+  { code: '<article tabIndex="0" />', errors: [expectedError]  },
+  { code: '<article tabIndex={0} />', errors: [expectedError]  },
+];
+
+ruleTester.run('no-noninteractive-tabindex', rule, {
+  valid: [
+    ...alwaysValid,
+  ].map(parserOptionsMapper),
+  invalid: [
+    ...neverValid,
+  ].map(parserOptionsMapper),
+});

docs/rules/no-noninteractive-tabindex.md

@@ -0,0 +1,21 @@
+# no-noninteractive-tabindex
+
+Write a useful explanation here!
+
+### References
+
+  1.
+
+## Rule details
+
+This rule takes no arguments.
+
+### Succeed
+```jsx
+<div />
+```
+
+### Fail
+```jsx
+
+```

src/index.js

@@ -27,6 +27,7 @@ module.exports = {
     'no-interactive-element-to-noninteractive-role': require('./rules/no-interactive-element-to-noninteractive-role'),
     'no-noninteractive-element-interactions': require('./rules/no-noninteractive-element-interactions'),
     'no-noninteractive-element-to-interactive-role': require('./rules/no-noninteractive-element-to-interactive-role'),
+    'no-noninteractive-tabindex': require('./rules/no-noninteractive-tabindex'),
     'no-onchange': require('./rules/no-onchange'),
     'no-redundant-roles': require('./rules/no-redundant-roles'),
     'no-static-element-interactions': require('./rules/no-static-element-interactions'),
@@ -100,7 +101,7 @@ module.exports = {
             td: ['gridcell'],
           },
         ],
-
+        '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

@@ -0,0 +1,72 @@
+/**
+ * @fileoverview Disallow tabindex on static and noninteractive elements
+ * @author jessebeach
+ * @flow
+ */
+
+// ----------------------------------------------------------------------------
+// Rule Definition
+// ----------------------------------------------------------------------------
+
+import {
+  dom,
+} from 'aria-query';
+import {
+  elementType,
+  getProp,
+  getLiteralPropValue,
+  propName,
+} from 'jsx-ast-utils';
+import isInteractiveElement from '../util/isInteractiveElement';
+import isInteractiveRole from '../util/isInteractiveRole';
+import { generateObjSchema } from '../util/schemas';
+
+const errorMessage =
+  'TabIndex should only be declared on interactive elements.';
+
+const schema = generateObjSchema();
+
+module.exports = {
+  meta: {
+    docs: {},
+    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'),
+        );
+
+      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
+        ) {
+        context.report({
+          node: attribute,
+          message: errorMessage,
+        });
+      }
+    },
+  }),
+};