✨ Allow custom form controls in form-control-has-label

Closes vue-a11y#373

Author: vhoyer

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

@@ -21,7 +21,16 @@ makeRuleTester("form-control-has-label", rule, {
       <div aria-hidden="true">
         <input value="1" type="text" />
       </div>
-    `
+    `,
+    "<b-form-input />",
+  ],
+  invalid: [
+    "<input type='text' />",
+    "<textarea type='text'></textarea>",
+    {
+      code: "<div><b-form-input /></div>",
+      options: [{ controlComponents: ["b-form-input"] }],
+      errors: [{ messageId: "default" }],
+    },
   ],
-  invalid: ["<input type='text' />", "<textarea type='text'></textarea>"]
 });

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

@@ -37,13 +37,31 @@ const rule: Rule.RuleModule = {
     messages: {
       default:
         "Each form element must have a programmatically associated label element."
-    }
+    },
+    schema: [{
+      type: "object",
+      properties: {
+        controlComponents: {
+          type: "array",
+          items: {
+            type: "string",
+          },
+          uniqueItems: true,
+        },
+      },
+    }],
   },
   create(context) {
+    const {
+      controlComponents: customControlComponents = [],
+    } = context.options[0] || {};
+
+    const controlComponents = ["input", "textarea", ...customControlComponents];
+
     return defineTemplateBodyVisitor(context, {
       VElement(node) {
         const elementType = getElementType(node);
-        if (!["input", "textarea"].includes(elementType)) {
+        if (!controlComponents.includes(elementType)) {
           return;
         }