[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,35 @@
+/* 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: [
+    { code: '<button>Save</button>' },
+  ].map(parserOptionsMapper),
+  invalid: [
+    { code: '<button><span /></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'),
@@ -55,10 +56,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',
           {
@@ -73,8 +76,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',
@@ -87,6 +91,7 @@ module.exports = {
             tr: ['none', 'presentation'],
           },
         ],
+
         'jsx-a11y/no-noninteractive-element-interactions': [
           'error',
           {
@@ -105,6 +110,7 @@ module.exports = {
             img: ['onError', 'onLoad'],
           },
         ],
+
         'jsx-a11y/no-noninteractive-element-to-interactive-role': [
           'error',
           {
@@ -131,15 +137,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',
           {
@@ -153,6 +162,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,77 @@
+/**
+ * @fileoverview Enforce controls are associated with a text label.
+ * @author Jesse Beach
+ *
+ * @flow
+ */
+
+// ----------------------------------------------------------------------------
+// Rule Definition
+// ----------------------------------------------------------------------------
+
+import { getProp, getPropValue, 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 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'
+];
+
+module.exports = {
+  meta: {
+    docs: {},
+    schema: [schema],
+  },
+
+  create: (context: ESLintContext) => {
+    const options = context.options[0] || {};
+    const labelComponents = options.labelComponents || [];
+    const controlComponents = options.controlComponents || defaultControlElements;
+
+    const rule = (node: JSXElement) => {
+      if (controlComponents.indexOf(elementType(node.openingElement)) === -1) {
+        return;
+      }
+
+      // Prevent crazy recursion.
+      const recursionDepth = Math.min(
+        options.depth === undefined ? 2 : options.depth,
+        25,
+      );
+      const hasAccessibleLabel = mayHaveAccessibleLabel(
+        node,
+        recursionDepth,
+        options.labelAttributes,
+      );
+
+      // htmlFor case
+      if (!hasAccessibleLabel) {
+        context.report({
+          node: node.openingElement,
+          message: errorMessage,
+        });
+      }
+    };
+
+    // Create visitor selectors.
+    return {
+      JSXElement: rule,
+    };
+  },
+};