From 901d3fea30ee1e6193b60fe2965041273859a123 Mon Sep 17 00:00:00 2001
From: Gavyn McKenzie <gavyn@etch.co>
Date: Fri, 12 Nov 2021 11:46:55 +0000
Subject: [PATCH 1/5] feat: add labelComponents option to form control has
 label

---
 CHANGELOG.md                        |  4 ++++
 docs/form-control-has-label.md      | 17 +++++++++++++++++
 package.json                        |  2 +-
 src/rules/form-control-has-label.ts | 25 +++++++++++++++++--------
 4 files changed, 39 insertions(+), 9 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3c75fd0d..39ab6d34 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/) a
 
 ## [Unreleased]
 
+### Added
+
+- `labelComponents` options to add custom label components in `form-control-has-label`
+
 ### Changed
 
 - Deprecate the accessible-emoji rule. See https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/issues/627 for details.
diff --git a/docs/form-control-has-label.md b/docs/form-control-has-label.md
index 2865efa4..11cc8f5c 100644
--- a/docs/form-control-has-label.md
+++ b/docs/form-control-has-label.md
@@ -8,6 +8,23 @@ _References:_
 
 ## Rule details
 
+This rule takes one optional object argument of type object:
+
+```json
+{
+  "rules": {
+    "vuejs-accessibility/form-control-has-label": [
+      "error",
+      {
+        "labelComponents": ["CustomLabel"],
+      }
+    ]
+  }
+}
+```
+
+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.
+
 ### Succeed
 
 ```
diff --git a/package.json b/package.json
index 6468a6c0..5458328f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-vuejs-accessibility",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "An eslint plugin for checking Vue.js files for accessibility",
   "main": "dist/index.js",
   "scripts": {
diff --git a/src/rules/form-control-has-label.ts b/src/rules/form-control-has-label.ts
index 770dfac2..b6122b01 100644
--- a/src/rules/form-control-has-label.ts
+++ b/src/rules/form-control-has-label.ts
@@ -1,13 +1,18 @@
 import type { Rule } from "eslint";
 import type { AST } from "vue-eslint-parser";
 
+interface FormControlHasLabelOptions {
+  labelComponents: string[];
+}
+
 import {
   defineTemplateBodyVisitor,
   getElementAttributeValue,
   getElementType,
   hasAriaLabel,
   isAriaHidden,
-  makeDocsURL
+  makeDocsURL,
+  makeKebabCase,
 } from "../utils";
 
 function isLabelElement(
@@ -15,17 +20,19 @@ function isLabelElement(
     | AST.VElement
     | AST.VDocumentFragment
     | AST.VText
-    | AST.VExpressionContainer
+    | AST.VExpressionContainer,
+  options: FormControlHasLabelOptions
 ) {
-  return node.type === "VElement" && getElementType(node) === "label";
+  const labelComponents = (options.labelComponents || []).map(makeKebabCase).concat("label");
+  return node.type === "VElement" && labelComponents.includes(getElementType(node));
 }
 
-function hasLabelElement(node: AST.VElement): boolean {
+function hasLabelElement(node: AST.VElement, options: FormControlHasLabelOptions): boolean {
   const { parent } = node;
 
   return (
-    [parent, ...parent.children].some(isLabelElement) ||
-    (parent && parent.type === "VElement" && hasLabelElement(parent))
+    [parent, ...parent.children].some((node) => isLabelElement(node, options)) ||
+    (parent && parent.type === "VElement" && hasLabelElement(parent, options))
   );
 }
 
@@ -42,8 +49,10 @@ const rule: Rule.RuleModule = {
   create(context) {
     return defineTemplateBodyVisitor(context, {
       VElement(node) {
+        const options = context.options[0] || {};
         const elementType = getElementType(node);
-        if (!["input", "textarea"].includes(elementType)) {
+
+        if (!["input", "textarea", "select"].includes(elementType)) {
           return;
         }
 
@@ -63,7 +72,7 @@ const rule: Rule.RuleModule = {
         if (
           !isAriaHidden(node) &&
           !hasAriaLabel(node) &&
-          !hasLabelElement(node)
+          !hasLabelElement(node, options)
         ) {
           context.report({ node: node as any, messageId: "default" });
         }

From c2bcae5e38d27548528a3a7b78e223fb6eb1d21e Mon Sep 17 00:00:00 2001
From: Gavyn McKenzie <gavyn@etch.co>
Date: Mon, 15 Nov 2021 09:58:53 +0000
Subject: [PATCH 2/5] feat: update schema for new labelComponents option

---
 src/rules/form-control-has-label.ts | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/rules/form-control-has-label.ts b/src/rules/form-control-has-label.ts
index b6122b01..b45a57f7 100644
--- a/src/rules/form-control-has-label.ts
+++ b/src/rules/form-control-has-label.ts
@@ -44,7 +44,21 @@ const rule: Rule.RuleModule = {
     messages: {
       default:
         "Each form element must have a programmatically associated label element."
-    }
+    },
+    schema: [
+      {
+        type: "object",
+        properties: {
+          labelComponents: {
+            type: "array",
+            items: {
+              type: "string"
+            },
+            uniqueItems: true
+          }
+        }
+      }
+    ]
   },
   create(context) {
     return defineTemplateBodyVisitor(context, {

From f843307fc1f2db5f1f1959aa378d96b78123befe Mon Sep 17 00:00:00 2001
From: Gavyn McKenzie <gavyn@etch.co>
Date: Mon, 15 Nov 2021 10:01:03 +0000
Subject: [PATCH 3/5] refactor: provide a default labelComponents empty array

---
 src/rules/form-control-has-label.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/rules/form-control-has-label.ts b/src/rules/form-control-has-label.ts
index b45a57f7..5406abe9 100644
--- a/src/rules/form-control-has-label.ts
+++ b/src/rules/form-control-has-label.ts
@@ -21,10 +21,10 @@ function isLabelElement(
     | AST.VDocumentFragment
     | AST.VText
     | AST.VExpressionContainer,
-  options: FormControlHasLabelOptions
+  { labelComponents = [] }: FormControlHasLabelOptions
 ) {
-  const labelComponents = (options.labelComponents || []).map(makeKebabCase).concat("label");
-  return node.type === "VElement" && labelComponents.includes(getElementType(node));
+  const allLabelComponents = labelComponents.map(makeKebabCase).concat("label");
+  return node.type === "VElement" && allLabelComponents.includes(getElementType(node));
 }
 
 function hasLabelElement(node: AST.VElement, options: FormControlHasLabelOptions): boolean {

From 880f5f58ea4594eba7c9bfb1c70b3ffdf21879ba Mon Sep 17 00:00:00 2001
From: Gavyn McKenzie <gavyn@etch.co>
Date: Mon, 15 Nov 2021 11:54:46 +0000
Subject: [PATCH 4/5] refactor: use isMAtchingElement

---
 src/rules/form-control-has-label.ts |  6 +++---
 src/utils.ts                        |  1 +
 src/utils/isMatchingElement.ts      | 23 +++++++++++++++++++++++
 3 files changed, 27 insertions(+), 3 deletions(-)
 create mode 100644 src/utils/isMatchingElement.ts

diff --git a/src/rules/form-control-has-label.ts b/src/rules/form-control-has-label.ts
index 5406abe9..0516dc48 100644
--- a/src/rules/form-control-has-label.ts
+++ b/src/rules/form-control-has-label.ts
@@ -11,8 +11,8 @@ import {
   getElementType,
   hasAriaLabel,
   isAriaHidden,
+  isMatchingElement,
   makeDocsURL,
-  makeKebabCase,
 } from "../utils";
 
 function isLabelElement(
@@ -23,8 +23,8 @@ function isLabelElement(
     | AST.VExpressionContainer,
   { labelComponents = [] }: FormControlHasLabelOptions
 ) {
-  const allLabelComponents = labelComponents.map(makeKebabCase).concat("label");
-  return node.type === "VElement" && allLabelComponents.includes(getElementType(node));
+  const allLabelComponents = labelComponents.concat("label");
+  return isMatchingElement(node, allLabelComponents);
 }
 
 function hasLabelElement(node: AST.VElement, options: FormControlHasLabelOptions): boolean {
diff --git a/src/utils.ts b/src/utils.ts
index 55bf2921..7e2a25da 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -14,6 +14,7 @@ export { default as isAriaHidden } from "./utils/isAriaHidden";
 export { default as isAttribute } from "./utils/isAttribute";
 export { default as isHiddenFromScreenReader } from "./utils/isHiddenFromScreenReader";
 export { default as isInteractiveElement } from "./utils/isInteractiveElement";
+export { default as isMatchingElement } from "./utils/isMatchingElement";
 export { default as isPresentationRole } from "./utils/isPresentationRole";
 export { default as makeDocsURL } from "./utils/makeDocsURL";
 export { default as makeKebabCase } from "./utils/makeKebabCase";
diff --git a/src/utils/isMatchingElement.ts b/src/utils/isMatchingElement.ts
new file mode 100644
index 00000000..c10ecd7d
--- /dev/null
+++ b/src/utils/isMatchingElement.ts
@@ -0,0 +1,23 @@
+import type { AST } from "vue-eslint-parser";
+
+import getElementType from "./getElementType";
+import makeKebabCase from "./makeKebabCase";
+
+function isMatchingElement(
+  node:
+  | AST.VElement
+  | AST.VDocumentFragment
+  | AST.VText
+  | AST.VExpressionContainer, 
+  searchArray: string[]
+) {
+  if (!(node.type === "VElement")) return false;
+
+  const elementType = getElementType(node);
+  
+  return searchArray.some((item: string) => {
+    return makeKebabCase(item) === elementType;
+  });
+}
+
+export default isMatchingElement;
\ No newline at end of file

From 262d21e6208ed4a8c2719b67584605f0c560b74a Mon Sep 17 00:00:00 2001
From: Gavyn McKenzie <gavyn@etch.co>
Date: Mon, 15 Nov 2021 12:40:44 +0000
Subject: [PATCH 5/5] test: add tests for custom label elements

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

diff --git a/package.json b/package.json
index 5458328f..6468a6c0 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-vuejs-accessibility",
-  "version": "1.2.0",
+  "version": "1.1.0",
   "description": "An eslint plugin for checking Vue.js files for accessibility",
   "main": "dist/index.js",
   "scripts": {
diff --git a/src/rules/__tests__/form-control-has-label.test.ts b/src/rules/__tests__/form-control-has-label.test.ts
index 25c1d0f9..66e06c2a 100644
--- a/src/rules/__tests__/form-control-has-label.test.ts
+++ b/src/rules/__tests__/form-control-has-label.test.ts
@@ -21,7 +21,15 @@ makeRuleTester("form-control-has-label", rule, {
       <div aria-hidden="true">
         <input value="1" type="text" />
       </div>
-    `
+    `,
+    {
+      code: "<custom-label for='input'>text</custom-label><input type='text' id='input' />",
+      options: [{ labelComponents: ["CustomLabel"] }]
+    },
   ],
-  invalid: ["<input type='text' />", "<textarea type='text'></textarea>"]
+  invalid: [
+    "<input type='text' />", 
+    "<textarea type='text'></textarea>",
+    "<custom-label for='input'>text</custom-label><input type='text' id='input' />"
+  ]
 });