Form control has label 924

src/rules/__tests__/form-control-has-label.test.ts

@@ -5,8 +5,22 @@ makeRuleTester("form-control-has-label", rule, {
   valid: [
     "<label for=''><input type='text' /></label>",
     "<input type='text' aria-label='test' />",
-    "<label for=''>text</label><input type='text' />",
     "<input type='button'>",
+    `
+      <div class="checkbox">
+        <label for="check">I agree</label>
+        <input id="check" type="checkbox" />
+      </div>
+    `,
+    `
+      <div class="checkbox">
+        <input id="myCheckbox" type="checkbox" aria-describedby="myCheckboxInfo" />
+        <div class="checkbox-label">
+          <label for="myCheckbox">I agree</label>
+          <p id="myCheckboxInfo">Here is some extra info what I agree upon</p>
+        </div>
+      </div>
+    `,
     `
       <label>
         <div>
@@ -29,9 +43,15 @@ makeRuleTester("form-control-has-label", rule, {
     "<b-form-input />"
   ],
   invalid: [
+    "<label for=''>text</label><input type='text' />",
+    `
+      <div class="checkbox">
+        <input type="checkbox" />
+        <label>I agree</label>
+      </div>
+    `,
     "<input type='text' />",
     "<textarea type='text'></textarea>",
-    "<custom-label for='input'>text</custom-label><input type='text' id='input' />",
     {
       code: "<div><b-form-input /></div>",
       options: [{ controlComponents: ["b-form-input"] }],

src/rules/form-control-has-label.ts

@@ -27,20 +27,34 @@ function isLabelElement(
   return isMatchingElement(node, allLabelComponents);
 }
 
-function hasLabelElement(
+function hasNestedLabelElement(
   node: AST.VElement,
   options: FormControlHasLabelOptions
 ): boolean {
   const { parent } = node;
 
+  if (isLabelElement(parent, options)) {
+    return true;
+  }
+
   return (
-    [parent, ...parent.children].some((node) =>
-      isLabelElement(node, options)
-    ) ||
-    (parent && parent.type === "VElement" && hasLabelElement(parent, options))
+    parent &&
+    parent.type === "VElement" &&
+    hasNestedLabelElement(parent, options)
   );
 }
 
+/**
+ * Check if the form control at least has an "id" to be associated with a label
+ * Can't really check for the label with a matching "for" attribute, because
+ * checking every element in the file may lead to bad performance.
+ */
+function hasIdForLabelElement(node: AST.VElement): boolean {
+  const id = getElementAttributeValue(node, "id");
+
+  return Boolean(id);
+}
+
 const rule: Rule.RuleModule = {
   meta: {
     type: "problem",
@@ -81,6 +95,9 @@ const rule: Rule.RuleModule = {
           "input",
           "textarea",
           "select",
+          "meter",
+          "output",
+          "progress",
           ...(options.controlComponents || [])
         ];
 
@@ -101,7 +118,8 @@ const rule: Rule.RuleModule = {
         if (
           !isAriaHidden(node) &&
           !hasAriaLabel(node) &&
-          !hasLabelElement(node, options)
+          !hasNestedLabelElement(node, options) &&
+          !hasIdForLabelElement(node)
         ) {
           context.report({ node: node as any, messageId: "default" });
         }

tsconfig.json

@@ -1,7 +1,8 @@
 {
   "compilerOptions": {
+    "moduleResolution": "nodenext",
+    "module": "nodenext",
     "target": "es2019",
-    "module": "commonjs",
     "strict": true,
     "esModuleInterop": true,
     "resolveJsonModule": true,