Merge pull request #622 from vue-a11y/updates

Updates

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

package.json

@@ -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"

src/index.ts

@@ -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,

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" }]
+ }
  ]
 });

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;
  }
  }

src/rules/interactive-supports-focus.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 = {

src/rules/role-has-required-aria-props.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);
 }