Enforce labels have htmlFor attribute.

Author: Ethan Cohen

index.js

@@ -6,7 +6,8 @@ module.exports = {
     'onClick-uses-role': require('./lib/rules/onClick-uses-role'),
     'mouseEvents-require-keyEvents': require('./lib/rules/mouseEvents-require-keyEvents'),
     'use-onblur-not-onchange': require('./lib/rules/use-onblur-not-onchange'),
-    'no-access-key': require('./lib/rules/no-access-key')
+    'no-access-key': require('./lib/rules/no-access-key'),
+    'use-label-for': require('./lib/rules/use-label-for')
   },
   configs: {
     recommended: {

lib/rules/use-label-for.js

@@ -0,0 +1,37 @@
+/**
+ * @fileoverview Enforce label tags have htmlFor attribute.
+ * @author Ethan Cohen
+ */
+'use strict';
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+var hasAttribute = require('../hasAttribute');
+
+module.exports = function(context) {
+
+  return {
+    JSXOpeningElement: function(node) {
+      var type = node.name.name;
+      if (type.toUpperCase() !== 'LABEL') {
+        return;
+      }
+
+      var hasHtmlForAttr = hasAttribute(node.attributes, 'htmlFor');
+
+      if (hasHtmlForAttr === false) {
+        context.report({
+          node: node,
+          message: 'Form controls using a label to identify them must have only one label ' +
+            'that is programmatically associated with the control using: label for=[ID of control].'
+        });
+      }
+    }
+  };
+};
+
+module.exports.schema = [{
+  type: 'object'
+}];

tests/lib/rules/use-label-for.js

@@ -0,0 +1,44 @@
+/**
+ * @fileoverview Enforce label tags have htmlFor attribute.
+ * @author Ethan Cohen
+ */
+
+'use strict';
+
+// -----------------------------------------------------------------------------
+// Requirements
+// -----------------------------------------------------------------------------
+
+var rule = require('../../../lib/rules/use-label-for');
+var RuleTester = require('eslint').RuleTester;
+
+var parserOptions = {
+  ecmaVersion: 6,
+  ecmaFeatures: {
+    jsx: true
+  }
+};
+
+// -----------------------------------------------------------------------------
+// Tests
+// -----------------------------------------------------------------------------
+
+var ruleTester = new RuleTester();
+
+var expectedError = {
+  message: 'Form controls using a label to identify them must have only one label ' +
+    'that is programmatically associated with the control using: label for=[ID of control].',
+  type: 'JSXOpeningElement'
+};
+
+ruleTester.run('use-label-for', rule, {
+  valid: [
+    {code: '<label htmlFor="foo" />;', parserOptions: parserOptions},
+    {code: '<div />;', parserOptions: parserOptions},
+    {code: '<label htmlFor="foo">Test!</label>;', parserOptions: parserOptions}
+  ],
+  invalid: [
+    {code: '<label id="foo" />;', errors: [expectedError], parserOptions: parserOptions},
+    {code: '<label>First Name</label>', errors: [expectedError], parserOptions: parserOptions}
+  ]
+});