From 8126ee12b340a180446bcaa1bccbd03b57e97497 Mon Sep 17 00:00:00 2001
From: Lars van Hijfte <larsvanhijfte@hotmail.com>
Date: Wed, 28 Dec 2022 14:17:43 +0100
Subject: [PATCH 1/4] Added the ability to specify label components that
 include label

---
 .../__tests__/form-control-has-label.test.ts     | 16 +++++++++++++++-
 src/rules/form-control-has-label.ts              | 12 ++++++++++--
 2 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/src/rules/__tests__/form-control-has-label.test.ts b/src/rules/__tests__/form-control-has-label.test.ts
index 2442afd3..9209b352 100644
--- a/src/rules/__tests__/form-control-has-label.test.ts
+++ b/src/rules/__tests__/form-control-has-label.test.ts
@@ -26,6 +26,10 @@ makeRuleTester("form-control-has-label", rule, {
       code: "<custom-label for='input'>text</custom-label><input type='text' id='input' />",
       options: [{ labelComponents: ["CustomLabel"] }]
     },
+    {
+      code: "<custom-label label='input'>text</custom-label><input type='text' id='input' />",
+      options: [{ labelComponentsWithLabel: ["CustomLabel"] }]
+    },
     "<b-form-input />"
   ],
   invalid: [
@@ -36,6 +40,16 @@ makeRuleTester("form-control-has-label", rule, {
       code: "<div><b-form-input /></div>",
       options: [{ controlComponents: ["b-form-input"] }],
       errors: [{ messageId: "default" }]
-    }
+    },
+    {
+      code: "<div aria-label='text'><b-form-input /></div>",
+      options: [{ controlComponents: ["b-form-input"] }],
+      errors: [{ messageId: "default" }]
+    },
+    {
+      code: "<custom-label>text</custom-label><input type='text' id='input' />",
+      options: [{ labelComponentsWithLabel: ["CustomLabel"] }],
+      errors: [{ messageId: "default" }]
+    },
   ]
 });
diff --git a/src/rules/form-control-has-label.ts b/src/rules/form-control-has-label.ts
index 9b147400..b79565b6 100644
--- a/src/rules/form-control-has-label.ts
+++ b/src/rules/form-control-has-label.ts
@@ -3,6 +3,7 @@ import type { AST } from "vue-eslint-parser";
 
 interface FormControlHasLabelOptions {
   labelComponents: string[];
+  labelComponentsWithLabel: string[];
 }
 
 import {
@@ -21,10 +22,17 @@ function isLabelElement(
     | AST.VDocumentFragment
     | AST.VText
     | AST.VExpressionContainer,
-  { labelComponents = [] }: FormControlHasLabelOptions
+  { labelComponents = [], labelComponentsWithLabel = [] }: FormControlHasLabelOptions
 ) {
+  if (!(node.type === "VElement")) return false;
   const allLabelComponents = labelComponents.concat("label");
-  return isMatchingElement(node, allLabelComponents);
+  return (
+    isMatchingElement(node, allLabelComponents)
+    || (
+      isMatchingElement(node, labelComponentsWithLabel)
+      && (hasAriaLabel(node) || getElementAttributeValue(node, "label"))
+    )
+  );
 }
 
 function hasLabelElement(

From b0406e3a03b2ed066b28b0607bc5841fbabd4539 Mon Sep 17 00:00:00 2001
From: Lars van Hijfte <larsvanhijfte@hotmail.com>
Date: Wed, 28 Dec 2022 14:35:14 +0100
Subject: [PATCH 2/4] Improved and fixed tests

---
 .../__tests__/form-control-has-label.test.ts  | 11 +++++++---
 src/rules/form-control-has-label.ts           | 21 +++++++++++--------
 2 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/src/rules/__tests__/form-control-has-label.test.ts b/src/rules/__tests__/form-control-has-label.test.ts
index 9209b352..86f8697c 100644
--- a/src/rules/__tests__/form-control-has-label.test.ts
+++ b/src/rules/__tests__/form-control-has-label.test.ts
@@ -27,7 +27,7 @@ makeRuleTester("form-control-has-label", rule, {
       options: [{ labelComponents: ["CustomLabel"] }]
     },
     {
-      code: "<custom-label label='input'>text</custom-label><input type='text' id='input' />",
+      code: "<custom-label label='text'><input type='text' id='input' /></custom-label>",
       options: [{ labelComponentsWithLabel: ["CustomLabel"] }]
     },
     "<b-form-input />"
@@ -42,12 +42,17 @@ makeRuleTester("form-control-has-label", rule, {
       errors: [{ messageId: "default" }]
     },
     {
-      code: "<div aria-label='text'><b-form-input /></div>",
+      code: "<div label='text'><b-form-input /></div>",
       options: [{ controlComponents: ["b-form-input"] }],
       errors: [{ messageId: "default" }]
     },
     {
-      code: "<custom-label>text</custom-label><input type='text' id='input' />",
+      code: "<custom-label><input type='text' id='input' /></custom-label>",
+      options: [{ labelComponentsWithLabel: ["CustomLabel"] }],
+      errors: [{ messageId: "default" }]
+    },
+    {
+      code: "<custom-label label='text'>label next to input</custom-label><input type='text' id='input' />",
       options: [{ labelComponentsWithLabel: ["CustomLabel"] }],
       errors: [{ messageId: "default" }]
     },
diff --git a/src/rules/form-control-has-label.ts b/src/rules/form-control-has-label.ts
index b79565b6..a5e89a10 100644
--- a/src/rules/form-control-has-label.ts
+++ b/src/rules/form-control-has-label.ts
@@ -22,16 +22,19 @@ function isLabelElement(
     | AST.VDocumentFragment
     | AST.VText
     | AST.VExpressionContainer,
-  { labelComponents = [], labelComponentsWithLabel = [] }: FormControlHasLabelOptions
+  { labelComponents = [] }: FormControlHasLabelOptions
 ) {
-  if (!(node.type === "VElement")) return false;
   const allLabelComponents = labelComponents.concat("label");
-  return (
-    isMatchingElement(node, allLabelComponents)
-    || (
-      isMatchingElement(node, labelComponentsWithLabel)
-      && (hasAriaLabel(node) || getElementAttributeValue(node, "label"))
-    )
+  return isMatchingElement(node, allLabelComponents);
+}
+
+function isElementWithLabel(
+  node: | AST.VElement,
+  { labelComponentsWithLabel = [] }: FormControlHasLabelOptions
+) {
+  return Boolean(
+    isMatchingElement(node, labelComponentsWithLabel)
+    && (hasAriaLabel(node) || getElementAttributeValue(node, "label"))
   );
 }
 
@@ -45,7 +48,7 @@ function hasLabelElement(
     [parent, ...parent.children].some((node) =>
       isLabelElement(node, options)
     ) ||
-    (parent && parent.type === "VElement" && hasLabelElement(parent, options))
+    (parent && parent.type === "VElement" && (isElementWithLabel(parent, options) || hasLabelElement(parent, options)))
   );
 }
 

From 11b955749bc73ae882dcf21479907ea725ee0f5b Mon Sep 17 00:00:00 2001
From: Lars van Hijfte <larsvanhijfte@hotmail.com>
Date: Wed, 28 Dec 2022 14:35:34 +0100
Subject: [PATCH 3/4] Added doc information

---
 docs/form-control-has-label.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/docs/form-control-has-label.md b/docs/form-control-has-label.md
index 82a03f89..a53ef618 100644
--- a/docs/form-control-has-label.md
+++ b/docs/form-control-has-label.md
@@ -16,6 +16,7 @@ This rule takes one optional object argument of type object:
     "vuejs-accessibility/form-control-has-label": [
       "error",
       {
+        "labelComponentsWithLabel": ["CustomComponentWithLabelAttribute"],
         "labelComponents": ["CustomLabel"],
         "controlComponents": ["CustomInput"]
       }
@@ -26,6 +27,8 @@ This rule takes one optional object argument of type object:
 
 For the `labelComponents` option, these strings determine which elements (**always including** `<label>`) should be checked for having the `for` prop. This is a good use case when you have a wrapper component that simply renders a `label` element.
 
+For the `labelComponentsWithLabel` option, these strings determine which elements should be checked for having a `label` or `aria-label` prop. This is a good use case when you have a wrapper component that renders a `label` element when provided.
+
 For the `controlComponents` option, these strings determine which elements (**always including** `<input>`, `<textarea>` and `<select>`) should be checked for having an associated label. This is a good use case when you have a wrapper component that simply renders an input element.
 
 ### Succeed

From 2b4a5ff1e7666934ff501270c0d5431f8894ad11 Mon Sep 17 00:00:00 2001
From: Lars van Hijfte <larsvanhijfte@hotmail.com>
Date: Sun, 15 Jan 2023 13:25:45 +0100
Subject: [PATCH 4/4] Fixed requested changes

---
 docs/form-control-has-label.md                | 10 ++--
 .../__tests__/form-control-has-label.test.ts  | 52 ++++++++++++++++---
 src/rules/form-control-has-label.ts           | 47 +++++++++++++----
 3 files changed, 90 insertions(+), 19 deletions(-)

diff --git a/docs/form-control-has-label.md b/docs/form-control-has-label.md
index a53ef618..443b5d8c 100644
--- a/docs/form-control-has-label.md
+++ b/docs/form-control-has-label.md
@@ -16,8 +16,12 @@ This rule takes one optional object argument of type object:
     "vuejs-accessibility/form-control-has-label": [
       "error",
       {
-        "labelComponentsWithLabel": ["CustomComponentWithLabelAttribute"],
-        "labelComponents": ["CustomLabel"],
+        "labelComponents": [
+          "CustomLabel",
+        ],
+        "labelComponentsWithRequiredAttributes": [
+          { "name": "CustomComponentWithRequiredAttribute", "requiredAttributes": ["label"] },
+        ]
         "controlComponents": ["CustomInput"]
       }
     ]
@@ -27,7 +31,7 @@ This rule takes one optional object argument of type object:
 
 For the `labelComponents` option, these strings determine which elements (**always including** `<label>`) should be checked for having the `for` prop. This is a good use case when you have a wrapper component that simply renders a `label` element.
 
-For the `labelComponentsWithLabel` option, these strings determine which elements should be checked for having a `label` or `aria-label` prop. This is a good use case when you have a wrapper component that renders a `label` element when provided.
+For the `labelComponentsWithRequiredAttributes` option, these objects determine which elements should be checked for having a value for any of the `requiredAttributes` as an attribute. This is a good use case when you have a wrapper component that renders a `label` element when a specific attribute is provided.
 
 For the `controlComponents` option, these strings determine which elements (**always including** `<input>`, `<textarea>` and `<select>`) should be checked for having an associated label. This is a good use case when you have a wrapper component that simply renders an input element.
 
diff --git a/src/rules/__tests__/form-control-has-label.test.ts b/src/rules/__tests__/form-control-has-label.test.ts
index 86f8697c..437d49d5 100644
--- a/src/rules/__tests__/form-control-has-label.test.ts
+++ b/src/rules/__tests__/form-control-has-label.test.ts
@@ -28,7 +28,37 @@ makeRuleTester("form-control-has-label", rule, {
     },
     {
       code: "<custom-label label='text'><input type='text' id='input' /></custom-label>",
-      options: [{ labelComponentsWithLabel: ["CustomLabel"] }]
+      options: [{
+        labelComponentsWithRequiredAttributes: [
+          { name: "CustomLabel", requiredAttributes: ["label"] },
+        ],
+      }]
+    },
+    {
+      code: `
+        <custom-label label='text'><input type='text' id='input' /></custom-label>
+        <custom-label-other><input type='text' id='input' /></custom-label-other>
+      `,
+      options: [{
+        labelComponents: [
+          "CustomLabelOther",
+        ],
+        labelComponentsWithRequiredAttributes: [
+          { name: "CustomLabel", requiredAttributes: ["label"] },
+        ],
+      }]
+    },
+    {
+      code: "<custom-label label='text' id='id' for='bla'><input type='text' id='input' /></custom-label>",
+      options: [{
+        labelComponentsWithRequiredAttributes: [
+          { name: "CustomLabel", requiredAttributes: ["label", "id", "for"] },
+        ],
+      }]
+    },
+    {
+      code: "<custom-label><input type='text' id='input' /></custom-label>",
+      options: [{ labelComponents: ["CustomLabel"] }]
     },
     "<b-form-input />"
   ],
@@ -37,23 +67,31 @@ makeRuleTester("form-control-has-label", rule, {
     "<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"] }],
+      code: "<custom-label><input type='text' id='input' /></custom-label>",
+      options: [{
+        labelComponentsWithRequiredAttributes: [
+          { name: "CustomLabel", requiredAttributes: ["label"] },
+        ],
+      }],
       errors: [{ messageId: "default" }]
     },
     {
-      code: "<div label='text'><b-form-input /></div>",
+      code: "<div><b-form-input /></div>",
       options: [{ controlComponents: ["b-form-input"] }],
       errors: [{ messageId: "default" }]
     },
     {
-      code: "<custom-label><input type='text' id='input' /></custom-label>",
-      options: [{ labelComponentsWithLabel: ["CustomLabel"] }],
+      code: "<div label='text'><b-form-input /></div>",
+      options: [{ controlComponents: ["b-form-input"] }],
       errors: [{ messageId: "default" }]
     },
     {
       code: "<custom-label label='text'>label next to input</custom-label><input type='text' id='input' />",
-      options: [{ labelComponentsWithLabel: ["CustomLabel"] }],
+      options: [{
+        labelComponentsWithRequiredAttributes: [
+          { name: "CustomLabel", requiredAttributes: ["label"] },
+        ],
+      }],
       errors: [{ messageId: "default" }]
     },
   ]
diff --git a/src/rules/form-control-has-label.ts b/src/rules/form-control-has-label.ts
index a5e89a10..b0799ecf 100644
--- a/src/rules/form-control-has-label.ts
+++ b/src/rules/form-control-has-label.ts
@@ -1,9 +1,14 @@
 import type { Rule } from "eslint";
 import type { AST } from "vue-eslint-parser";
 
+interface LabelComponentsRequiredAttributes {
+  name: string;
+  requiredAttributes: string[];
+}
+
 interface FormControlHasLabelOptions {
   labelComponents: string[];
-  labelComponentsWithLabel: string[];
+  labelComponentsWithRequiredAttributes: LabelComponentsRequiredAttributes[];
 }
 
 import {
@@ -24,18 +29,20 @@ function isLabelElement(
     | AST.VExpressionContainer,
   { labelComponents = [] }: FormControlHasLabelOptions
 ) {
-  const allLabelComponents = labelComponents.concat("label");
+  const allLabelComponents: string[] = labelComponents.concat("label");
   return isMatchingElement(node, allLabelComponents);
 }
 
-function isElementWithLabel(
+function isLabelElementWithRequiredAttributes(
   node: | AST.VElement,
-  { labelComponentsWithLabel = [] }: FormControlHasLabelOptions
+  { labelComponentsWithRequiredAttributes = [] }: FormControlHasLabelOptions
 ) {
-  return Boolean(
-    isMatchingElement(node, labelComponentsWithLabel)
-    && (hasAriaLabel(node) || getElementAttributeValue(node, "label"))
-  );
+  return labelComponentsWithRequiredAttributes.some((component) => (
+    isMatchingElement(node, [component.name]) &&
+    component.requiredAttributes.some(
+      (attr) => getElementAttributeValue(node, attr)
+    )
+  ));
 }
 
 function hasLabelElement(
@@ -48,7 +55,13 @@ function hasLabelElement(
     [parent, ...parent.children].some((node) =>
       isLabelElement(node, options)
     ) ||
-    (parent && parent.type === "VElement" && (isElementWithLabel(parent, options) || hasLabelElement(parent, options)))
+    (
+      parent && parent.type === "VElement" &&
+      (
+        isLabelElementWithRequiredAttributes(parent, options) ||
+        hasLabelElement(parent, options)
+      )
+    )
   );
 }
 
@@ -73,6 +86,22 @@ const rule: Rule.RuleModule = {
             },
             uniqueItems: true
           },
+          labelComponentsWithRequiredAttributes: {
+            type: "array",
+            items: {
+              type: "object",
+              properties: {
+                name: {
+                  type: "string",
+                },
+                requiredAttributes: {
+                  type: "array",
+                  items: { type: "string" }
+                },
+              }
+            },
+            uniqueItems: true
+          },
           controlComponents: {
             type: "array",
             items: {