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

Closes #373
vue-a11y · Jan 25, 2022 · 7c2ac4b · 7c2ac4b
1 parent 83d8f05
commit 7c2ac4b
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 4 deletions.
diff --git a/src/rules/__tests__/form-control-has-label.test.ts b/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>"]
+  invalid: [
+    "<input type='text' />",
+    "<textarea type='text'></textarea>",
+    {
+      code: "<div><b-form-input /></div>",
+      options: [{ controlComponents: ["b-form-input"] }],
+      errors: [{ messageId: "default" }]
+    }
+  ]
 });
diff --git a/src/rules/form-control-has-label.ts b/src/rules/form-control-has-label.ts
@@ -39,13 +39,31 @@ const rule: Rule.RuleModule = {
       default:
         "Each form element must have a programmatically associated label element."
     },
-    schema: []
+    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;
         }