Merge pull request #27 from vue-a11y/label-has-for-nesting

For the `label-has-for` rule, validate proper nesting

Author: kddnewton

CHANGELOG.md

@@ -9,6 +9,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/) a
 ### Changed
 
 - For the `anchor-has-content` rule, allow anchors with explicit aria labels to pass.
+- For the `label-has-for` rule when validating that there is correct nesting, ensure that we're actually checking for form controls and not just checking for VElement nodes.
 
 ## [0.2.0] - 2020-06-26
 

src/rules/__tests__/label-has-for.test.js

@@ -5,18 +5,21 @@ makeRuleTester("label-has-for", rule, {
   valid: [
     "<label for='id'><input type='text' /></label>",
     "<label :for='id'><input type='text' :id='id' /></label>",
+    "<label for='id'><span><input type='text' /></span></label>",
     {
       code: "<label for='id' /><input type='text' />",
       options: [{ required: { some: ["nesting", "id"] } }]
     },
     {
-      code: "<label>name</label>",
-      options: [{ required: { some: ["nesting", "id"] }, allowChildren: true }]
+      code: "<label for='id'><slot /></label>",
+      options: [{ allowChildren: true }]
     }
   ],
   invalid: [
     "<label for='id' />",
     "<label><input type='text' /></label>",
+    "<label for='id'><slot /></label>",
+    "<label for='id'><div /></label>",
     {
       code: "<Label for='id' />",
       options: [{ components: ["Label"] }],

src/rules/label-has-for.js

@@ -2,20 +2,38 @@ const {
   defineTemplateBodyVisitor,
   getElementAttributeValue,
   getElementType,
-  hasAccessibleChild,
+  isHiddenFromScreenReader,
   makeDocsURL
 } = require("../utils");
 
-const validate = (node, rule, allowChildren) => {
-  if (allowChildren === true) {
-    return hasAccessibleChild(node);
-  }
+const controlTypes = ["input", "meter", "progress", "select", "textarea"];
 
-  if (rule === "nesting") {
-    return node.children.some((child) => child.type === "VElement");
-  }
+const validateNesting = (node, allowChildren) =>
+  node.children.some((child) => {
+    if (child.rawName === "slot") {
+      return allowChildren;
+    }
+
+    if (child.type === "VElement") {
+      return (
+        !isHiddenFromScreenReader(child) &&
+        (controlTypes.includes(getElementType(child)) ||
+          validateNesting(child, allowChildren))
+      );
+    }
 
-  return getElementAttributeValue(node, "for");
+    return false;
+  });
+
+const validate = (node, rule, allowChildren) => {
+  switch (rule) {
+    case "nesting":
+      return validateNesting(node, allowChildren);
+    case "id":
+      return getElementAttributeValue(node, "for");
+    default:
+      return false;
+  }
 };
 
 const isValidLabel = (node, required, allowChildren) => {