[new rule] control-has-associated-label checks interactives for a label

Author: jessebeach

__tests__/src/rules/control-has-associated-label-test.js

@@ -0,0 +1,50 @@
+/* eslint-env jest */
+/**
+ * @fileoverview Control elements must be associated with a text label
+ * @author jessebeach
+ */
+
+// -----------------------------------------------------------------------------
+// Requirements
+// -----------------------------------------------------------------------------
+
+import { RuleTester } from 'eslint';
+import parserOptionsMapper from '../../__util__/parserOptionsMapper';
+import rule from '../../../src/rules/control-has-associated-label';
+
+// -----------------------------------------------------------------------------
+// Tests
+// -----------------------------------------------------------------------------
+
+const ruleTester = new RuleTester();
+
+const ruleName = 'control-has-associated-label';
+
+const expectedError = {
+  message: 'A control must be associated with a text label.',
+  type: 'JSXOpeningElement',
+};
+
+ruleTester.run(ruleName, rule, {
+  valid: [
+    // Interactive Elements
+    { code: '<button>Save</button>' },
+    { code: '<button><span>Save</span></button>' },
+    { code: '<button><span><span>Save</span></span></button>', options: [{ depth: 3 }] },
+    { code: '<button><span><span><span><span><span><span><span><span>Save</span></span></span></span></span></span></span></span></button>', options: [{ depth: 9 }] },
+    { code: '<button><img alt="Save" /></button>' },
+    { code: '<button aria-label="Save" />' },
+    { code: '<button><span aria-label="Save" /></button>' },
+    { code: '<button aria-labelledby="js_1" />' },
+    { code: '<button><span aria-labelledby="js_1" /></button>' },
+    { code: '<button>{sureWhyNot}</button>' },
+    // Interactive Roles
+    { code: '<div role="button">Save</div>' },
+  ].map(parserOptionsMapper),
+  invalid: [
+    { code: '<button />', errors: [expectedError] },
+    { code: '<button><span /></button>', errors: [expectedError] },
+    { code: '<button><img /></button>', errors: [expectedError] },
+    { code: '<button><span title="This is not a real label" /></button>', errors: [expectedError] },
+  ].map(parserOptionsMapper),
+});

docs/rules/control-has-associated-label.md

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

src/index.js

@@ -12,13 +12,14 @@ module.exports = {
     'aria-role': require('./rules/aria-role'),
     'aria-unsupported-elements': require('./rules/aria-unsupported-elements'),
     'click-events-have-key-events': require('./rules/click-events-have-key-events'),
+    'control-has-associated-label': require('./rules/control-has-associated-label'),
     'heading-has-content': require('./rules/heading-has-content'),
     'html-has-lang': require('./rules/html-has-lang'),
     'iframe-has-title': require('./rules/iframe-has-title'),
     'img-redundant-alt': require('./rules/img-redundant-alt'),
     'interactive-supports-focus': require('./rules/interactive-supports-focus'),
-    'label-has-for': require('./rules/label-has-for'),
     'label-has-associated-control': require('./rules/label-has-associated-control'),
+    'label-has-for': require('./rules/label-has-for'),
     lang: require('./rules/lang'),
     'media-has-caption': require('./rules/media-has-caption'),
     'mouse-events-have-key-events': require('./rules/mouse-events-have-key-events'),
@@ -58,10 +59,12 @@ module.exports = {
         'jsx-a11y/aria-role': 'error',
         'jsx-a11y/aria-unsupported-elements': 'error',
         'jsx-a11y/click-events-have-key-events': 'error',
+        'jsx-a11y/control-has-associated-label': 'error',
         'jsx-a11y/heading-has-content': 'error',
         'jsx-a11y/html-has-lang': 'error',
         'jsx-a11y/iframe-has-title': 'error',
         'jsx-a11y/img-redundant-alt': 'error',
+
         'jsx-a11y/interactive-supports-focus': [
           'error',
           {
@@ -76,8 +79,9 @@ module.exports = {
             ],
           },
         ],
-        'jsx-a11y/label-has-for': 'error',
+
         'jsx-a11y/label-has-associated-control': 'error',
+        'jsx-a11y/label-has-for': 'error',
         'jsx-a11y/media-has-caption': 'error',
         'jsx-a11y/mouse-events-have-key-events': 'error',
         'jsx-a11y/no-access-key': 'error',
@@ -90,6 +94,7 @@ module.exports = {
             tr: ['none', 'presentation'],
           },
         ],
+
         'jsx-a11y/no-noninteractive-element-interactions': [
           'error',
           {
@@ -110,6 +115,7 @@ module.exports = {
             img: ['onError', 'onLoad'],
           },
         ],
+
         'jsx-a11y/no-noninteractive-element-to-interactive-role': [
           'error',
           {
@@ -136,15 +142,18 @@ module.exports = {
             td: ['gridcell'],
           },
         ],
+
         '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': [
           'error',
           {
@@ -158,6 +167,7 @@ module.exports = {
             ],
           },
         ],
+
         'jsx-a11y/role-has-required-aria-props': 'error',
         'jsx-a11y/role-supports-aria-props': 'error',
         'jsx-a11y/scope': 'error',

src/rules/control-has-associated-label.js

@@ -0,0 +1,90 @@
+/**
+ * @fileoverview Enforce controls are associated with a text label.
+ * @author Jesse Beach
+ *
+ * @flow
+ */
+
+// ----------------------------------------------------------------------------
+// Rule Definition
+// ----------------------------------------------------------------------------
+
+import { getProp, getLiteralPropValue, elementType } from 'jsx-ast-utils';
+import type { JSXElement } from 'ast-types-flow';
+import { generateObjSchema, arraySchema } from '../util/schemas';
+import type { ESLintContext } from '../../flow/eslint';
+import isInteractiveElement from '../util/isInteractiveElement';
+import isInteractiveRole from '../util/isInteractiveRole';
+import mayContainChildComponent from '../util/mayContainChildComponent';
+import mayHaveAccessibleLabel from '../util/mayHaveAccessibleLabel';
+
+const errorMessage = 'A control must be associated with a text label.';
+
+const schema = generateObjSchema({
+  labelComponents: arraySchema,
+  labelAttributes: arraySchema,
+  controlComponents: arraySchema,
+  depth: {
+    description: 'JSX tree depth limit to check for accessible label',
+    type: 'integer',
+    minimum: 0,
+  },
+});
+
+const defaultControlElements = [
+  'button',
+];
+const defaultControlRoles = [
+  'button',
+];
+
+module.exports = {
+  meta: {
+    docs: {},
+    schema: [schema],
+  },
+
+  create: (context: ESLintContext) => {
+    const options = context.options[0] || {};
+    const labelComponents = options.labelComponents || [];
+    const controlComponents = options.controlComponents || defaultControlElements;
+    const controlRoles = options.controlRoles || defaultControlRoles;
+
+    const rule = (node: JSXElement) => {
+      const tag = elementType(node.openingElement);
+      const props = node.openingElement.attributes;
+      const role = getLiteralPropValue(getProp(props, 'role'));
+      if (controlComponents.indexOf(tag) === -1) {
+        return;
+      }
+      const nodeIsInteractiveElement = isInteractiveElement(tag, props);
+      const nodeIsInteractiveRoleElement = isInteractiveRole(tag, props);
+
+      let hasAccessibleLabel = true;
+      if (nodeIsInteractiveElement || nodeIsInteractiveRoleElement) {
+        // Prevent crazy recursion.
+        const recursionDepth = Math.min(
+          options.depth === undefined ? 2 : options.depth,
+          25,
+        );
+        hasAccessibleLabel = mayHaveAccessibleLabel(
+          node,
+          recursionDepth,
+          options.labelAttributes,
+        );
+      }
+
+      if (!hasAccessibleLabel) {
+        context.report({
+          node: node.openingElement,
+          message: errorMessage,
+        });
+      }
+    };
+
+    // Create visitor selectors.
+    return {
+      JSXElement: rule,
+    };
+  },
+};