Add rules no-interactive-element-to-noninteractive-role and no-noninteractive-element-to-interactive-role

Author: jessebeach

__tests__/src/rules/no-interactive-element-to-noninteractive-role-test.js

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

__tests__/src/rules/no-noninteractive-element-to-interactive-role-test.js

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

docs/rules/no-interactive-element-to-noninteractive-role.md

@@ -22,7 +22,9 @@ module.exports = {
     'no-access-key': require('./rules/no-access-key'),
     'no-autofocus': require('./rules/no-autofocus'),
     'no-distracting-elements': require('./rules/no-distracting-elements'),
+    '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-onchange': require('./rules/no-onchange'),
     'no-redundant-roles': require('./rules/no-redundant-roles'),
     'no-static-element-interactions': require('./rules/no-static-element-interactions'),
@@ -60,7 +62,9 @@ module.exports = {
         'jsx-a11y/no-access-key': 'error',
         'jsx-a11y/no-autofocus': 'error',
         'jsx-a11y/no-distracting-elements': 'error',
+        '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-onchange': 'error',
         'jsx-a11y/no-redundant-roles': 'error',
         'jsx-a11y/no-static-element-interactions': 'warn',

docs/rules/no-noninteractive-element-to-interactive-role.md

@@ -0,0 +1,64 @@
+/**
+ * @fileoverview Disallow inherently interactive elements to be assigned
+ * non-interactive roles.
+ * @author Jesse Beach
+ * @flow
+ */
+
+// ----------------------------------------------------------------------------
+// Rule Definition
+// ----------------------------------------------------------------------------
+
+import {
+  dom,
+} from 'aria-query';
+import {
+  elementType,
+} from 'jsx-ast-utils';
+import type { JSXOpeningElement } from 'ast-types-flow';
+import { generateObjSchema } from '../util/schemas';
+import isInteractiveElement from '../util/isInteractiveElement';
+import isNonInteractiveRole from '../util/isNonInteractiveRole';
+import isPresentationRole from '../util/isPresentationRole';
+
+const errorMessage =
+  'Interactive elements should not be assigned non-interactive roles';
+
+const schema = generateObjSchema();
+
+const domElements = [...dom.keys()];
+
+module.exports = {
+  meta: {
+    docs: {},
+    schema: [schema],
+  },
+
+  create: (context: ESLintContext) => ({
+    JSXOpeningElement: (
+      node: JSXOpeningElement,
+    ) => {
+      const attributes = node.attributes;
+      const type = elementType(node);
+
+      if (!domElements.includes(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)
+        && (
+          isNonInteractiveRole(type, attributes)
+          || isPresentationRole(type, attributes)
+        )
+      ) {
+        // Visible, non-interactive elements should not have an interactive handler.
+        context.report({
+          node,
+          message: errorMessage,
+        });
+      }
+    },
+  }),
+};

src/index.js

@@ -0,0 +1,60 @@
+/**
+ * @fileoverview Disallow inherently non-interactive elements to be assigned
+ * interactive roles.
+ * @author Jesse Beach
+ * @flow
+ */
+
+// ----------------------------------------------------------------------------
+// Rule Definition
+// ----------------------------------------------------------------------------
+
+import {
+  dom,
+} from 'aria-query';
+import {
+  elementType,
+} from 'jsx-ast-utils';
+import type { JSXOpeningElement } from 'ast-types-flow';
+import { generateObjSchema } from '../util/schemas';
+import isNonInteractiveElement from '../util/isNonInteractiveElement';
+import isInteractiveRole from '../util/isInteractiveRole';
+
+const errorMessage =
+  'Non-interactive elements should not be assigned interactive roles';
+
+const schema = generateObjSchema();
+
+const domElements = [...dom.keys()];
+
+module.exports = {
+  meta: {
+    docs: {},
+    schema: [schema],
+  },
+
+  create: (context: ESLintContext) => ({
+    JSXOpeningElement: (
+      node: JSXOpeningElement,
+    ) => {
+      const attributes = node.attributes;
+      const type = elementType(node);
+
+      if (!domElements.includes(type)) {
+        // Do not test higher level JSX components, as we do not know what
+        // low-level DOM element this maps to.
+        return;
+      }
+      if (
+        isNonInteractiveElement(type, attributes)
+        && isInteractiveRole(type, attributes)
+      ) {
+        // Visible, non-interactive elements should not have an interactive handler.
+        context.report({
+          node,
+          message: errorMessage,
+        });
+      }
+    },
+  }),
+};