Merge pull request #622 from vue-a11y/updates

Updates

Author: kddnewton

Diff for: docs/accessible-emoji.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: docs/form-control-has-label.md

@@ -27,25 +27,24 @@
     "eslint": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0"
   },
   "dependencies": {
-    "aria-query": "^5.0.0",
+    "aria-query": ">=5.0.0",
     "emoji-regex": "^10.0.0",
     "vue-eslint-parser": "^9.0.1"
   },
   "devDependencies": {
     "@types/aria-query": "^5.0.0",
     "@types/eslint-scope": "^3.7.2",
-    "@types/eslint-visitor-keys": "^3.3.0",
-    "@types/jest": "^27.0.0",
+    "@types/jest": "^29.2.0",
     "@types/node": "^18.0.0",
     "@typescript-eslint/eslint-plugin": "^5.10.2",
     "@typescript-eslint/parser": "^5.10.2",
     "eslint": "^8.8.0",
     "eslint-plugin-eslint-plugin": "^5.0.0",
     "husky": "^8.0.1",
-    "jest": "^27.4.5",
+    "jest": "^29.2.2",
     "prettier": "^2.1.1",
     "pretty-quick": "^3.1.3",
-    "ts-jest": "^27.1.2",
+    "ts-jest": "^29.0.3",
     "ts-node": "^10.3.0",
     "typescript": "^4.5.4"
   },
@@ -79,9 +78,6 @@
     }
   },
   "jest": {
-    "moduleNameMapper": {
-      "@eslint/eslintrc/universal": "@eslint/eslintrc/dist/eslintrc-universal.cjs"
-    },
     "preset": "ts-jest",
     "setupFilesAfterEnv": [
       "./jest.setup.ts"

Diff for: package.json

@@ -1,6 +1,5 @@
 import recommended from "./configs/recommended";
 
-import accessibleEmoji from "./rules/accessible-emoji";
 import altText from "./rules/alt-text";
 import anchorHasContent from "./rules/anchor-has-content";
 import ariaProps from "./rules/aria-props";
@@ -27,7 +26,6 @@ const plugin = {
     recommended
   },
   rules: {
-    "accessible-emoji": accessibleEmoji,
     "alt-text": altText,
     "anchor-has-content": anchorHasContent,
     "aria-props": ariaProps,

Diff for: src/index.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/__tests__/accessible-emoji.test.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;
           }
         }

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

@@ -1,6 +1,6 @@
 import type { Rule } from "eslint";
 import type { AST } from "vue-eslint-parser";
-import { ARIARoleDefintionKey, dom, roles } from "aria-query";
+import { ARIARoleDefinitionKey, dom, roles } from "aria-query";
 
 import {
   defineTemplateBodyVisitor,
@@ -15,7 +15,7 @@ import {
   makeDocsURL
 } from "../utils";
 
-const interactiveRoles: ARIARoleDefintionKey[] = [];
+const interactiveRoles: ARIARoleDefinitionKey[] = [];
 
 for (const [role, definition] of roles.entries()) {
   if (
@@ -97,7 +97,7 @@ function hasTabIndex(node: AST.VElement) {
 
 interface InteractiveSupportsFocus extends Rule.RuleModule {
   interactiveHandlers: string[];
-  interactiveRoles: ARIARoleDefintionKey[];
+  interactiveRoles: ARIARoleDefinitionKey[];
 }
 
 const rule: InteractiveSupportsFocus = {

Diff for: src/rules/accessible-emoji.ts

@@ -1,6 +1,6 @@
 import type { Rule } from "eslint";
 import type { AST } from "vue-eslint-parser";
-import { ARIARoleDefintionKey, dom, roles } from "aria-query";
+import { ARIARoleDefinitionKey, dom, roles } from "aria-query";
 
 import {
   defineTemplateBodyVisitor,
@@ -14,7 +14,7 @@ function hasAttributes(node: AST.VElement, names: string[]) {
   return names.every((name) => getElementAttribute(node, name) !== null);
 }
 
-function isAriaRoleDefinitionKey(role: any): role is ARIARoleDefintionKey {
+function isAriaRoleDefinitionKey(role: any): role is ARIARoleDefinitionKey {
   return roles.has(role);
 }