Add labelComponents option to form control has label

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.

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
 
 ```

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": {

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

@@ -1,31 +1,38 @@
 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(
   node:
     | 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" });
         }