Custom form controls in form-control-has-label

Author: kddnewton

Diff for: docs/form-control-has-label.md

@@ -16,7 +16,8 @@ This rule takes one optional object argument of type object:
     "vuejs-accessibility/form-control-has-label": [
       "error",
       {
-        "labelComponents": ["CustomLabel"]
+        "labelComponents": ["CustomLabel"],
+        "controlComponents": ["CustomInput"]
       }
     ]
   }
@@ -25,6 +26,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 `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
 
 ```

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

@@ -25,11 +25,17 @@ makeRuleTester("form-control-has-label", rule, {
     {
       code: "<custom-label for='input'>text</custom-label><input type='text' id='input' />",
       options: [{ labelComponents: ["CustomLabel"] }]
-    }
+    },
+    "<b-form-input />"
   ],
   invalid: [
     "<input type='text' />",
     "<textarea type='text'></textarea>",
-    "<custom-label for='input'>text</custom-label><input type='text' id='input' />"
+    "<custom-label for='input'>text</custom-label><input type='text' id='input' />",
+    {
+      code: "<div><b-form-input /></div>",
+      options: [{ controlComponents: ["b-form-input"] }],
+      errors: [{ messageId: "default" }]
+    }
   ]
 });

Diff for: src/rules/form-control-has-label.ts

@@ -61,6 +61,13 @@ const rule: Rule.RuleModule = {
               type: "string"
             },
             uniqueItems: true
+          },
+          controlComponents: {
+            type: "array",
+            items: {
+              type: "string"
+            },
+            uniqueItems: true
           }
         }
       }
@@ -70,21 +77,23 @@ const rule: Rule.RuleModule = {
     return defineTemplateBodyVisitor(context, {
       VElement(node) {
         const options = context.options[0] || {};
-        const elementType = getElementType(node);
+        const controlComponents = [
+          "input",
+          "textarea",
+          "select",
+          ...(options.controlComponents || [])
+        ];
 
-        if (!["input", "textarea", "select"].includes(elementType)) {
+        const elementType = getElementType(node);
+        if (!controlComponents.includes(elementType)) {
           return;
         }
 
         if (elementType === "input") {
           const type = getElementAttributeValue(node, "type");
+          const types = ["hidden", "button", "image", "submit", "reset"];
 
-          if (
-            !type ||
-            ["hidden", "button", "image", "submit", "reset"].includes(
-              type as any
-            )
-          ) {
+          if (!type || types.includes(type as any)) {
             return;
           }
         }