├── .eslintignore
├── .npmignore
├── __tests__
    └── integrations
    │   ├── __fixtures__
    │       ├── flat-config
    │       │   ├── .npmrc
    │       │   ├── a.vue
    │       │   ├── eslint.config.js
    │       │   └── package.json
    │       └── legacy-config
    │       │   ├── .npmrc
    │       │   ├── a.vue
    │       │   ├── package.json
    │       │   └── .eslintrc.json
    │   ├── helper.ts
    │   ├── flat-config.spec.ts
    │   └── legacy-config.spec.ts
├── .gitignore
├── .prettierignore
├── src
    ├── utils
    │   ├── makeDocsURL.ts
    │   ├── makeKebabCase.ts
    │   ├── hasOnDirectives.ts
    │   ├── isPresentationRole.ts
    │   ├── hasAriaLabel.ts
    │   ├── isAriaHidden.ts
    │   ├── interactiveHandlers.json
    │   ├── getElementAttributeValue.ts
    │   ├── isAttribute.ts
    │   ├── isInteractiveRole.ts
    │   ├── getAttributeName.ts
    │   ├── getInteractiveRoles.ts
    │   ├── isHiddenFromScreenReader.ts
    │   ├── isMatchingElement.ts
    │   ├── getElementAttribute.ts
    │   ├── isCustomComponent.ts
    │   ├── hasFocusableElement.ts
    │   ├── hasOnDirective.ts
    │   ├── getLiteralAttributeValue.ts
    │   ├── getElementType.ts
    │   ├── getAttributeValue.ts
    │   ├── hasAccessibleChild.ts
    │   ├── __tests__
    │   │   └── defineTemplateBodyVisitor.test.ts
    │   ├── matchesElementRole.ts
    │   ├── isInteractiveElement.ts
    │   ├── defineTemplateBodyVisitor.ts
    │   ├── htmlElements.json
    │   └── hasContent.ts
    ├── rules
    │   ├── __tests__
    │   │   ├── no-access-key.test.ts
    │   │   ├── no-onchange.test.ts
    │   │   ├── iframe-has-title.test.ts
    │   │   ├── aria-props.test.ts
    │   │   ├── aria-unsupported-elements.test.ts
    │   │   ├── aria-role.test.ts
    │   │   ├── no-autofocus.test.ts
    │   │   ├── tabindex-no-positive.test.ts
    │   │   ├── no-distracting-elements.test.ts
    │   │   ├── no-redundant-roles.test.ts
    │   │   ├── mouse-events-have-key-events.test.ts
    │   │   ├── heading-has-content.test.ts
    │   │   ├── anchor-has-content.test.ts
    │   │   ├── no-aria-hidden-on-focusable.test.ts
    │   │   ├── no-role-presentation-on-focusable.test.ts
    │   │   ├── role-has-required-aria-props.test.ts
    │   │   ├── label-has-for.test.ts
    │   │   ├── makeRuleTester.ts
    │   │   ├── alt-text.test.ts
    │   │   ├── click-events-have-key-events.test.ts
    │   │   ├── form-control-has-label.test.ts
    │   │   ├── no-static-element-interactions.test.ts
    │   │   ├── media-has-caption.test.ts
    │   │   └── interactive-supports-focus.test.ts
    │   ├── no-access-key.ts
    │   ├── tabindex-no-positive.ts
    │   ├── no-aria-hidden-on-focusable.ts
    │   ├── no-onchange.ts
    │   ├── iframe-has-title.ts
    │   ├── no-role-presentation-on-focusable.ts
    │   ├── aria-props.ts
    │   ├── click-events-have-key-events.ts
    │   ├── aria-unsupported-elements.ts
    │   ├── no-autofocus.ts
    │   ├── mouse-events-have-key-events.ts
    │   ├── no-distracting-elements.ts
    │   ├── no-static-element-interactions.ts
    │   ├── aria-role.ts
    │   ├── anchor-has-content.ts
    │   ├── heading-has-content.ts
    │   ├── media-has-caption.ts
    │   ├── no-redundant-roles.ts
    │   ├── role-has-required-aria-props.ts
    │   ├── form-control-has-label.ts
    │   ├── alt-text.ts
    │   ├── interactive-supports-focus.ts
    │   └── label-has-for.ts
    ├── configs
    │   ├── recommended.ts
    │   ├── flat
    │   │   └── recommended.ts
    │   └── rules.ts
    ├── utils.ts
    └── index.ts
├── tsconfig.build.json
├── .github
    ├── dependabot.yml
    └── workflows
    │   ├── main.yml
    │   ├── auto-merge.yml
    │   └── docs.yml
├── docs
    ├── rule-overview
    │   ├── index.md
    │   ├── RuleTable.vue
    │   └── rule-overview.data.mts
    ├── rules
    │   ├── aria-props.md
    │   ├── iframe-has-title.md
    │   ├── mouse-events-have-key-events.md
    │   ├── click-events-have-key-events.md
    │   ├── aria-unsupported-elements.md
    │   ├── tabindex-no-positive.md
    │   ├── role-has-required-aria-props.md
    │   ├── no-access-key.md
    │   ├── no-autofocus.md
    │   ├── aria-role.md
    │   ├── no-redundant-roles.md
    │   ├── no-distracting-elements.md
    │   ├── no-onchange.md
    │   ├── form-control-has-label.md
    │   ├── media-has-caption.md
    │   ├── no-aria-hidden-on-focusable.md
    │   ├── no-role-presentation-on-focusable.md
    │   ├── heading-has-content.md
    │   ├── anchor-has-content.md
    │   ├── label-has-for.md
    │   ├── no-static-element-interactions.md
    │   ├── alt-text.md
    │   └── interactive-supports-focus.md
    ├── .vitepress
    │   ├── rulesForSidebar.ts
    │   └── config.mts
    └── index.md
├── tsconfig.json
├── jest.setup.ts
├── bin
    └── lint.ts
├── LICENSE
├── README.md
├── package.json
├── CODE_OF_CONDUCT.md
└── CHANGELOG.md


/.eslintignore:
--------------------------------------------------------------------------------
1 | __fixtures__/
2 | dist/
3 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | .*
2 | bin/
3 | docs/
4 | src/
5 | jest.setup.ts
6 | 


--------------------------------------------------------------------------------
/__tests__/integrations/__fixtures__/flat-config/.npmrc:
--------------------------------------------------------------------------------
1 | package-lock=false
2 | 


--------------------------------------------------------------------------------
/__tests__/integrations/__fixtures__/legacy-config/.npmrc:
--------------------------------------------------------------------------------
1 | package-lock=false
2 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | /.eslintcache
2 | /.husky/
3 | /.idea/
4 | /dist/
5 | node_modules
6 | /docs/.vitepress/dist
7 | /docs/.vitepress/cache
8 | yarn-error.log
9 | 


--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
 1 | .eslintcache
 2 | .eslintignore
 3 | .gitignore
 4 | .husky
 5 | .npmignore
 6 | .prettierignore
 7 | LICENSE
 8 | yarn.lock
 9 | dist
10 | __fixtures__
11 | 


--------------------------------------------------------------------------------
/src/utils/makeDocsURL.ts:
--------------------------------------------------------------------------------
1 | function makeDocsURL(name: string) {
2 |   return `https://vue-a11y.github.io/eslint-plugin-vuejs-accessibility/rules/${name}.html`;
3 | }
4 | 
5 | export default makeDocsURL;
6 | 


--------------------------------------------------------------------------------
/src/utils/makeKebabCase.ts:
--------------------------------------------------------------------------------
1 | function makeKebabCase(value: string) {
2 |   return value
3 |     .replace(/_/gu, "-")
4 |     .replace(/\B([A-Z])/gu, "-$1")
5 |     .toLowerCase();
6 | }
7 | 
8 | export default makeKebabCase;
9 | 


--------------------------------------------------------------------------------
/tsconfig.build.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "./tsconfig.json",
 3 |   "exclude": [
 4 |     "bin",
 5 |     "src/**/__tests__",
 6 |     "docs/**",
 7 |     "jest.setup.ts",
 8 |     "dist",
 9 |     "__tests__"
10 |   ]
11 | }
12 | 


--------------------------------------------------------------------------------
/__tests__/integrations/helper.ts:
--------------------------------------------------------------------------------
1 | import fs from "fs";
2 | import path from "path";
3 | 
4 | export function readPackageJson(base: string) {
5 |   return JSON.parse(
6 |     fs.readFileSync(path.resolve(base, "package.json"), "utf-8")
7 |   );
8 | }
9 | 


--------------------------------------------------------------------------------
/.github/dependabot.yml:
--------------------------------------------------------------------------------
 1 | version: 2
 2 | updates:
 3 |   - package-ecosystem: "npm"
 4 |     directory: "/"
 5 |     schedule:
 6 |       interval: "daily"
 7 |   - package-ecosystem: "github-actions"
 8 |     directory: "/"
 9 |     schedule:
10 |       interval: "daily"
11 | 


--------------------------------------------------------------------------------
/__tests__/integrations/__fixtures__/flat-config/a.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <img src="foo" />
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | import { ref } from "vue";
 9 | const counter = ref(0);
10 | console.log("counter", counter);
11 | </script>
12 | 


--------------------------------------------------------------------------------
/__tests__/integrations/__fixtures__/legacy-config/a.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <img src="foo" />
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | import { ref } from "vue";
 9 | const counter = ref(0);
10 | console.log("counter", counter);
11 | </script>
12 | 


--------------------------------------------------------------------------------
/__tests__/integrations/__fixtures__/flat-config/eslint.config.js:
--------------------------------------------------------------------------------
 1 | import plugin from "eslint-plugin-vuejs-accessibility";
 2 | 
 3 | export default [
 4 |   ...plugin.configs["flat/recommended"],
 5 |   {
 6 |     rules: {
 7 |       "vuejs-accessibility/alt-text": "warn"
 8 |     }
 9 |   }
10 | ];
11 | 


--------------------------------------------------------------------------------
/src/rules/__tests__/no-access-key.test.ts:
--------------------------------------------------------------------------------
1 | import rule from "../no-access-key";
2 | import makeRuleTester from "./makeRuleTester";
3 | 
4 | makeRuleTester("no-access-key", rule, {
5 |   valid: ["<div />", "<div accesskey />"],
6 |   invalid: ["<div accesskey='h' />", "<div :accesskey='h' />"]
7 | });
8 | 


--------------------------------------------------------------------------------
/docs/rule-overview/index.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | prev:
 3 |   text: Getting Started
 4 |   link: /
 5 | next:
 6 |   text: alt-text
 7 |   link: /rules/alt-text
 8 | ---
 9 | 
10 | <script setup lang="ts">
11 | import RuleTable from './RuleTable.vue'
12 | </script>
13 | 
14 | # Rule Overview
15 | 
16 | <RuleTable />
17 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "moduleResolution": "nodenext",
 4 |     "module": "nodenext",
 5 |     "target": "es2019",
 6 |     "strict": true,
 7 |     "esModuleInterop": true,
 8 |     "resolveJsonModule": true,
 9 |     "declaration": true,
10 |     "outDir": "./dist"
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/src/rules/__tests__/no-onchange.test.ts:
--------------------------------------------------------------------------------
1 | import rule from "../no-onchange";
2 | import makeRuleTester from "./makeRuleTester";
3 | 
4 | makeRuleTester("no-onchange", rule, {
5 |   valid: ["<select><option @blur='void 0' @change='void 0' /></select>"],
6 |   invalid: ["<select @change='void 0'><option /></select>"]
7 | });
8 | 


--------------------------------------------------------------------------------
/src/utils/hasOnDirectives.ts:
--------------------------------------------------------------------------------
 1 | import type { AST } from "vue-eslint-parser";
 2 | 
 3 | import hasOnDirective from "./hasOnDirective";
 4 | 
 5 | function hasOnDirectives(node: AST.VElement, names: string[]) {
 6 |   return names.some((name) => hasOnDirective(node, name));
 7 | }
 8 | 
 9 | export default hasOnDirectives;
10 | 


--------------------------------------------------------------------------------
/src/rules/__tests__/iframe-has-title.test.ts:
--------------------------------------------------------------------------------
1 | import rule from "../iframe-has-title";
2 | import makeRuleTester from "./makeRuleTester";
3 | 
4 | makeRuleTester("iframe-has-title", rule, {
5 |   valid: ["<iframe title='test' />", "<iframe :title='test' />"],
6 |   invalid: ["<iframe />", "<iframe :title='true' />", "<iframe :title='2' />"]
7 | });
8 | 


--------------------------------------------------------------------------------
/__tests__/integrations/__fixtures__/flat-config/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "private": true,
 3 |   "name": "integration-test-for-flat-config",
 4 |   "type": "module",
 5 |   "version": "1.0.0",
 6 |   "description": "Integration test for flat config",
 7 |   "dependencies": {
 8 |     "eslint": "^9.0.0",
 9 |     "eslint-plugin-vuejs-accessibility": "file:../../../.."
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/src/utils/isPresentationRole.ts:
--------------------------------------------------------------------------------
 1 | import type { AST } from "vue-eslint-parser";
 2 | 
 3 | import getElementAttributeValue from "./getElementAttributeValue";
 4 | 
 5 | function isPresentationRole(node: AST.VElement) {
 6 |   const role = getElementAttributeValue(node, "role");
 7 |   return role === "presentation" || role === "none";
 8 | }
 9 | 
10 | export default isPresentationRole;
11 | 


--------------------------------------------------------------------------------
/__tests__/integrations/__fixtures__/legacy-config/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "private": true,
 3 |   "name": "integration-test-for-legacy-config",
 4 |   "type": "module",
 5 |   "version": "1.0.0",
 6 |   "description": "Integration test for legacy config",
 7 |   "dependencies": {
 8 |     "eslint": "^8.57.0-0",
 9 |     "eslint-plugin-vuejs-accessibility": "file:../../../.."
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/src/utils/hasAriaLabel.ts:
--------------------------------------------------------------------------------
 1 | import type { AST } from "vue-eslint-parser";
 2 | 
 3 | import getElementAttributeValue from "./getElementAttributeValue";
 4 | 
 5 | function hasAriaLabel(node: AST.VElement) {
 6 |   return (
 7 |     getElementAttributeValue(node, "aria-label") ||
 8 |     getElementAttributeValue(node, "aria-labelledby")
 9 |   );
10 | }
11 | 
12 | export default hasAriaLabel;
13 | 


--------------------------------------------------------------------------------
/__tests__/integrations/__fixtures__/legacy-config/.eslintrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "root": true,
 3 |   "extends": ["plugin:vuejs-accessibility/recommended"],
 4 |   "plugins": ["vuejs-accessibility"],
 5 |   "parser": "vue-eslint-parser",
 6 |   "parserOptions": {
 7 |     "sourceType": "module",
 8 |     "ecmaVersion": 2019
 9 |   },
10 |   "rules": {
11 |     "vuejs-accessibility/alt-text": "warn"
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------
/src/rules/__tests__/aria-props.test.ts:
--------------------------------------------------------------------------------
 1 | import rule from "../aria-props";
 2 | import makeRuleTester from "./makeRuleTester";
 3 | 
 4 | makeRuleTester("aria-props", rule, {
 5 |   valid: ["<input aria-labelledby='address' />"],
 6 |   invalid: [
 7 |     {
 8 |       code: "<input aria-test='address' />",
 9 |       errors: [{ messageId: "default", data: { name: "aria-test" } }]
10 |     }
11 |   ]
12 | });
13 | 


--------------------------------------------------------------------------------
/src/utils/isAriaHidden.ts:
--------------------------------------------------------------------------------
 1 | import type { AST } from "vue-eslint-parser";
 2 | 
 3 | import isHiddenFromScreenReader from "./isHiddenFromScreenReader";
 4 | 
 5 | function isAriaHidden(node: AST.VDocumentFragment | AST.VElement): boolean {
 6 |   if (node.type !== "VElement") {
 7 |     return false;
 8 |   }
 9 | 
10 |   return isHiddenFromScreenReader(node) || isAriaHidden(node.parent);
11 | }
12 | 
13 | export default isAriaHidden;
14 | 


--------------------------------------------------------------------------------
/src/rules/__tests__/aria-unsupported-elements.test.ts:
--------------------------------------------------------------------------------
 1 | import rule from "../aria-unsupported-elements";
 2 | import makeRuleTester from "./makeRuleTester";
 3 | 
 4 | makeRuleTester("aria-unsupported-elements", rule, {
 5 |   valid: ["<html />"],
 6 |   invalid: [
 7 |     {
 8 |       code: "<meta charset='UTF-8' aria-hidden='false' />",
 9 |       errors: [{ messageId: "default", data: { name: "aria-hidden" } }]
10 |     }
11 |   ]
12 | });
13 | 


--------------------------------------------------------------------------------
/src/utils/interactiveHandlers.json:
--------------------------------------------------------------------------------
 1 | [
 2 |   "click",
 3 |   "contextmenu",
 4 |   "dblclick",
 5 |   "doubleclick",
 6 |   "drag",
 7 |   "dragend",
 8 |   "dragenter",
 9 |   "dragexit",
10 |   "dragleave",
11 |   "dragover",
12 |   "dragstart",
13 |   "drop",
14 |   "keydown",
15 |   "keypress",
16 |   "keyup",
17 |   "mousedown",
18 |   "mouseenter",
19 |   "mouseleave",
20 |   "mousemove",
21 |   "mouseout",
22 |   "mouseover",
23 |   "mouseup"
24 | ]
25 | 


--------------------------------------------------------------------------------
/src/rules/__tests__/aria-role.test.ts:
--------------------------------------------------------------------------------
 1 | import rule from "../aria-role";
 2 | import makeRuleTester from "./makeRuleTester";
 3 | 
 4 | makeRuleTester("aria-role", rule, {
 5 |   valid: [
 6 |     "<div role='button' />",
 7 |     "<div :role='role' />",
 8 |     "<div />",
 9 |     {
10 |       code: "<Foo role='test' />",
11 |       options: [{ ignoreNonDOM: true }]
12 |     }
13 |   ],
14 |   invalid: ["<div role='datepicker' />", "<div role='' />"]
15 | });
16 | 


--------------------------------------------------------------------------------
/src/utils/getElementAttributeValue.ts:
--------------------------------------------------------------------------------
 1 | import type { AST } from "vue-eslint-parser";
 2 | 
 3 | import getAttributeValue from "./getAttributeValue";
 4 | import getElementAttribute from "./getElementAttribute";
 5 | 
 6 | function getElementAttributeValue(node: AST.VElement, name: string) {
 7 |   const attribute = getElementAttribute(node, name);
 8 |   return attribute && getAttributeValue(attribute);
 9 | }
10 | 
11 | export default getElementAttributeValue;
12 | 


--------------------------------------------------------------------------------
/src/configs/recommended.ts:
--------------------------------------------------------------------------------
 1 | import type { Linter } from "eslint";
 2 | import { rules } from "./rules";
 3 | 
 4 | const recommended = {
 5 |   parser: require.resolve("vue-eslint-parser"),
 6 |   parserOptions: {
 7 |     ecmaVersion: 2020,
 8 |     sourceType: "module"
 9 |   },
10 |   env: {
11 |     browser: true,
12 |     es6: true
13 |   },
14 |   plugins: ["vuejs-accessibility"],
15 |   rules
16 | } satisfies Linter.BaseConfig;
17 | 
18 | export default recommended;
19 | 


--------------------------------------------------------------------------------
/src/utils/isAttribute.ts:
--------------------------------------------------------------------------------
 1 | import type { AST } from "vue-eslint-parser";
 2 | 
 3 | function isAttribute(node: AST.VAttribute | AST.VDirective, name: string) {
 4 |   if (!node.directive) {
 5 |     return node.key.name === name;
 6 |   }
 7 | 
 8 |   return (
 9 |     node.key.name.name === "bind" &&
10 |     node.key.argument &&
11 |     node.key.argument.type === "VIdentifier" &&
12 |     node.key.argument.name === name
13 |   );
14 | }
15 | 
16 | export default isAttribute;
17 | 


--------------------------------------------------------------------------------
/src/rules/__tests__/no-autofocus.test.ts:
--------------------------------------------------------------------------------
 1 | import rule from "../no-autofocus";
 2 | import makeRuleTester from "./makeRuleTester";
 3 | 
 4 | makeRuleTester("no-autofocus", rule, {
 5 |   valid: [
 6 |     "<div />",
 7 |     {
 8 |       code: "<Anchor autofocus='autofocus' />",
 9 |       options: [{ ignoreNonDOM: true }]
10 |     }
11 |   ],
12 |   invalid: [
13 |     "<div autofocus />",
14 |     "<div autofocus='true' />",
15 |     "<div :autofocus='sth' />"
16 |   ]
17 | });
18 | 


--------------------------------------------------------------------------------
/src/utils/isInteractiveRole.ts:
--------------------------------------------------------------------------------
 1 | import { roles } from "aria-query";
 2 | import { getInteractiveRoles } from "../utils";
 3 | 
 4 | function isInteractiveRole(value: any): value is string {
 5 |   if (typeof value !== "string") {
 6 |     return false;
 7 |   }
 8 | 
 9 |   return value
10 |     .toLowerCase()
11 |     .split(" ")
12 |     .some(
13 |       (role: any) => roles.has(role) && getInteractiveRoles().includes(role)
14 |     );
15 | }
16 | 
17 | export default isInteractiveRole;
18 | 


--------------------------------------------------------------------------------
/src/utils/getAttributeName.ts:
--------------------------------------------------------------------------------
 1 | import type { AST } from "vue-eslint-parser";
 2 | 
 3 | function getAttributeName(node: AST.VAttribute | AST.VDirective) {
 4 |   if (!node.directive) {
 5 |     return node.key.name;
 6 |   }
 7 | 
 8 |   const { key } = node;
 9 |   if (
10 |     key.name.name === "bind" &&
11 |     key.argument &&
12 |     key.argument.type === "VIdentifier"
13 |   ) {
14 |     return key.argument.name;
15 |   }
16 | 
17 |   return null;
18 | }
19 | 
20 | export default getAttributeName;
21 | 


--------------------------------------------------------------------------------
/src/rules/__tests__/tabindex-no-positive.test.ts:
--------------------------------------------------------------------------------
 1 | import rule from "../tabindex-no-positive";
 2 | import makeRuleTester from "./makeRuleTester";
 3 | 
 4 | makeRuleTester("tabindex-no-positive", rule, {
 5 |   valid: [
 6 |     "<span tabindex='0' />",
 7 |     "<span v-if='true' tabindex='0' />",
 8 |     "<span tabindex='-1' />",
 9 |     "<span :tabindex='number' />"
10 |   ],
11 |   invalid: [
12 |     "<span tabindex='1' />",
13 |     "<span tabindex='2' />",
14 |     "<span :tabindex='2' />"
15 |   ]
16 | });
17 | 


--------------------------------------------------------------------------------
/src/utils/getInteractiveRoles.ts:
--------------------------------------------------------------------------------
 1 | import { ARIARoleDefinitionKey, roles } from "aria-query";
 2 | 
 3 | function getInteractiveRoles() {
 4 |   const interactiveRoles: ARIARoleDefinitionKey[] = [];
 5 | 
 6 |   for (const [role, definition] of roles.entries()) {
 7 |     if (
 8 |       !definition.abstract &&
 9 |       definition.superClass.some((classes) => classes.includes("widget"))
10 |     ) {
11 |       interactiveRoles.push(role);
12 |     }
13 |   }
14 | 
15 |   return interactiveRoles;
16 | }
17 | 
18 | export default getInteractiveRoles;
19 | 


--------------------------------------------------------------------------------
/docs/rules/aria-props.md:
--------------------------------------------------------------------------------
 1 | # aria-props
 2 | 
 3 | Elements cannot use an invalid ARIA attribute. This will fail if it finds an `aria-*` property that is not listed in [WAI-ARIA States and Properties spec](https://www.w3.org/TR/wai-aria/#state_prop_def).
 4 | 
 5 | ## 🔧 Options
 6 | 
 7 | This rule takes no arguments.
 8 | 
 9 | ### ✔ Succeed
10 | 
11 | ```vue
12 | <template>
13 |   <input aria-labelledby="address" />
14 | </template>
15 | ```
16 | 
17 | ### ❌ Fail
18 | 
19 | ```vue
20 | <template>
21 |   <input aria-labeledby="address" />
22 | </template>
23 | ```
24 | 


--------------------------------------------------------------------------------
/src/utils/isHiddenFromScreenReader.ts:
--------------------------------------------------------------------------------
 1 | import type { AST } from "vue-eslint-parser";
 2 | 
 3 | import getElementAttribute from "./getElementAttribute";
 4 | import getAttributeValue from "./getAttributeValue";
 5 | 
 6 | function isHiddenFromScreenReader(node: AST.VElement) {
 7 |   const attribute = getElementAttribute(node, "aria-hidden");
 8 |   if (!attribute) {
 9 |     return false;
10 |   }
11 | 
12 |   const value = getAttributeValue(attribute);
13 |   return (value || "").toString() !== "false";
14 | }
15 | 
16 | export default isHiddenFromScreenReader;
17 | 


--------------------------------------------------------------------------------
/jest.setup.ts:
--------------------------------------------------------------------------------
 1 | import { RuleTester } from "eslint";
 2 | 
 3 | interface JestRuleTester extends RuleTester {
 4 |   describe: (text: string, callback: () => void) => void;
 5 |   it: { title?: string } & ((text: string, callback: () => void) => void);
 6 | }
 7 | 
 8 | const ruleTester = RuleTester as unknown as JestRuleTester;
 9 | 
10 | ruleTester.describe = (text: string, callback: () => void) => {
11 |   ruleTester.it.title = text;
12 |   return callback.call(this);
13 | };
14 | 
15 | ruleTester.it = (text: string, callback: () => void) => {
16 |   test(`${ruleTester.it.title}: ${text}`, callback);
17 | };
18 | 


--------------------------------------------------------------------------------
/docs/rules/iframe-has-title.md:
--------------------------------------------------------------------------------
 1 | # iframe-has-title
 2 | 
 3 | `<iframe>` elements must have a unique title property to indicate its content to the user.
 4 | 
 5 | ## 🔧 Options
 6 | 
 7 | This rule takes no arguments.
 8 | 
 9 | ### ✔ Succeed
10 | 
11 | ```vue
12 | <template>
13 |   <iframe title="This is a unique title" />
14 |   <iframe :title="uniqueTitle" />
15 | </template>
16 | ```
17 | 
18 | ### ❌ Fail
19 | 
20 | ```vue
21 | <template>
22 |   <iframe />
23 |   <iframe title="" />
24 | </template>
25 | ```
26 | 
27 | ## 📚 Resources
28 | 
29 | - [Deque University](https://dequeuniversity.com/rules/axe/1.1/frame-title)
30 | 


--------------------------------------------------------------------------------
/.github/workflows/main.yml:
--------------------------------------------------------------------------------
 1 | name: Main
 2 | 
 3 | on:
 4 |   - push
 5 |   - pull_request
 6 | 
 7 | jobs:
 8 |   ci:
 9 |     name: CI
10 |     runs-on: ubuntu-latest
11 |     env:
12 |       CI: true
13 |     steps:
14 |       - uses: actions/checkout@master
15 |       - uses: actions/setup-node@v6
16 |         with:
17 |           node-version: 18
18 |           cache: yarn
19 |       - name: Lint and test
20 |         run: |
21 |           yarn install --frozen-lockfile
22 |           yarn build
23 |           yarn lint
24 |           yarn prettier --check '**/*'
25 |           yarn test
26 |           yarn test:integration
27 | 


--------------------------------------------------------------------------------
/src/utils/isMatchingElement.ts:
--------------------------------------------------------------------------------
 1 | import type { AST } from "vue-eslint-parser";
 2 | 
 3 | import getElementType from "./getElementType";
 4 | import makeKebabCase from "./makeKebabCase";
 5 | 
 6 | function isMatchingElement(
 7 |   node:
 8 |     | AST.VElement
 9 |     | AST.VDocumentFragment
10 |     | AST.VText
11 |     | AST.VExpressionContainer,
12 |   searchArray: string[]
13 | ) {
14 |   if (!(node.type === "VElement")) return false;
15 | 
16 |   const elementType = getElementType(node);
17 | 
18 |   return searchArray.some((item: string) => {
19 |     return makeKebabCase(item) === elementType;
20 |   });
21 | }
22 | 
23 | export default isMatchingElement;
24 | 


--------------------------------------------------------------------------------
/src/utils/getElementAttribute.ts:
--------------------------------------------------------------------------------
 1 | import type { AST } from "vue-eslint-parser";
 2 | 
 3 | function getElementAttribute(node: AST.VElement, name: string) {
 4 |   for (const attribute of node.startTag.attributes) {
 5 |     if (
 6 |       (!attribute.directive && attribute.key.name === name) ||
 7 |       (attribute.directive &&
 8 |         attribute.key.name.name === "bind" &&
 9 |         attribute.key.argument &&
10 |         attribute.key.argument.type === "VIdentifier" &&
11 |         attribute.key.argument.name === name)
12 |     ) {
13 |       return attribute;
14 |     }
15 |   }
16 | 
17 |   return null;
18 | }
19 | 
20 | export default getElementAttribute;
21 | 


--------------------------------------------------------------------------------
/bin/lint.ts:
--------------------------------------------------------------------------------
 1 | #!./node_modules/.bin/ts-node
 2 | 
 3 | import { ESLint } from "eslint";
 4 | import a11yPlugin from "../src";
 5 | 
 6 | (async function main() {
 7 |   const eslint = new ESLint({
 8 |     baseConfig: a11yPlugin.configs.recommended,
 9 |     plugins: { "eslint-plugin-vuejs-accessibility": a11yPlugin },
10 |     useEslintrc: false
11 |   });
12 | 
13 |   const results = await eslint.lintFiles(process.argv.slice(2));
14 |   const formatter = await eslint.loadFormatter("stylish");
15 | 
16 |   const resultText = formatter.format(results);
17 |   console.log(resultText);
18 | })().catch((error) => {
19 |   process.exitCode = 1;
20 |   console.error(error);
21 | });
22 | 


--------------------------------------------------------------------------------
/docs/rules/mouse-events-have-key-events.md:
--------------------------------------------------------------------------------
 1 | # mouse-events-have-key-events
 2 | 
 3 | Enforce `@mouseenter`/`@mouseover`/`@mouseout`/`@mouseleave`/`@hover` are accompanied by `@focus`/`@blur`. Coding for the keyboard is important for users with physical disabilities who cannot use a mouse, AT compatibility, and screenreader users.
 4 | 
 5 | ## 🔧 Options
 6 | 
 7 | This rule takes no arguments.
 8 | 
 9 | ### ✔ Succeed
10 | 
11 | ```vue
12 | <template>
13 |   <div @mouseover="foo" @focus="bar" />
14 |   <div @mouseout="foo" @blur="bar" />
15 | </template>
16 | ```
17 | 
18 | ### ❌ Fail
19 | 
20 | ```vue
21 | <template>
22 |   <div @mouseover="foo" />
23 | </template>
24 | ```
25 | 


--------------------------------------------------------------------------------
/src/utils/isCustomComponent.ts:
--------------------------------------------------------------------------------
 1 | import { AST } from "vue-eslint-parser";
 2 | import htmlElements from "./htmlElements.json";
 3 | import { getElementAttribute } from "../utils";
 4 | 
 5 | // eslint-disable-next-line @typescript-eslint/no-var-requires
 6 | const vueEslintParser = require("vue-eslint-parser");
 7 | 
 8 | function isHtmlElementNode(node: AST.VElement) {
 9 |   return node.namespace === vueEslintParser.AST.NS.HTML;
10 | }
11 | 
12 | function isCustomComponent(node: AST.VElement) {
13 |   return (
14 |     (isHtmlElementNode(node) && !htmlElements.includes(node.rawName)) ||
15 |     !!getElementAttribute(node, "is")
16 |   );
17 | }
18 | 
19 | export default isCustomComponent;
20 | 


--------------------------------------------------------------------------------
/docs/rules/click-events-have-key-events.md:
--------------------------------------------------------------------------------
 1 | # click-events-have-key-events
 2 | 
 3 | Enforce `@click` is accompanied by at least one of the following: `@keyup`, `@keydown`, `@keypress`. Coding for the keyboard is important for users with physical disabilities who cannot use a mouse, AT compatibility, and screenreader users.
 4 | 
 5 | ## 🔧 Options
 6 | 
 7 | This rule takes no arguments.
 8 | 
 9 | ### ✔ Succeed
10 | 
11 | ```vue
12 | <template>
13 |   <div @click="foo" @keydown="bar" />
14 |   <div @click="foo" @keyup="bar" />
15 |   <div @click="foo" @keypress="bar" />
16 | </template>
17 | ```
18 | 
19 | ### ❌ Fail
20 | 
21 | ```vue
22 | <template>
23 |   <div @click="foo" />
24 | </template>
25 | ```
26 | 


--------------------------------------------------------------------------------
/src/utils/hasFocusableElement.ts:
--------------------------------------------------------------------------------
 1 | import type { AST } from "vue-eslint-parser";
 2 | import getElementAttributeValue from "./getElementAttributeValue";
 3 | import isInteractiveElement from "./isInteractiveElement";
 4 | 
 5 | function hasFocusableElements(node: AST.VElement): boolean {
 6 |   const tabindex = getElementAttributeValue(node, "tabindex");
 7 | 
 8 |   if (isInteractiveElement(node)) {
 9 |     return tabindex !== "-1";
10 |   }
11 | 
12 |   if (tabindex !== null && tabindex !== "-1") {
13 |     return true;
14 |   }
15 | 
16 |   return node.children.some(
17 |     (child) => child.type === "VElement" && hasFocusableElements(child)
18 |   );
19 | }
20 | 
21 | export default hasFocusableElements;
22 | 


--------------------------------------------------------------------------------
/src/utils/hasOnDirective.ts:
--------------------------------------------------------------------------------
 1 | import type { AST } from "vue-eslint-parser";
 2 | 
 3 | function hasOnDirective(node: AST.VElement, name: string) {
 4 |   return node.startTag.attributes.some((attribute) => {
 5 |     return (
 6 |       attribute.directive &&
 7 |       attribute.key.name.name === "on" &&
 8 |       attribute.key.argument &&
 9 |       attribute.key.argument.type === "VIdentifier" &&
10 |       attribute.key.argument.name === name &&
11 |       attribute.value &&
12 |       attribute.value.expression &&
13 |       (attribute.value.expression.type === "Identifier" ||
14 |         !!(attribute.value.expression as any).body)
15 |     );
16 |   });
17 | }
18 | 
19 | export default hasOnDirective;
20 | 


--------------------------------------------------------------------------------
/src/rules/__tests__/no-distracting-elements.test.ts:
--------------------------------------------------------------------------------
 1 | import rule from "../no-distracting-elements";
 2 | import makeRuleTester from "./makeRuleTester";
 3 | 
 4 | makeRuleTester("no-distracting-elements", rule, {
 5 |   valid: ["<div />"],
 6 |   invalid: [
 7 |     {
 8 |       code: "<blink />",
 9 |       errors: [{ messageId: "default", data: { elementType: "blink" } }]
10 |     },
11 |     {
12 |       code: "<marquee />",
13 |       errors: [{ messageId: "default", data: { elementType: "marquee" } }]
14 |     },
15 |     {
16 |       code: "<v-distract />",
17 |       options: [{ elements: ["VDistract"] }],
18 |       errors: [{ messageId: "default", data: { elementType: "v-distract" } }]
19 |     }
20 |   ]
21 | });
22 | 


--------------------------------------------------------------------------------
/.github/workflows/auto-merge.yml:
--------------------------------------------------------------------------------
 1 | name: Dependabot auto-merge
 2 | on: pull_request
 3 | 
 4 | permissions:
 5 |   contents: write
 6 |   pull-requests: write
 7 | 
 8 | jobs:
 9 |   dependabot:
10 |     runs-on: ubuntu-latest
11 |     if: ${{ github.actor == 'dependabot[bot]' }}
12 |     steps:
13 |       - name: Dependabot metadata
14 |         id: metadata
15 |         uses: dependabot/fetch-metadata@v2.4.0
16 |         with:
17 |           github-token: "${{ secrets.GITHUB_TOKEN }}"
18 |       - name: Enable auto-merge for Dependabot PRs
19 |         run: gh pr merge --auto --merge "$PR_URL"
20 |         env:
21 |           PR_URL: ${{github.event.pull_request.html_url}}
22 |           GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
23 | 


--------------------------------------------------------------------------------
/docs/rules/aria-unsupported-elements.md:
--------------------------------------------------------------------------------
 1 | # aria-unsupported-elements
 2 | 
 3 | Certain reserved DOM elements do not support ARIA roles, states, and properties. This is often because they are not visible, for example `meta`, `html`, `script`, `style`. This rule enforces that these DOM elements do not contain the `role` and/or `aria-*` props.
 4 | 
 5 | ## 🔧 Options
 6 | 
 7 | This rule takes no arguments.
 8 | 
 9 | ### ✔ Succeed
10 | 
11 | ```html
12 | <meta charset="UTF-8" />
13 | ```
14 | 
15 | ### ❌ Fail
16 | 
17 | ```html
18 | <meta charset="UTF-8" aria-hidden="false" />
19 | ```
20 | 
21 | ## 📚 Resources
22 | 
23 | - [AX_ARIA_12](https://github.com/GoogleChrome/accessibility-developer-tools/wiki/Audit-Rules#ax_aria_12)
24 | 


--------------------------------------------------------------------------------
/docs/rules/tabindex-no-positive.md:
--------------------------------------------------------------------------------
 1 | # tabindex-no-positive
 2 | 
 3 | Avoid positive tabindex property values to synchronize the flow of the page with keyboard tab order.
 4 | 
 5 | ## 🔧 Options
 6 | 
 7 | This rule takes no arguments.
 8 | 
 9 | ### ✔ Succeed
10 | 
11 | ```vue
12 | <span tabindex="0">foo</span>
13 | <span tabindex="-1">bar</span>
14 | <span :tabindex="0">baz</span>
15 | ```
16 | 
17 | ### ❌ Fail
18 | 
19 | ```vue
20 | <span tabindex="5">foo</span>
21 | <span tabindex="3">bar</span>
22 | <span tabindex="1">baz</span>
23 | <span tabindex="2">never really sure what goes after baz</span>
24 | ```
25 | 
26 | ## 📚 Resources
27 | 
28 | - [AX_FOCUS_03](https://github.com/GoogleChrome/accessibility-developer-tools/wiki/Audit-Rules#ax_focus_03)
29 | 


--------------------------------------------------------------------------------
/src/rules/__tests__/no-redundant-roles.test.ts:
--------------------------------------------------------------------------------
 1 | import rule from "../no-redundant-roles";
 2 | import makeRuleTester from "./makeRuleTester";
 3 | 
 4 | makeRuleTester("no-redundant-roles", rule, {
 5 |   valid: ["<a role='link' />", "<div role='link' />"],
 6 |   invalid: [
 7 |     {
 8 |       code: "<img role='img' src='foo.jpg' />",
 9 |       errors: [{ messageId: "default", data: { type: "img", role: "img" } }]
10 |     },
11 |     {
12 |       code: "<a role='link' href='#' />",
13 |       errors: [{ messageId: "default", data: { type: "a", role: "link" } }]
14 |     },
15 |     {
16 |       code: "<button role='button' />",
17 |       errors: [
18 |         { messageId: "default", data: { type: "button", role: "button" } }
19 |       ]
20 |     }
21 |   ]
22 | });
23 | 


--------------------------------------------------------------------------------
/docs/rules/role-has-required-aria-props.md:
--------------------------------------------------------------------------------
 1 | # role-has-required-aria-props
 2 | 
 3 | Elements with ARIA roles must have all required attributes for that role.
 4 | 
 5 | ## 🔧 Options
 6 | 
 7 | This rule takes no arguments.
 8 | 
 9 | ### ✔ Succeed
10 | 
11 | ```vue
12 | <template>
13 |   <span
14 |     role="checkbox"
15 |     aria-checked="false"
16 |     aria-labelledby="test"
17 |     tabindex="0"
18 |   />
19 | </template>
20 | ```
21 | 
22 | ### ❌ Fail
23 | 
24 | ```vue
25 | <template>
26 |   <span role="checkbox" aria-labelledby="test" tabindex="0" />
27 | </template>
28 | ```
29 | 
30 | ## 📚 Resources
31 | 
32 | 1. [W3](https://www.w3.org/TR/wai-aria/roles)
33 | 2. [AX_ARIA_03](https://github.com/GoogleChrome/accessibility-developer-tools/wiki/Audit-Rules#ax_aria_03)
34 | 


--------------------------------------------------------------------------------
/docs/rule-overview/RuleTable.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { data as rules } from "./rule-overview.data";
 3 | </script>
 4 | 
 5 | <template>
 6 |   <div class="rule-table-container">
 7 |     <div>✅ - Recommended</div>
 8 | 
 9 |     <table>
10 |       <tr>
11 |         <th>Rule</th>
12 |         <th></th>
13 |       </tr>
14 | 
15 |       <tr v-for="{ name, link, recommended } of rules">
16 |         <td>
17 |           <a :href="link">{{ name }}</a>
18 |         </td>
19 | 
20 |         <td v-if="recommended">✅</td>
21 |         <td v-else></td>
22 |       </tr>
23 |     </table>
24 |   </div>
25 | </template>
26 | 
27 | <style scoped>
28 | .rule-table-container {
29 |   margin-top: 24px;
30 | }
31 | 
32 | table {
33 |   width: 100%;
34 |   display: table;
35 | }
36 | 
37 | td:last-of-type {
38 |   width: 50px;
39 | }
40 | </style>
41 | 


--------------------------------------------------------------------------------
/docs/rules/no-access-key.md:
--------------------------------------------------------------------------------
 1 | # no-access-key
 2 | 
 3 | Enforce no `accesskey` prop on element. Access keys are HTML attributes that allow web developers to assign keyboard shortcuts to elements. Inconsistencies between keyboard shortcuts and keyboard commands used by screenreader and keyboard-only users create accessibility complications. To avoid complications, access keys should not be used.
 4 | 
 5 | ## 🔧 Options
 6 | 
 7 | This rule takes no arguments.
 8 | 
 9 | ### ✔ Succeed
10 | 
11 | ```vue
12 | <template>
13 |   <div>Stress reliever</div>
14 | </template>
15 | ```
16 | 
17 | ### ❌ Fail
18 | 
19 | ```vue
20 | <template>
21 |   <div accesskey="s">Stress reliever</div>
22 |   <div :accesskey="s">Stress reliever</div>
23 | </template>
24 | ```
25 | 
26 | ## 📚 Resources
27 | 
28 | - [WebAIM](http://webaim.org/techniques/keyboard/accesskey#spec)
29 | 


--------------------------------------------------------------------------------
/src/rules/__tests__/mouse-events-have-key-events.test.ts:
--------------------------------------------------------------------------------
 1 | import rule from "../mouse-events-have-key-events";
 2 | import makeRuleTester from "./makeRuleTester";
 3 | 
 4 | makeRuleTester("mouse-events-have-key-events", rule, {
 5 |   valid: [
 6 |     "<div />",
 7 |     "<div @mouseover='void 0' @focus='void 0' />",
 8 |     "<div @mouseout='void 0' @blur='void 0' />"
 9 |   ],
10 |   invalid: [
11 |     {
12 |       code: "<div @mouseover='void 0' />",
13 |       errors: [{ messageId: "mouseOver" }]
14 |     },
15 |     {
16 |       code: "<div @mouseout='void 0' />",
17 |       errors: [{ messageId: "mouseOut" }]
18 |     },
19 |     {
20 |       code: "<div @mouseover='void 0' @focus='null' />",
21 |       errors: [{ messageId: "mouseOver" }]
22 |     },
23 |     {
24 |       code: "<div @mouseout='void 0' @blur='null' />",
25 |       errors: [{ messageId: "mouseOut" }]
26 |     }
27 |   ]
28 | });
29 | 


--------------------------------------------------------------------------------
/.github/workflows/docs.yml:
--------------------------------------------------------------------------------
 1 | name: Docs
 2 | 
 3 | on:
 4 |   workflow_dispatch: {}
 5 |   push:
 6 |     branches:
 7 |       - main
 8 | 
 9 | jobs:
10 |   docs:
11 |     runs-on: ubuntu-latest
12 |     steps:
13 |       - uses: actions/checkout@v6
14 |         with:
15 |           fetch-depth: 0
16 | 
17 |       - uses: actions/setup-node@v6
18 |         with:
19 |           node-version: 18
20 |           cache: yarn
21 | 
22 |       - name: Install dependencies
23 |         run: yarn install --frozen-lockfile
24 | 
25 |       - name: Build docs
26 |         run: npm run docs:build
27 | 
28 |       # https://github.com/crazy-max/ghaction-github-pages
29 |       - name: Deploy to GitHub Pages
30 |         uses: crazy-max/ghaction-github-pages@v4
31 |         with:
32 |           target_branch: gh-pages
33 |           build_dir: docs/.vitepress/dist
34 |         env:
35 |           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
36 | 


--------------------------------------------------------------------------------
/src/rules/no-access-key.ts:
--------------------------------------------------------------------------------
 1 | import type { Rule } from "eslint";
 2 | 
 3 | import {
 4 |   defineTemplateBodyVisitor,
 5 |   getElementAttributeValue,
 6 |   makeDocsURL
 7 | } from "../utils";
 8 | 
 9 | const rule: Rule.RuleModule = {
10 |   meta: {
11 |     type: "problem",
12 |     docs: {
13 |       url: makeDocsURL("no-access-key")
14 |     },
15 |     messages: {
16 |       default:
17 |         "No access key attribute allowed. Inconsistencies between keyboard shortcuts and keyboard comments used by screenreader and keyboard only users create a11y complications."
18 |     },
19 |     schema: []
20 |   },
21 |   create(context) {
22 |     return defineTemplateBodyVisitor(context, {
23 |       VElement(node) {
24 |         if (getElementAttributeValue(node, "accesskey")) {
25 |           context.report({ node: node as any, messageId: "default" });
26 |         }
27 |       }
28 |     });
29 |   }
30 | };
31 | 
32 | export default rule;
33 | 


--------------------------------------------------------------------------------
/src/utils/getLiteralAttributeValue.ts:
--------------------------------------------------------------------------------
 1 | import type { AST } from "vue-eslint-parser";
 2 | 
 3 | function getLiteralAttributeValue(node: AST.VElement, name: string) {
 4 |   for (const attribute of node.startTag.attributes) {
 5 |     if (
 6 |       !attribute.directive &&
 7 |       attribute.key.name === name &&
 8 |       attribute.value
 9 |     ) {
10 |       return attribute.value.value;
11 |     }
12 | 
13 |     if (
14 |       attribute.directive &&
15 |       attribute.key.name.name === "bind" &&
16 |       attribute.key.argument &&
17 |       attribute.key.argument.type === "VIdentifier" &&
18 |       attribute.key.argument.name === name &&
19 |       attribute.value &&
20 |       attribute.value.expression &&
21 |       attribute.value.expression.type === "Literal"
22 |     ) {
23 |       return attribute.value.expression.value;
24 |     }
25 |   }
26 | 
27 |   return null;
28 | }
29 | 
30 | export default getLiteralAttributeValue;
31 | 


--------------------------------------------------------------------------------
/src/utils/getElementType.ts:
--------------------------------------------------------------------------------
 1 | import type { AST } from "vue-eslint-parser";
 2 | 
 3 | import getElementAttributeValue from "./getElementAttributeValue";
 4 | import makeKebabCase from "./makeKebabCase";
 5 | 
 6 | /**
 7 |  * Returns a kebab-normalized string representing the element node name
 8 |  * or, if the `is` attribute is a string, its value if present.
 9 |  * @example <div is="foo-bar"> => "foo-bar"
10 |  * @example <foo-bar> => "foo-bar"
11 |  * @example <div> => "div"
12 |  */
13 | function getElementType(node: AST.VElement) {
14 |   let is = getElementAttributeValue(node, "is");
15 | 
16 |   // If we could not parse the `is` value into a simple literal, we're going to
17 |   // have to ignore it because we're not smart enough to handle multiple values
18 |   // yet.
19 |   if (typeof is !== "string") {
20 |     is = null;
21 |   }
22 | 
23 |   return makeKebabCase(is || node.rawName);
24 | }
25 | 
26 | export default getElementType;
27 | 


--------------------------------------------------------------------------------
/src/utils/getAttributeValue.ts:
--------------------------------------------------------------------------------
 1 | import type { AST } from "vue-eslint-parser";
 2 | 
 3 | function getAttributeValue(node: AST.VAttribute | AST.VDirective) {
 4 |   if (!node.value) {
 5 |     return null;
 6 |   }
 7 | 
 8 |   if (!node.directive) {
 9 |     return node.value.value;
10 |   }
11 | 
12 |   if (node.key.name.name === "bind" && node.value.expression) {
13 |     // <div :height="100" />
14 |     if (node.value.expression.type === "Literal") {
15 |       return node.value.expression.value;
16 |     }
17 | 
18 |     // TODO we're effectively using this as just a placeholder to let rules know
19 |     // that a value has been passed in for this attribute. We should replace
20 |     // this with a stronger API to either explicitly handle all of the different
21 |     // types of values or just return a special symbol or something else.
22 |     return node.value.expression;
23 |   }
24 | 
25 |   return null;
26 | }
27 | 
28 | export default getAttributeValue;
29 | 


--------------------------------------------------------------------------------
/src/configs/flat/recommended.ts:
--------------------------------------------------------------------------------
 1 | import type { Linter } from "eslint";
 2 | import globals from "globals";
 3 | import { rules } from "../rules";
 4 | 
 5 | const recommended = [
 6 |   {
 7 |     name: "vuejs-accessibility:setup:base",
 8 |     plugins: {
 9 |       get "vuejs-accessibility"() {
10 |         return require("../../index");
11 |       }
12 |     },
13 |     languageOptions: {
14 |       sourceType: "module",
15 |       globals: globals.browser
16 |     }
17 |   },
18 |   {
19 |     name: "vuejs-accessibility:setup:with-files-rules-and-parser",
20 |     files: ["*.vue", "**/*.vue"],
21 |     plugins: {
22 |       get "vuejs-accessibility"() {
23 |         return require("../../index");
24 |       }
25 |     },
26 |     languageOptions: {
27 |       parser: require("vue-eslint-parser"),
28 |       sourceType: "module",
29 |       globals: globals.browser
30 |     },
31 |     rules
32 |   }
33 | ] satisfies Linter.FlatConfig[];
34 | 
35 | export = recommended;
36 | 


--------------------------------------------------------------------------------
/src/rules/tabindex-no-positive.ts:
--------------------------------------------------------------------------------
 1 | import type { Rule } from "eslint";
 2 | 
 3 | import {
 4 |   defineTemplateBodyVisitor,
 5 |   getLiteralAttributeValue,
 6 |   makeDocsURL
 7 | } from "../utils";
 8 | 
 9 | const rule: Rule.RuleModule = {
10 |   meta: {
11 |     type: "problem",
12 |     docs: {
13 |       url: makeDocsURL("tabindex-no-positive")
14 |     },
15 |     messages: {
16 |       default: "Avoid positive integer values for tabindex."
17 |     },
18 |     schema: []
19 |   },
20 |   create(context) {
21 |     return defineTemplateBodyVisitor(context, {
22 |       VElement(node) {
23 |         const tabIndex = getLiteralAttributeValue(node, "tabindex");
24 | 
25 |         if (
26 |           (typeof tabIndex === "string" || typeof tabIndex === "number") &&
27 |           +tabIndex > 0
28 |         ) {
29 |           context.report({ node: node as any, messageId: "default" });
30 |         }
31 |       }
32 |     });
33 |   }
34 | };
35 | 
36 | export default rule;
37 | 


--------------------------------------------------------------------------------
/docs/rules/no-autofocus.md:
--------------------------------------------------------------------------------
 1 | # no-autofocus
 2 | 
 3 | Enforce that autofocus prop is not used on elements. Autofocusing elements can cause usability issues for sighted and non-sighted users alike.
 4 | 
 5 | ## 🔧 Options
 6 | 
 7 | This rule takes one optional object argument of type object:
 8 | 
 9 | ```json
10 | {
11 |   "rules": {
12 |     "vuejs-accessibility/no-autofocus": ["error", { "ignoreNonDOM": true }]
13 |   }
14 | }
15 | ```
16 | 
17 | For the `ignoreNonDOM` option, this determines if developer created components are checked.
18 | 
19 | ### ✔ Succeed
20 | 
21 | ```vue
22 | <template>
23 |   <div />
24 | </template>
25 | ```
26 | 
27 | ### ❌ Fail
28 | 
29 | ```vue
30 | <template>
31 |   <input autofocus="autofocus" />
32 |   <div autofocus />
33 |   <div :autofocus="true" />
34 |   <div :autofocus="false" />
35 |   <div :autofocus="undefined" />
36 | </template>
37 | ```
38 | 
39 | ## 📚 Resources
40 | 
41 | - [W3C](https://w3c.github.io/html/sec-forms.html#autofocusing-a-form-control-the-autofocus-attribute)
42 | 


--------------------------------------------------------------------------------
/src/rules/__tests__/heading-has-content.test.ts:
--------------------------------------------------------------------------------
 1 | import rule from "../heading-has-content";
 2 | import makeRuleTester from "./makeRuleTester";
 3 | 
 4 | makeRuleTester("heading-has-content", rule, {
 5 |   valid: [
 6 |     "<h1>test</h1>",
 7 |     "<h1><span>test</span></h1>",
 8 |     "<h1 v-text='msg'></h1>",
 9 |     "<h1 v-html='msg'></h1>",
10 |     "<h1>{{ test }}</h1>",
11 |     "<h1><slot /></h1>",
12 |     {
13 |       code: "<h1 v-accessibleDirective='msg'></h1>",
14 |       options: [{ accessibleDirectives: ["accessibleDirective"] }]
15 |     },
16 |     {
17 |       code: "<h1><accessible-child /></h1>",
18 |       options: [{ accessibleChildren: ["AccessibleChild"] }]
19 |     }
20 |   ],
21 |   invalid: [
22 |     "<h1 />",
23 |     "<h1><span /></h1>",
24 |     "<h1><span aria-hidden='true'>test</span></h1>",
25 |     "<h1>   </h1>",
26 |     {
27 |       code: "<v-heading />",
28 |       options: [{ components: ["VHeading"] }],
29 |       errors: [{ messageId: "default" }]
30 |     }
31 |   ]
32 | });
33 | 


--------------------------------------------------------------------------------
/docs/.vitepress/rulesForSidebar.ts:
--------------------------------------------------------------------------------
 1 | import { join, parse } from "node:path";
 2 | import { Dirent, readdirSync } from "node:fs";
 3 | 
 4 | export const rules = getRulesForSideBar();
 5 | 
 6 | function getRulesForSideBar() {
 7 |   const rulesDirectory = join(__dirname, "../", "rules");
 8 |   return readdirSync(rulesDirectory, { withFileTypes: true })
 9 |     .filter(isFile)
10 |     .filter(isMarkdown)
11 |     .map(fileNameWithoutExtension)
12 |     .map(ruleToSidebarItem);
13 | }
14 | 
15 | function isFile(dirent: Dirent) {
16 |   return !dirent.isDirectory();
17 | }
18 | 
19 | function isMarkdown(dirent: Dirent) {
20 |   return dirent.name.endsWith(".md");
21 | }
22 | 
23 | function fileNameWithoutExtension(file: Dirent) {
24 |   const parsedFileName = parse(file.name);
25 |   const nameWithoutExtension = parsedFileName.name;
26 |   return nameWithoutExtension;
27 | }
28 | 
29 | function ruleToSidebarItem(ruleName: string) {
30 |   return {
31 |     text: ruleName,
32 |     link: `/rules/${ruleName}`
33 |   };
34 | }
35 | 


--------------------------------------------------------------------------------
/src/rules/no-aria-hidden-on-focusable.ts:
--------------------------------------------------------------------------------
 1 | import type { Rule } from "eslint";
 2 | 
 3 | import {
 4 |   defineTemplateBodyVisitor,
 5 |   getElementAttributeValue,
 6 |   makeDocsURL
 7 | } from "../utils";
 8 | import hasFocusableElements from "../utils/hasFocusableElement";
 9 | 
10 | const rule: Rule.RuleModule = {
11 |   meta: {
12 |     type: "problem",
13 |     docs: {
14 |       url: makeDocsURL("no-aria-hidden-on-focusable")
15 |     },
16 |     messages: {
17 |       default:
18 |         "Focusable/Interactive elements must not have an aria-hidden attribute."
19 |     },
20 |     schema: []
21 |   },
22 |   create(context) {
23 |     return defineTemplateBodyVisitor(context, {
24 |       VElement(node) {
25 |         const hasAriaHidden = getElementAttributeValue(node, "aria-hidden");
26 |         if (hasAriaHidden && hasFocusableElements(node)) {
27 |           context.report({
28 |             node: node as any,
29 |             messageId: "default"
30 |           });
31 |         }
32 |       }
33 |     });
34 |   }
35 | };
36 | 
37 | export default rule;
38 | 


--------------------------------------------------------------------------------
/docs/rule-overview/rule-overview.data.mts:
--------------------------------------------------------------------------------
 1 | import { defineLoader } from "vitepress";
 2 | import { rules as baseRules } from "../../src/configs/rules.js";
 3 | import { rules } from "../.vitepress/rulesForSidebar.js";
 4 | 
 5 | export type Data = Array<{
 6 |   name: string;
 7 |   link: string;
 8 |   recommended: boolean;
 9 | }>;
10 | 
11 | declare const data: Data;
12 | export { data };
13 | 
14 | export default defineLoader({
15 |   load(): Data {
16 |     const recommended = getRecommendedRules();
17 |     return rules.map((rule) => ({
18 |       name: rule.text,
19 |       link: formatRuleLink(rule.link),
20 |       recommended: recommended.includes(rule.text)
21 |     }));
22 |   }
23 | });
24 | 
25 | function getRecommendedRules() {
26 |   if (baseRules) {
27 |     return Object.keys(baseRules).map(removeRulePrefix);
28 |   }
29 |   return [];
30 | }
31 | 
32 | function removeRulePrefix(ruleName: string) {
33 |   return ruleName.replace("vuejs-accessibility/", "");
34 | }
35 | 
36 | function formatRuleLink(ruleLink: string) {
37 |   return "..".concat(ruleLink);
38 | }
39 | 


--------------------------------------------------------------------------------
/src/rules/no-onchange.ts:
--------------------------------------------------------------------------------
 1 | import type { Rule } from "eslint";
 2 | 
 3 | import {
 4 |   defineTemplateBodyVisitor,
 5 |   getElementType,
 6 |   hasOnDirective,
 7 |   makeDocsURL
 8 | } from "../utils";
 9 | 
10 | const rule: Rule.RuleModule = {
11 |   meta: {
12 |     type: "problem",
13 |     deprecated: true,
14 |     docs: {
15 |       url: makeDocsURL("no-onchange")
16 |     },
17 |     messages: {
18 |       default:
19 |         "@blur must be used instead of @change, unless absolutely necessary and it causes no negative consequences for keyboard only or screen reader users."
20 |     },
21 |     schema: []
22 |   },
23 |   create(context) {
24 |     return defineTemplateBodyVisitor(context, {
25 |       VElement(node) {
26 |         if (!["select", "option"].includes(getElementType(node))) {
27 |           return;
28 |         }
29 | 
30 |         if (hasOnDirective(node, "change") && !hasOnDirective(node, "blur")) {
31 |           context.report({ node: node as any, messageId: "default" });
32 |         }
33 |       }
34 |     });
35 |   }
36 | };
37 | 
38 | export default rule;
39 | 


--------------------------------------------------------------------------------
/src/rules/iframe-has-title.ts:
--------------------------------------------------------------------------------
 1 | import type { Rule } from "eslint";
 2 | import type { AST } from "vue-eslint-parser";
 3 | 
 4 | import {
 5 |   defineTemplateBodyVisitor,
 6 |   getElementAttributeValue,
 7 |   getElementType,
 8 |   makeDocsURL
 9 | } from "../utils";
10 | 
11 | const rule: Rule.RuleModule = {
12 |   meta: {
13 |     type: "problem",
14 |     docs: {
15 |       url: makeDocsURL("iframe-has-title")
16 |     },
17 |     messages: {
18 |       default: "<iframe> elements must have a unique title property."
19 |     },
20 |     schema: []
21 |   },
22 |   create(context) {
23 |     return defineTemplateBodyVisitor(context, {
24 |       VElement(node: AST.VElement) {
25 |         if (getElementType(node) !== "iframe") {
26 |           return;
27 |         }
28 | 
29 |         const title = getElementAttributeValue(node, "title");
30 | 
31 |         if (title === null || !["string", "object"].includes(typeof title)) {
32 |           context.report({ node: node as any, messageId: "default" });
33 |         }
34 |       }
35 |     });
36 |   }
37 | };
38 | 
39 | export default rule;
40 | 


--------------------------------------------------------------------------------
/src/rules/__tests__/anchor-has-content.test.ts:
--------------------------------------------------------------------------------
 1 | import rule from "../anchor-has-content";
 2 | import makeRuleTester from "./makeRuleTester";
 3 | 
 4 | makeRuleTester("anchor-has-content", rule, {
 5 |   valid: [
 6 |     "<a>Anchor Content!</a>",
 7 |     "<a is='TextWrapper' />",
 8 |     "<a v-text='msg' />",
 9 |     "<a v-html='msg' />",
10 |     "<a><slot /></a>",
11 |     "<VAnchor  />",
12 |     "<a aria-label='This is my label' />",
13 |     "<a><img alt='foo' /></a>",
14 |     "<a><span v-html='msg' /></a>",
15 |     "<a><span v-text='msg' /></a>",
16 |     {
17 |       code: "<a v-accessibleDirective='msg' />",
18 |       options: [{ accessibleDirectives: ["accessibleDirective"] }]
19 |     },
20 |     {
21 |       code: "<a><accessible-child /></a>",
22 |       options: [{ accessibleChildren: ["AccessibleChild"] }]
23 |     }
24 |   ],
25 |   invalid: [
26 |     "<a />",
27 |     {
28 |       code: "<v-anchor  />",
29 |       options: [{ components: ["VAnchor"] }],
30 |       errors: [{ messageId: "default" }]
31 |     },
32 |     "<a><img aria-hidden alt='foo' /></a>"
33 |   ]
34 | });
35 | 


--------------------------------------------------------------------------------
/src/rules/no-role-presentation-on-focusable.ts:
--------------------------------------------------------------------------------
 1 | import type { Rule } from "eslint";
 2 | 
 3 | import {
 4 |   defineTemplateBodyVisitor,
 5 |   getElementAttributeValue,
 6 |   makeDocsURL
 7 | } from "../utils";
 8 | import hasFocusableElements from "../utils/hasFocusableElement";
 9 | 
10 | const rule: Rule.RuleModule = {
11 |   meta: {
12 |     type: "problem",
13 |     docs: {
14 |       url: makeDocsURL("no-role-presentation-on-focusable")
15 |     },
16 |     messages: {
17 |       default:
18 |         "Focusable/Interactive elements must not have a presentation role attribute."
19 |     },
20 |     schema: []
21 |   },
22 |   create(context) {
23 |     return defineTemplateBodyVisitor(context, {
24 |       VElement(node) {
25 |         const hasRolePresentation =
26 |           getElementAttributeValue(node, "role") === "presentation";
27 |         if (hasRolePresentation && hasFocusableElements(node)) {
28 |           context.report({
29 |             node: node as any,
30 |             messageId: "default"
31 |           });
32 |         }
33 |       }
34 |     });
35 |   }
36 | };
37 | 
38 | export default rule;
39 | 


--------------------------------------------------------------------------------
/src/rules/aria-props.ts:
--------------------------------------------------------------------------------
 1 | import type { Rule } from "eslint";
 2 | 
 3 | import { aria } from "aria-query";
 4 | import {
 5 |   defineTemplateBodyVisitor,
 6 |   getAttributeName,
 7 |   makeDocsURL
 8 | } from "../utils";
 9 | 
10 | const rule: Rule.RuleModule = {
11 |   meta: {
12 |     type: "problem",
13 |     docs: {
14 |       url: makeDocsURL("aria-props")
15 |     },
16 |     messages: {
17 |       default: "{{name}} This attribute is an invalid ARIA attribute."
18 |     },
19 |     schema: []
20 |   },
21 |   create(context) {
22 |     return defineTemplateBodyVisitor(context, {
23 |       VAttribute(node) {
24 |         const name = getAttributeName(node);
25 |         const lowered = name && name.toLowerCase();
26 | 
27 |         if (
28 |           lowered &&
29 |           lowered.startsWith("aria-") &&
30 |           !aria.has(lowered as any)
31 |         ) {
32 |           context.report({
33 |             node: node as any,
34 |             messageId: "default",
35 |             data: { name: name as string }
36 |           });
37 |         }
38 |       }
39 |     });
40 |   }
41 | };
42 | 
43 | export default rule;
44 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2020-present Kevin Newton
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/src/utils/hasAccessibleChild.ts:
--------------------------------------------------------------------------------
 1 | import type { AST } from "vue-eslint-parser";
 2 | 
 3 | import getElementType from "./getElementType";
 4 | import isHiddenFromScreenReader from "./isHiddenFromScreenReader";
 5 | 
 6 | function hasAccessibleChild(
 7 |   node: AST.VElement,
 8 |   accessibleChildTypes: string[] = []
 9 | ): boolean {
10 |   return node.children.some((child) => {
11 |     switch (child.type) {
12 |       case "VText":
13 |         return child.value.trim().length > 0;
14 |       case "VElement": {
15 |         const elementType = getElementType(child);
16 | 
17 |         return (
18 |           accessibleChildTypes.includes(elementType) ||
19 |           child.rawName === "slot" ||
20 |           (!isHiddenFromScreenReader(child) &&
21 |             hasAccessibleChild(child, accessibleChildTypes))
22 |         );
23 |       }
24 |       case "VExpressionContainer":
25 |         if (child.expression && child.expression.type === "Identifier") {
26 |           return child.expression.name !== "undefined";
27 |         }
28 |         return true;
29 |       default:
30 |         return false;
31 |     }
32 |   });
33 | }
34 | 
35 | export default hasAccessibleChild;
36 | 


--------------------------------------------------------------------------------
/src/utils/__tests__/defineTemplateBodyVisitor.test.ts:
--------------------------------------------------------------------------------
 1 | import assert from "assert";
 2 | import { Linter } from "eslint";
 3 | import plugin from "../../index";
 4 | 
 5 | describe("Don't crash even if without vue-eslint-parser.", () => {
 6 |   const code = "var a;";
 7 | 
 8 |   for (const [key, rule] of Object.entries(plugin.rules)) {
 9 |     const ruleId = `vuejs-accessibility/${key}`;
10 | 
11 |     it(ruleId, () => {
12 |       const linter = new Linter();
13 |       linter.defineRule(ruleId, rule);
14 |       const config: Linter.Config = {
15 |         parser: "espree",
16 |         rules: {
17 |           [ruleId]: "error"
18 |         }
19 |       };
20 |       const resultVue = linter.verifyAndFix(code, config, "test.vue");
21 |       for (const { message } of resultVue.messages) {
22 |         assert.strictEqual(
23 |           message,
24 |           "Use the latest vue-eslint-parser. See also https://eslint.vuejs.org/user-guide/#what-is-the-use-the-latest-vue-eslint-parser-error."
25 |         );
26 |       }
27 | 
28 |       const resultJs = linter.verifyAndFix(code, config, "test.js");
29 |       assert.strictEqual(resultJs.messages.length, 0);
30 |     });
31 |   }
32 | });
33 | 


--------------------------------------------------------------------------------
/src/rules/__tests__/no-aria-hidden-on-focusable.test.ts:
--------------------------------------------------------------------------------
 1 | import rule from "../no-aria-hidden-on-focusable";
 2 | import makeRuleTester from "./makeRuleTester";
 3 | 
 4 | makeRuleTester("no-presentation-role-or-aria-hidden-on-focusable", rule, {
 5 |   valid: [
 6 |     "<button>Submit</button>",
 7 |     "<div aria-hidden='true'><button tabindex='-1'>Some text</button></div>",
 8 |     "<div><button>Submit</button></div>",
 9 |     "<a href='#' tabindex='-1'>link</a>",
10 |     "<button tabindex='-1' aria-hidden='true'>Press</button>",
11 |     "<div aria-hidden='true'><a href='#' tabindex='-1'>Link</a></div>"
12 |   ],
13 |   invalid: [
14 |     {
15 |       code: "<div aria-hidden='true'><button>Submit</button></div>",
16 |       errors: [{ messageId: "default" }]
17 |     },
18 |     {
19 |       code: "<button type='button' aria-hidden='true'>Submit</button>",
20 |       errors: [{ messageId: "default" }]
21 |     },
22 |     {
23 |       code: "<a href='#' aria-hidden='true'>Link</a>",
24 |       errors: [{ messageId: "default" }]
25 |     },
26 |     {
27 |       code: "<span tabindex='0' aria-hidden='true'><em>Icon</em></span>",
28 |       errors: [{ messageId: "default" }]
29 |     }
30 |   ]
31 | });
32 | 


--------------------------------------------------------------------------------
/src/rules/__tests__/no-role-presentation-on-focusable.test.ts:
--------------------------------------------------------------------------------
 1 | import rule from "../no-role-presentation-on-focusable";
 2 | import makeRuleTester from "./makeRuleTester";
 3 | 
 4 | makeRuleTester("no-role-presentation-role-on-focusable", rule, {
 5 |   valid: [
 6 |     "<button>Submit</button>",
 7 |     "<div role='presentation'><button tabindex='-1'>Some text</button></div>",
 8 |     "<div><button>Submit</button></div>",
 9 |     "<a href='#' tabindex='-1'>link</a>",
10 |     "<button tabindex='-1' role='presentation'>Press</button>",
11 |     "<div role='presentation'><a href='#' tabindex='-1'>Link</a></div>"
12 |   ],
13 |   invalid: [
14 |     {
15 |       code: "<div role='presentation'><button>Submit</button></div>",
16 |       errors: [{ messageId: "default" }]
17 |     },
18 |     {
19 |       code: "<button type='button' role='presentation'>Submit</button>",
20 |       errors: [{ messageId: "default" }]
21 |     },
22 |     {
23 |       code: "<a href='#' role='presentation'>Link</a>",
24 |       errors: [{ messageId: "default" }]
25 |     },
26 |     {
27 |       code: "<span tabindex='0' role='presentation'><em>Icon</em></span>",
28 |       errors: [{ messageId: "default" }]
29 |     }
30 |   ]
31 | });
32 | 


--------------------------------------------------------------------------------
/docs/rules/aria-role.md:
--------------------------------------------------------------------------------
 1 | # aria-role
 2 | 
 3 | Elements with ARIA roles must use a valid, non-abstract ARIA role.
 4 | 
 5 | ## 🔧 Options
 6 | 
 7 | This rule takes one optional object argument of type object:
 8 | 
 9 | ```json
10 | {
11 |   "rules": {
12 |     "vuejs-accessibility/aria-role": ["error", { "ignoreNonDOM": true }]
13 |   }
14 | }
15 | ```
16 | 
17 | ### ✔ Succeed
18 | 
19 | ```vue
20 | <template>
21 |   <div role="button" />
22 |   <!-- Good: "button" is a valid ARIA role -->
23 |   <div :role="role" />
24 |   <!-- Good: role is a variable & cannot be determined until runtime. -->
25 |   <div />
26 |   <!-- Good: No ARIA role -->
27 |   <Foo role="test" />
28 |   <!-- Good: ignoreNonDOM is set to true -->
29 | </template>
30 | ```
31 | 
32 | ### ❌ Fail
33 | 
34 | ```vue
35 | <template>
36 |   <div role="datepicker" />
37 |   <!-- Bad: "datepicker" is not an ARIA role -->
38 |   <div role="range" />
39 |   <!-- Bad: "range" is an _abstract_ ARIA role -->
40 | </template>
41 | ```
42 | 
43 | ## 📚 Resources
44 | 
45 | - [WAI-ARIA](https://www.w3.org/TR/wai-aria/#role_definitions) site.
46 | - [AX_ARIA_01](https://github.com/GoogleChrome/accessibility-developer-tools/wiki/Audit-Rules#ax_aria_01)
47 | - [DPUB-ARIA roles](https://www.w3.org/TR/dpub-aria-1.0/)
48 | 


--------------------------------------------------------------------------------
/docs/rules/no-redundant-roles.md:
--------------------------------------------------------------------------------
 1 | # no-redundant-roles
 2 | 
 3 | Some HTML elements have native semantics that are implemented by the browser. This includes default/implicit ARIA roles. Setting an ARIA role that matches its default/implicit role is redundant since it is already set by the browser.
 4 | 
 5 | ## 🔧 Options
 6 | 
 7 | The default options for this rule allow an implicit role of `navigation` to be applied to a `nav` element as is [advised by W3](https://www.w3.org/WAI/GL/wiki/Using_HTML5_nav_element#Example:The_.3Cnav.3E_element). The options are provided as an object keyed by HTML element name; the value is an array of implicit ARIA roles that are allowed on the specified element.
 8 | 
 9 | ```json
10 | {
11 |   "vuejs-accessibility/no-redundant-roles": [
12 |     "error",
13 |     {
14 |       "nav": ["navigation"]
15 |     }
16 |   ]
17 | }
18 | ```
19 | 
20 | ### ✔ Succeed
21 | 
22 | ```vue
23 | <template>
24 |   <div />
25 |   <button role="presentation" />
26 | </template>
27 | ```
28 | 
29 | ### ❌ Fail
30 | 
31 | <!-- eslint-ignore -->
32 | 
33 | ```vue
34 | <template>
35 |   <button role="button" />
36 |   <img role="img" src="foo.jpg" />
37 | </template>
38 | ```
39 | 
40 | ## 📚 Resources
41 | 
42 | - [W3](https://www.w3.org/TR/html5/dom.html#aria-role-attribute)
43 | 


--------------------------------------------------------------------------------
/docs/rules/no-distracting-elements.md:
--------------------------------------------------------------------------------
 1 | # no-distracting-elements
 2 | 
 3 | Enforces that no distracting elements are used. Elements that can be visually distracting can cause accessibility issues with visually impaired users. Such elements are most likely deprecated, and should be avoided. By default, the following elements are visually distracting: `<marquee>` and `<blink>`.
 4 | 
 5 | ## 🔧 Options
 6 | 
 7 | This rule takes one optional object argument of type object:
 8 | 
 9 | ```json
10 | {
11 |   "rules": {
12 |     "vuejs-accessibility/no-distracting-elements": [
13 |       "error",
14 |       {
15 |         "elements": ["marquee", "blink"]
16 |       }
17 |     ]
18 |   }
19 | }
20 | ```
21 | 
22 | For the `elements` option, these strings determine which elements should be checked for usage. This shouldn't need to be configured unless you have a seriously compelling use case for these elements.
23 | 
24 | ### ✔ Succeed
25 | 
26 | ```vue
27 | <template>
28 |   <div />
29 | </template>
30 | ```
31 | 
32 | ### ❌ Fail
33 | 
34 | ```vue
35 | <template>
36 |   <marquee />
37 |   <blink />
38 | </template>
39 | ```
40 | 
41 | ## 📚 Resources
42 | 
43 | - [axe-core marquee](https://dequeuniversity.com/rules/axe/3.2/marquee)
44 | - [axe-core blink](https://dequeuniversity.com/rules/axe/3.2/blink)
45 | 


--------------------------------------------------------------------------------
/src/rules/click-events-have-key-events.ts:
--------------------------------------------------------------------------------
 1 | import type { Rule } from "eslint";
 2 | 
 3 | import {
 4 |   defineTemplateBodyVisitor,
 5 |   hasOnDirective,
 6 |   hasOnDirectives,
 7 |   isCustomComponent,
 8 |   isHiddenFromScreenReader,
 9 |   isInteractiveElement,
10 |   isPresentationRole,
11 |   makeDocsURL
12 | } from "../utils";
13 | 
14 | const rule: Rule.RuleModule = {
15 |   meta: {
16 |     type: "problem",
17 |     docs: {
18 |       url: makeDocsURL("click-events-have-key-events")
19 |     },
20 |     messages: {
21 |       default:
22 |         "Visible, non-interactive elements with click handlers must have at least one keyboard listener."
23 |     },
24 |     schema: []
25 |   },
26 |   create(context) {
27 |     return defineTemplateBodyVisitor(context, {
28 |       VElement(node) {
29 |         if (
30 |           !isCustomComponent(node) &&
31 |           hasOnDirective(node, "click") &&
32 |           !isHiddenFromScreenReader(node) &&
33 |           !isPresentationRole(node) &&
34 |           !isInteractiveElement(node) &&
35 |           !hasOnDirectives(node, ["keydown", "keyup", "keypress"])
36 |         ) {
37 |           context.report({ node: node as any, messageId: "default" });
38 |         }
39 |       }
40 |     });
41 |   }
42 | };
43 | 
44 | export default rule;
45 | 


--------------------------------------------------------------------------------
/src/rules/aria-unsupported-elements.ts:
--------------------------------------------------------------------------------
 1 | import type { Rule } from "eslint";
 2 | import { aria, dom } from "aria-query";
 3 | 
 4 | import {
 5 |   defineTemplateBodyVisitor,
 6 |   getAttributeName,
 7 |   getElementType,
 8 |   makeDocsURL
 9 | } from "../utils";
10 | 
11 | const rule: Rule.RuleModule = {
12 |   meta: {
13 |     type: "problem",
14 |     docs: {
15 |       url: makeDocsURL("aria-unsupported-elements")
16 |     },
17 |     messages: {
18 |       default: `This element does not support ARIA roles, states, and properties. Try removing the "{{name}}" attribute.`
19 |     },
20 |     schema: []
21 |   },
22 |   create(context) {
23 |     return defineTemplateBodyVisitor(context, {
24 |       VElement(node) {
25 |         if (!(dom.get(getElementType(node)) || {}).reserved) {
26 |           return;
27 |         }
28 | 
29 |         node.startTag.attributes.forEach((attribute) => {
30 |           const name = getAttributeName(attribute);
31 | 
32 |           if (name && (aria.has(name as any) || name === "role")) {
33 |             context.report({
34 |               node: node as any,
35 |               messageId: "default",
36 |               data: { name }
37 |             });
38 |           }
39 |         });
40 |       }
41 |     });
42 |   }
43 | };
44 | 
45 | export default rule;
46 | 


--------------------------------------------------------------------------------
/src/configs/rules.ts:
--------------------------------------------------------------------------------
 1 | import type { Linter } from "eslint";
 2 | 
 3 | const rules = {
 4 |   "vuejs-accessibility/alt-text": "error",
 5 |   "vuejs-accessibility/anchor-has-content": "error",
 6 |   "vuejs-accessibility/aria-props": "error",
 7 |   "vuejs-accessibility/aria-role": "error",
 8 |   "vuejs-accessibility/aria-unsupported-elements": "error",
 9 |   "vuejs-accessibility/click-events-have-key-events": "error",
10 |   "vuejs-accessibility/form-control-has-label": "error",
11 |   "vuejs-accessibility/heading-has-content": "error",
12 |   "vuejs-accessibility/iframe-has-title": "error",
13 |   "vuejs-accessibility/interactive-supports-focus": "error",
14 |   "vuejs-accessibility/label-has-for": "error",
15 |   "vuejs-accessibility/media-has-caption": "error",
16 |   "vuejs-accessibility/mouse-events-have-key-events": "error",
17 |   "vuejs-accessibility/no-access-key": "error",
18 |   "vuejs-accessibility/no-autofocus": "error",
19 |   "vuejs-accessibility/no-distracting-elements": "error",
20 |   "vuejs-accessibility/no-redundant-roles": "error",
21 |   "vuejs-accessibility/no-static-element-interactions": "error",
22 |   "vuejs-accessibility/role-has-required-aria-props": "error",
23 |   "vuejs-accessibility/tabindex-no-positive": "error"
24 | } satisfies Linter.RulesRecord;
25 | 
26 | export { rules };
27 | 


--------------------------------------------------------------------------------
/__tests__/integrations/flat-config.spec.ts:
--------------------------------------------------------------------------------
 1 | import cp from "child_process";
 2 | import path from "path";
 3 | import semver from "semver";
 4 | import { readPackageJson } from "./helper";
 5 | 
 6 | const ESLINT = `.${path.sep}node_modules${path.sep}.bin${path.sep}eslint`;
 7 | 
 8 | describe("Integration with flat config", () => {
 9 |   let originalCwd: null | string = null;
10 |   const dirFixture = path.join(__dirname, "__fixtures__/flat-config");
11 | 
12 |   beforeEach(() => {
13 |     originalCwd = process.cwd();
14 |     process.chdir(dirFixture);
15 |     cp.execSync("npm i -f", { stdio: "inherit" });
16 |   });
17 |   afterEach(() => {
18 |     originalCwd && process.chdir(originalCwd);
19 |   });
20 | 
21 |   it("should work with config", () => {
22 |     expect.assertions(2);
23 | 
24 |     const eslintPackageJson = readPackageJson(
25 |       path.resolve(dirFixture, "node_modules/eslint")
26 |     );
27 | 
28 |     if (!semver.satisfies(process.version, eslintPackageJson.engines.node)) {
29 |       return;
30 |     }
31 | 
32 |     const result = JSON.parse(
33 |       cp.execSync(`${ESLINT} a.vue --max-warnings 1 --format=json`, {
34 |         encoding: "utf-8"
35 |       })
36 |     );
37 |     expect(result.length).toBe(1);
38 |     expect(result[0].messages[0].messageId).toBe("imgMissingAlt");
39 |   });
40 | });
41 | 


--------------------------------------------------------------------------------
/src/utils/matchesElementRole.ts:
--------------------------------------------------------------------------------
 1 | import type { AST } from "vue-eslint-parser";
 2 | import type { ARIARoleRelationConcept } from "aria-query";
 3 | 
 4 | import getElementType from "./getElementType";
 5 | import getElementAttributeValue from "./getElementAttributeValue";
 6 | 
 7 | function matchesElementRole(
 8 |   node: AST.VElement,
 9 |   elementRole: ARIARoleRelationConcept
10 | ) {
11 |   const { name, attributes } = elementRole;
12 |   if (name !== getElementType(node)) {
13 |     return false;
14 |   }
15 | 
16 |   return (attributes || []).every((attribute) => {
17 |     const value = getElementAttributeValue(node, attribute.name);
18 | 
19 |     if (attribute.value) {
20 |       return value === attribute.value;
21 |     }
22 | 
23 |     if (attribute.constraints) {
24 |       // TODO: We shouldn't have to cast this to any. Are we using the wrong
25 |       // comparison function here? Is this maybe for an old version of
26 |       // aria-query?
27 |       const constraint = attribute.constraints[0] as any;
28 | 
29 |       switch (constraint) {
30 |         case "set":
31 |           return value;
32 |         case "undefined":
33 |           return !value;
34 |         default:
35 |           return null;
36 |       }
37 |     }
38 | 
39 |     return value;
40 |   });
41 | }
42 | 
43 | export default matchesElementRole;
44 | 


--------------------------------------------------------------------------------
/__tests__/integrations/legacy-config.spec.ts:
--------------------------------------------------------------------------------
 1 | import cp from "child_process";
 2 | import path from "path";
 3 | import semver from "semver";
 4 | import { readPackageJson } from "./helper";
 5 | 
 6 | const ESLINT = `.${path.sep}node_modules${path.sep}.bin${path.sep}eslint`;
 7 | 
 8 | describe("Integration with legacy config", () => {
 9 |   let originalCwd: null | string = null;
10 |   const dirFixture = path.join(__dirname, "__fixtures__/legacy-config");
11 | 
12 |   beforeEach(() => {
13 |     originalCwd = process.cwd();
14 |     process.chdir(dirFixture);
15 |     cp.execSync("npm i -f", { stdio: "inherit" });
16 |   });
17 |   afterEach(() => {
18 |     originalCwd && process.chdir(originalCwd);
19 |   });
20 | 
21 |   it("should work with config", () => {
22 |     expect.assertions(2);
23 | 
24 |     const eslintPackageJson = readPackageJson(
25 |       path.resolve(dirFixture, "node_modules/eslint")
26 |     );
27 | 
28 |     if (!semver.satisfies(process.version, eslintPackageJson.engines.node)) {
29 |       return;
30 |     }
31 | 
32 |     const result = JSON.parse(
33 |       cp.execSync(`${ESLINT} a.vue --max-warnings 1 --format=json`, {
34 |         encoding: "utf-8"
35 |       })
36 |     );
37 |     expect(result.length).toBe(1);
38 |     expect(result[0].messages[0].messageId).toBe("imgMissingAlt");
39 |   });
40 | });
41 | 


--------------------------------------------------------------------------------
/src/rules/__tests__/role-has-required-aria-props.test.ts:
--------------------------------------------------------------------------------
 1 | import rule from "../role-has-required-aria-props";
 2 | import makeRuleTester from "./makeRuleTester";
 3 | 
 4 | makeRuleTester("role-has-required-aria-props", rule, {
 5 |   valid: [
 6 |     "<input role='switch' type='checkbox' aria-labelledby='test' />",
 7 |     "<span role='checkbox' aria-checked='false' aria-labelledby='test' tabindex='0' />",
 8 |     "<span :role='role' aria-checked='false' aria-labelledby='test' tabindex='0' />",
 9 |     "<span :role='role' />"
10 |   ],
11 |   invalid: [
12 |     {
13 |       code: "<input role='switch' aria-labelledby='test' />",
14 |       errors: [
15 |         {
16 |           messageId: "default",
17 |           data: { role: "switch", attributes: "aria-checked" }
18 |         }
19 |       ]
20 |     },
21 |     {
22 |       code: "<span role='checkbox' aria-labelledby='test' tabindex='0' />",
23 |       errors: [
24 |         {
25 |           messageId: "default",
26 |           data: { role: "checkbox", attributes: "aria-checked" }
27 |         }
28 |       ]
29 |     },
30 |     {
31 |       code: "<span role='radio' aria-labelledby='test' tabindex='0' />",
32 |       errors: [
33 |         {
34 |           messageId: "default",
35 |           data: { role: "radio", attributes: "aria-checked" }
36 |         }
37 |       ]
38 |     }
39 |   ]
40 | });
41 | 


--------------------------------------------------------------------------------
/src/rules/no-autofocus.ts:
--------------------------------------------------------------------------------
 1 | import type { Rule } from "eslint";
 2 | import { dom } from "aria-query";
 3 | 
 4 | import {
 5 |   defineTemplateBodyVisitor,
 6 |   getElementType,
 7 |   isAttribute,
 8 |   makeDocsURL
 9 | } from "../utils";
10 | 
11 | const rule: Rule.RuleModule = {
12 |   meta: {
13 |     type: "problem",
14 |     docs: {
15 |       url: makeDocsURL("no-autofocus")
16 |     },
17 |     messages: {
18 |       default:
19 |         "The autofocus prop should not be used, as it can reduce usability and accessibility for users."
20 |     },
21 |     schema: [
22 |       {
23 |         type: "object",
24 |         properties: {
25 |           ignoreNonDOM: {
26 |             type: "boolean",
27 |             default: true
28 |           }
29 |         },
30 |         additionalProperties: false
31 |       }
32 |     ]
33 |   },
34 |   create(context) {
35 |     return defineTemplateBodyVisitor(context, {
36 |       VAttribute(node) {
37 |         if (!isAttribute(node, "autofocus")) {
38 |           return;
39 |         }
40 | 
41 |         const { ignoreNonDOM } = context.options[0] || {};
42 |         if (ignoreNonDOM && !dom.has(getElementType(node.parent.parent))) {
43 |           return;
44 |         }
45 | 
46 |         context.report({ node: node as any, messageId: "default" });
47 |       }
48 |     });
49 |   }
50 | };
51 | 
52 | export default rule;
53 | 


--------------------------------------------------------------------------------
/src/rules/mouse-events-have-key-events.ts:
--------------------------------------------------------------------------------
 1 | import type { Rule } from "eslint";
 2 | 
 3 | import {
 4 |   defineTemplateBodyVisitor,
 5 |   hasOnDirectives,
 6 |   makeDocsURL
 7 | } from "../utils";
 8 | 
 9 | const rule: Rule.RuleModule = {
10 |   meta: {
11 |     type: "problem",
12 |     docs: {
13 |       url: makeDocsURL("mouse-events-have-key-events")
14 |     },
15 |     messages: {
16 |       mouseOver:
17 |         "@mouseover, @mouseenter, or @hover must be accompanied by @focusin or @focus for accessibility.",
18 |       mouseOut:
19 |         "@mouseout or @mouseleave must be accompanied by @focusout or @blur for accessibility."
20 |     },
21 |     schema: []
22 |   },
23 |   create(context) {
24 |     return defineTemplateBodyVisitor(context, {
25 |       VElement(node) {
26 |         if (
27 |           hasOnDirectives(node, ["mouseover", "mouseenter", "hover"]) &&
28 |           !hasOnDirectives(node, ["focus", "focusin"])
29 |         ) {
30 |           context.report({ node: node as any, messageId: "mouseOver" });
31 |         }
32 | 
33 |         if (
34 |           hasOnDirectives(node, ["mouseout", "mouseleave"]) &&
35 |           !hasOnDirectives(node, ["blur", "focusout"])
36 |         ) {
37 |           context.report({ node: node as any, messageId: "mouseOut" });
38 |         }
39 |       }
40 |     });
41 |   }
42 | };
43 | 
44 | export default rule;
45 | 


--------------------------------------------------------------------------------
/src/rules/__tests__/label-has-for.test.ts:
--------------------------------------------------------------------------------
 1 | import rule from "../label-has-for";
 2 | import makeRuleTester from "./makeRuleTester";
 3 | 
 4 | makeRuleTester("label-has-for", rule, {
 5 |   valid: [
 6 |     "<label for='id'><input type='text' /></label>",
 7 |     "<label :for='id'><input type='text' :id='id' /></label>",
 8 |     "<label for='id'><span><input type='text' /></span></label>",
 9 |     {
10 |       code: "<label for='id' /><input type='text' />",
11 |       options: [{ required: { some: ["nesting", "id"] } }]
12 |     },
13 |     {
14 |       code: "<label for='id'><slot /></label>",
15 |       options: [{ allowChildren: true }]
16 |     },
17 |     {
18 |       code: "<label for='id'><span><VInput /><span></label>",
19 |       options: [{ controlComponents: ["VInput"] }]
20 |     },
21 |     {
22 |       code: "<label for='id'><v-input /></label>",
23 |       options: [{ controlComponents: ["VInput"] }]
24 |     }
25 |   ],
26 |   invalid: [
27 |     "<label for='id' />",
28 |     "<label><input type='text' /></label>",
29 |     "<label for='id'><slot /></label>",
30 |     "<label for='id'><div /></label>",
31 |     "<label for='id'><VInput /></label>",
32 |     "<label for='id'><div><VInput /></div></label>",
33 |     {
34 |       code: "<v-label for='id' />",
35 |       options: [{ components: ["VLabel"] }],
36 |       errors: [{ messageId: "default" }]
37 |     }
38 |   ]
39 | });
40 | 


--------------------------------------------------------------------------------
/src/utils/isInteractiveElement.ts:
--------------------------------------------------------------------------------
 1 | import type { AST } from "vue-eslint-parser";
 2 | import { elementRoles, dom, roles } from "aria-query";
 3 | 
 4 | import getElementType from "./getElementType";
 5 | import matchesElementRole from "./matchesElementRole";
 6 | 
 7 | // "toolbar" does not descend from widget, but it does support
 8 | // aria-activedescendant, thus in practice we treat it as a widget.
 9 | const interactiveRoles = new Set(["toolbar"]);
10 | 
11 | for (const [name, definition] of roles.entries()) {
12 |   if (
13 |     !definition.abstract &&
14 |     definition.superClass.some((classes) => classes.includes("widget"))
15 |   ) {
16 |     interactiveRoles.add(name);
17 |   }
18 | }
19 | 
20 | // We need to explicitly list that plain inputs are interactive, even if they
21 | // don't have an explicit role.
22 | const interactiveElements = [{ name: "input" }];
23 | 
24 | for (const [element, names] of elementRoles.entries()) {
25 |   if ([...names].some((name) => interactiveRoles.has(name))) {
26 |     interactiveElements.push(element);
27 |   }
28 | }
29 | 
30 | function isInteractiveElement(node: AST.VElement) {
31 |   const elementType = getElementType(node);
32 | 
33 |   if (!dom.has(elementType)) {
34 |     return false;
35 |   }
36 | 
37 |   return interactiveElements.some((elementRole) =>
38 |     matchesElementRole(node, elementRole)
39 |   );
40 | }
41 | 
42 | export default isInteractiveElement;
43 | 


--------------------------------------------------------------------------------
/src/rules/no-distracting-elements.ts:
--------------------------------------------------------------------------------
 1 | import type { Rule } from "eslint";
 2 | 
 3 | import {
 4 |   defineTemplateBodyVisitor,
 5 |   getElementType,
 6 |   makeDocsURL,
 7 |   makeKebabCase
 8 | } from "../utils";
 9 | 
10 | const defaultElements = ["marquee", "blink"];
11 | 
12 | const rule: Rule.RuleModule = {
13 |   meta: {
14 |     type: "problem",
15 |     docs: {
16 |       url: makeDocsURL("no-distracting-elements")
17 |     },
18 |     messages: {
19 |       default:
20 |         "Do not use <{{elementType}}> elements as they can create visual accessibility issues and are deprecated."
21 |     },
22 |     schema: [
23 |       {
24 |         type: "object",
25 |         elements: {
26 |           type: "array",
27 |           items: {
28 |             type: "string",
29 |             enum: defaultElements
30 |           }
31 |         }
32 |       }
33 |     ]
34 |   },
35 |   create(context) {
36 |     return defineTemplateBodyVisitor(context, {
37 |       VElement(node) {
38 |         const { elements = defaultElements } = context.options[0] || {};
39 |         const elementType = getElementType(node);
40 | 
41 |         if (elements.map(makeKebabCase).includes(elementType)) {
42 |           context.report({
43 |             node: node as any,
44 |             messageId: "default",
45 |             data: { elementType }
46 |           });
47 |         }
48 |       }
49 |     });
50 |   }
51 | };
52 | 
53 | export default rule;
54 | 


--------------------------------------------------------------------------------
/src/rules/no-static-element-interactions.ts:
--------------------------------------------------------------------------------
 1 | import { Rule } from "eslint";
 2 | import {
 3 |   defineTemplateBodyVisitor,
 4 |   getElementAttributeValue,
 5 |   hasOnDirectives,
 6 |   interactiveHandlers,
 7 |   isCustomComponent,
 8 |   isHiddenFromScreenReader,
 9 |   isInteractiveElement,
10 |   isInteractiveRole,
11 |   isPresentationRole,
12 |   makeDocsURL
13 | } from "../utils";
14 | 
15 | const rule: Rule.RuleModule = {
16 |   meta: {
17 |     type: "problem",
18 |     docs: {
19 |       url: makeDocsURL("no-static-element-interactions")
20 |     },
21 |     messages: {
22 |       default:
23 |         "Visible, non-interactive elements should not have an interactive handler."
24 |     },
25 |     schema: []
26 |   },
27 |   create(context: Rule.RuleContext): Rule.RuleListener {
28 |     return defineTemplateBodyVisitor(context, {
29 |       VElement(node) {
30 |         const role = getElementAttributeValue(node, "role");
31 | 
32 |         if (
33 |           isCustomComponent(node) ||
34 |           isHiddenFromScreenReader(node) ||
35 |           isPresentationRole(node)
36 |         ) {
37 |           return;
38 |         }
39 | 
40 |         if (
41 |           hasOnDirectives(node, interactiveHandlers) &&
42 |           !isInteractiveElement(node) &&
43 |           !isInteractiveRole(role)
44 |         ) {
45 |           context.report({ node: node as any, messageId: "default" });
46 |         }
47 |       }
48 |     });
49 |   }
50 | };
51 | 
52 | export default rule;
53 | 


--------------------------------------------------------------------------------
/src/rules/__tests__/makeRuleTester.ts:
--------------------------------------------------------------------------------
 1 | import type { Rule } from "eslint";
 2 | import { RuleTester } from "eslint";
 3 | 
 4 | type ValidCase = string | { code: string; options?: any[] };
 5 | type InvalidCase = string | { code: string; options?: any[]; errors: any[] };
 6 | type Config = { valid: ValidCase[]; invalid: InvalidCase[] };
 7 | 
 8 | const filename = "test.vue";
 9 | const makeTemplate = (code: string) => `<template>${code}</template>`;
10 | 
11 | function makeValidExample(example: ValidCase) {
12 |   if (typeof example === "string") {
13 |     return { filename, code: makeTemplate(example) };
14 |   }
15 | 
16 |   return { ...example, filename, code: makeTemplate(example.code) };
17 | }
18 | 
19 | function makeInvalidExample(example: InvalidCase) {
20 |   if (typeof example === "string") {
21 |     return {
22 |       filename,
23 |       code: makeTemplate(example),
24 |       errors: [{ messageId: "default" }]
25 |     };
26 |   }
27 | 
28 |   return { ...example, filename, code: makeTemplate(example.code) };
29 | }
30 | 
31 | function makeRuleTester(name: string, rule: Rule.RuleModule, config: Config) {
32 |   const ruleTester = new RuleTester({
33 |     parser: require.resolve("vue-eslint-parser"),
34 |     parserOptions: {
35 |       ecmaVersion: 2015,
36 |       sourceType: "module"
37 |     }
38 |   });
39 | 
40 |   ruleTester.run(name, rule, {
41 |     valid: config.valid.map(makeValidExample),
42 |     invalid: config.invalid.map(makeInvalidExample)
43 |   });
44 | }
45 | 
46 | export default makeRuleTester;
47 | 


--------------------------------------------------------------------------------
/src/rules/__tests__/alt-text.test.ts:
--------------------------------------------------------------------------------
 1 | import rule from "../alt-text";
 2 | import makeRuleTester from "./makeRuleTester";
 3 | 
 4 | makeRuleTester("alt-text", rule, {
 5 |   valid: [
 6 |     "<img src='foo' alt='Foo eating a sandwich.' />",
 7 |     "<img src='foo' alt='' />",
 8 |     "<img src='foo' :alt='msg' />",
 9 |     "<object aria-label='foo' />",
10 |     "<object :aria-label='foo' />",
11 |     "<object aria-labelledby='id1' />",
12 |     "<object title='foo' />",
13 |     "<object>test</object>",
14 |     "<input :type='image' alt='This is descriptive!' />",
15 |     "<input :type='true' />"
16 |   ],
17 |   invalid: [
18 |     {
19 |       code: "<img src='foo' />",
20 |       errors: [{ messageId: "imgMissingAlt" }]
21 |     },
22 |     {
23 |       code: "<img src='foo' alt />",
24 |       errors: [{ messageId: "imgInvalidAlt" }]
25 |     },
26 |     {
27 |       code: "<img src='foo' role='presentation' />",
28 |       errors: [{ messageId: "imgPresentation" }]
29 |     },
30 |     {
31 |       code: "<object />",
32 |       errors: [{ messageId: "object" }]
33 |     },
34 |     {
35 |       code: "<area />",
36 |       errors: [{ messageId: "area" }]
37 |     },
38 |     {
39 |       code: "<input type='image' />",
40 |       errors: [{ messageId: "input" }]
41 |     },
42 |     {
43 |       code: "<custom-image />",
44 |       options: [{ img: ["CustomImage"] }],
45 |       errors: [{ messageId: "imgMissingAlt" }]
46 |     },
47 |     {
48 |       code: "<CustomImage />",
49 |       options: [{ img: ["custom-image"] }],
50 |       errors: [{ messageId: "imgMissingAlt" }]
51 |     }
52 |   ]
53 | });
54 | 


--------------------------------------------------------------------------------
/src/utils/defineTemplateBodyVisitor.ts:
--------------------------------------------------------------------------------
 1 | import path from "path";
 2 | import type { Rule } from "eslint";
 3 | import type { AST } from "vue-eslint-parser";
 4 | 
 5 | interface TemplateListener extends Rule.NodeListener {
 6 |   VAttribute?: (node: AST.VAttribute) => void;
 7 |   VElement?: (node: AST.VElement) => void;
 8 |   VText?: (node: AST.VText) => void;
 9 | }
10 | 
11 | // Taken directly from eslint-plugin-vue
12 | function defineTemplateBodyVisitor(
13 |   context: Rule.RuleContext,
14 |   templateVisitor: TemplateListener,
15 |   scriptVisitor?: Rule.RuleListener
16 | ) {
17 |   const parserServices = getParserServices(context);
18 |   if (!parserServices.defineTemplateBodyVisitor) {
19 |     if (path.extname(context.getFilename()) === ".vue") {
20 |       context.report({
21 |         loc: { line: 1, column: 0 },
22 |         message:
23 |           "Use the latest vue-eslint-parser. See also https://eslint.vuejs.org/user-guide/#what-is-the-use-the-latest-vue-eslint-parser-error."
24 |       });
25 |     }
26 | 
27 |     return {};
28 |   }
29 | 
30 |   return parserServices.defineTemplateBodyVisitor(
31 |     templateVisitor,
32 |     scriptVisitor
33 |   );
34 | }
35 | 
36 | /**
37 |  * This function is API compatible with eslint v8.x and eslint v9 or later.
38 |  * @see https://eslint.org/blog/2023/09/preparing-custom-rules-eslint-v9/#from-context-to-sourcecode
39 |  */
40 | function getParserServices(context: Rule.RuleContext) {
41 |   const legacy = context.sourceCode;
42 | 
43 |   return legacy ? legacy.parserServices : context.parserServices;
44 | }
45 | 
46 | export default defineTemplateBodyVisitor;
47 | 


--------------------------------------------------------------------------------
/docs/rules/no-onchange.md:
--------------------------------------------------------------------------------
 1 | # no-onchange
 2 | 
 3 | ::: warning Deprecated
 4 | This rule is based on reports of behavior of [old browsers (eg. IE 10 and below)](https://www.quirksmode.org/dom/events/change.html#t05). In the meantime, this behavior has been corrected, both in newer versions of browsers as well as [in the DOM spec](https://bugzilla.mozilla.org/show_bug.cgi?id=969068#c2).
 5 | :::
 6 | 
 7 | Enforce usage of `@blur` over/in parallel with `@change` on select menu elements for accessibility. `@blur` **should** be used instead of `@change`, unless absolutely necessary and it causes no negative consequences for keyboard only or screen reader users. `@blur` is a more declarative action by the user: for instance in a dropdown, using the arrow keys to toggle between options will trigger the `@change` event in some browsers. Regardless, when a change of context results from an `@blur` event or an `@change` event, the user should be notified of the change unless it occurs below the currently focused element.
 8 | 
 9 | ## 🔧 Options
10 | 
11 | This rule takes no arguments.
12 | 
13 | ### ✔ Succeed
14 | 
15 | ```vue
16 | <template>
17 |   <select @blur="handleBlur">
18 |     <option />
19 |   </select>
20 | 
21 |   <select>
22 |     <option @blur="handleBlur" @change="handleChange" />
23 |   </select>
24 | </template>
25 | ```
26 | 
27 | ### ❌ Fail
28 | 
29 | ```vue
30 | <template>
31 |   <select @change="handleChange" />
32 | </template>
33 | ```
34 | 
35 | ## 📚 Resources
36 | 
37 | - [onChange Event Accessibility Issues](http://cita.disability.uiuc.edu/html-best-practices/auto/onchange.php)
38 | - [onChange Select Menu](http://www.themaninblue.com/writing/perspective/2004/10/19/)
39 | 


--------------------------------------------------------------------------------
/docs/rules/form-control-has-label.md:
--------------------------------------------------------------------------------
 1 | # form-control-has-label
 2 | 
 3 | Each form element must have a programmatically associated label element. You can do so by using an implicit `<label>`, explicit `<label>`, `aria-label` or `aria-labelledby`.
 4 | 
 5 | ## 🔧 Options
 6 | 
 7 | This rule takes one optional object argument of type object:
 8 | 
 9 | ```json
10 | {
11 |   "rules": {
12 |     "vuejs-accessibility/form-control-has-label": [
13 |       "error",
14 |       {
15 |         "labelComponents": ["CustomLabel"],
16 |         "controlComponents": ["CustomInput"]
17 |       }
18 |     ]
19 |   }
20 | }
21 | ```
22 | 
23 | 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.
24 | 
25 | 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.
26 | 
27 | ### ✔ Succeed
28 | 
29 | ```vue
30 | <template>
31 |   <label><input type="text" /></label>
32 |   <input aria-label="test" type="text" />
33 |   <input aria-labelledby="#id" type="text" />
34 |   <label for="id"></label><input aria-labelledby="#id" id="id" />
35 |   <input type="image" />
36 | </template>
37 | ```
38 | 
39 | ### ❌ Fail
40 | 
41 | ```vue
42 | <template>
43 |   <input value="1" type="text" />
44 |   <textarea value="1"></textarea>
45 | </template>
46 | ```
47 | 
48 | ## 📚 Resources
49 | 
50 | - [AXE](https://dequeuniversity.com/rules/axe/2.1/label)
51 | 


--------------------------------------------------------------------------------
/src/rules/aria-role.ts:
--------------------------------------------------------------------------------
 1 | import type { Rule } from "eslint";
 2 | import { dom, roles } from "aria-query";
 3 | 
 4 | import {
 5 |   defineTemplateBodyVisitor,
 6 |   getAttributeValue,
 7 |   getElementType,
 8 |   isAttribute,
 9 |   makeDocsURL
10 | } from "../utils";
11 | 
12 | function isValidRole(value: any) {
13 |   const ariaRole = roles.get(value as any);
14 |   return ariaRole && !ariaRole.abstract;
15 | }
16 | 
17 | const rule: Rule.RuleModule = {
18 |   meta: {
19 |     type: "problem",
20 |     docs: {
21 |       url: makeDocsURL("aria-role")
22 |     },
23 |     messages: {
24 |       default:
25 |         "Elements with ARIA roles must use a valid, non-abstract ARIA role."
26 |     },
27 |     schema: [
28 |       {
29 |         type: "object",
30 |         properties: {
31 |           ignoreNonDOM: {
32 |             type: "boolean",
33 |             default: true
34 |           }
35 |         },
36 |         additionalProperties: false
37 |       }
38 |     ]
39 |   },
40 |   create(context) {
41 |     return defineTemplateBodyVisitor(context, {
42 |       VAttribute(node) {
43 |         const { ignoreNonDOM } = context.options[0] || {};
44 |         if (ignoreNonDOM && !dom.has(getElementType(node.parent.parent))) {
45 |           return;
46 |         }
47 | 
48 |         if (!isAttribute(node, "role")) {
49 |           return;
50 |         }
51 | 
52 |         const value = getAttributeValue(node);
53 |         if (typeof value !== "string") {
54 |           return;
55 |         }
56 | 
57 |         if (!value.toLowerCase().split(" ").every(isValidRole)) {
58 |           context.report({ node: node as any, messageId: "default" });
59 |         }
60 |       }
61 |     });
62 |   }
63 | };
64 | 
65 | export default rule;
66 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # eslint-plugin-vuejs-accessibility
 2 | 
 3 | [![Build Status](https://github.com/vue-a11y/eslint-plugin-vuejs-accessibility/workflows/Main/badge.svg)](https://github.com/vue-a11y/eslint-plugin-vuejs-accessibility/actions)
 4 | [![Package Version](https://img.shields.io/npm/v/eslint-plugin-vuejs-accessibility.svg)](https://www.npmjs.com/package/eslint-plugin-vuejs-accessibility)
 5 | 
 6 | An `eslint` plugin for checking accessibility rules from within `.vue` files.
 7 | 
 8 | ## 📚 Documentation
 9 | 
10 | Please refer to the [official website](https://vue-a11y.github.io/eslint-plugin-vuejs-accessibility/).
11 | 
12 | ## 💻 Development
13 | 
14 | Ensure you have `node` and `yarn` installed on your system. Then run `yarn` in the root of the repository to install the dependencies.
15 | 
16 | ### 🔧 Adding a new rule
17 | 
18 | To add a new rule, you need to take the following steps:
19 | 
20 | - Add the configuration and require to `src/index.ts`.
21 | - Add the rule itself into `src/rules`.
22 | - Add the corresponding test in `src/rules/__tests__`.
23 | - Add the corresponding documentation in `docs/rules`.
24 | 
25 | ## 👨‍💻 Contributing
26 | 
27 | Bug reports and pull requests are welcome on GitHub at https://github.com/vue-a11y/eslint-plugin-vuejs-accessibility.
28 | 
29 | ## 📄 License
30 | 
31 | The code is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
32 | 
33 | ## 🏆 Credit
34 | 
35 | The work for this plugin was largely based on previous work done on [eslint-plugin-vue-a11y](https://github.com/maranran/eslint-plugin-vue-a11y), as well as various other tools, including:
36 | 
37 | - [eslint-plugin-jsx-a11y](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y)
38 | - [eslint-plugin-vue](https://github.com/vuejs/eslint-plugin-vue)
39 | - [jsx-ast-utils](https://github.com/vuejs/eslint-plugin-vue)
40 | 


--------------------------------------------------------------------------------
/src/rules/__tests__/click-events-have-key-events.test.ts:
--------------------------------------------------------------------------------
 1 | import rule from "../click-events-have-key-events";
 2 | import makeRuleTester from "./makeRuleTester";
 3 | 
 4 | makeRuleTester("click-events-have-key-events", rule, {
 5 |   valid: [
 6 |     "<div @click='void 0' @keydown='void 0' />",
 7 |     "<div @click='void 0' @keyup='void 0' />",
 8 |     "<div @click='void 0' @keypress='void 0' />",
 9 |     "<div @click='void 0' @keydown='void 0' @keydown='baz' />",
10 |     "<div class='void 0' />",
11 |     "<div @click='void 0' aria-hidden />",
12 |     "<div @click='void 0' aria-hidden='true' />",
13 |     "<div @click='void 0' aria-hidden='false' @keydown='void 0' />",
14 |     "<div @click='void 0' @keydown='void 0' aria-hidden='undefined' />",
15 |     "<input type='text' @click='void 0' />",
16 |     "<input @click='void 0' />",
17 |     "<button @click='void 0' class='void 0' />",
18 |     "<option @click='void 0' class='void 0' />",
19 |     "<select @click='void 0' class='void 0' />",
20 |     "<textarea @click='void 0' class='void 0' />",
21 |     "<a @click='void 0' href='http://x.y.z' />",
22 |     "<a @click='void 0' href='http://x.y.z' tabIndex='0' />",
23 |     "<input @click='void 0' type='hidden' />",
24 |     "<div @click='void 0' role='presentation' />",
25 |     "<div @click='void 0' role='none' />",
26 |     "<TestComponent @click='void 0' />",
27 |     "<Button @click='void 0' />"
28 |   ],
29 |   invalid: [
30 |     "<div @click='toggle'>",
31 |     "<div @click='void 0' />",
32 |     "<div @click='void 0' role='undefined' />",
33 |     "<section @click='void 0' />",
34 |     "<main @click='void 0' />",
35 |     "<article @click='void 0' />",
36 |     "<header @click='void 0' />",
37 |     "<footer @click='void 0' />",
38 |     "<div @click='void 0' aria-hidden='false' />",
39 |     "<a @click='void 0' />",
40 |     "<a tabIndex='0' @click='void 0' />"
41 |   ]
42 | });
43 | 


--------------------------------------------------------------------------------
/docs/rules/media-has-caption.md:
--------------------------------------------------------------------------------
 1 | # media-has-caption
 2 | 
 3 | Providing captions for media is essential for deaf users to follow along. Captions should be a transcription or translation of the dialogue, sound effects, relevant musical cues, and other relevant audio information. Not only is this important for accessibility, but can also be useful for all users in the case that the media is unavailable (similar to `alt` text on an image when an image is unable to load).
 4 | 
 5 | The captions should contain all important and relevant information to understand the corresponding media. This may mean that the captions are not a 1:1 mapping of the dialogue in the media content. However, captions are _not_ necessary for video components with the `muted` attribute.
 6 | 
 7 | ## 🔧 Options
 8 | 
 9 | This rule takes one optional object argument of type object:
10 | 
11 | ```json
12 | {
13 |   "rules": {
14 |     "vuejs-accessibility/media-has-caption": [
15 |       "error",
16 |       {
17 |         "audio": ["Audio"],
18 |         "video": ["Video"],
19 |         "track": ["Track"]
20 |       }
21 |     ]
22 |   }
23 | }
24 | ```
25 | 
26 | For the `audio`, `video`, and `track` options, these strings determine which elements (**always including** their corresponding DOM element) should be used for this rule. This is a good use case when you have a wrapper component that simply renders an `audio`, `video`, or `track` element.
27 | 
28 | ### ✔ Succeed
29 | 
30 | ```vue
31 | <template>
32 |   <audio><track kind="captions" /></audio>
33 |   <video><track kind="captions" /></video>
34 |   <video muted />
35 | </template>
36 | ```
37 | 
38 | ### ❌ Fail
39 | 
40 | ```vue
41 | <template>
42 |   <audio />
43 |   <video />
44 | </template>
45 | ```
46 | 
47 | ## 📚 Resources
48 | 
49 | - [AXE Audio](https://dequeuniversity.com/rules/axe/2.1/audio-caption)
50 | - [AXE Video](https://dequeuniversity.com/rules/axe/2.1/video-caption)
51 | 


--------------------------------------------------------------------------------
/docs/rules/no-aria-hidden-on-focusable.md:
--------------------------------------------------------------------------------
 1 | # no-aria-hidden-on-focusable
 2 | 
 3 | Enforce that `aria-hidden="true"` is not set on focusable elements or parent of focusable elements.
 4 | 
 5 | `aria-hidden="true"` can be used to hide purely decorative content from screen reader users. An element with `aria-hidden="true"` that can also be reached by keyboard can lead to confusion or unexpected behavior for screen reader users. Avoid using `aria-hidden="true"` on focusable elements.
 6 | 
 7 | See more in [WAI-ARIA Use in HTML](https://www.w3.org/TR/using-aria/#fourth).
 8 | 
 9 | ### ✔ Succeed
10 | 
11 | ```vue
12 | <template>
13 |   <button>Press Me</button>
14 | </template>
15 | ```
16 | 
17 | ```vue
18 | <template>
19 |   <div aria-hidden="true"><button tabindex="-1">Submit</button></div>
20 | </template>
21 | ```
22 | 
23 | ```vue
24 | <template>
25 |     <div aria-hidden='true'><span>Some text</div></div>
26 | </template>
27 | ```
28 | 
29 | ```vue
30 | <template>
31 |   <button tabindex="-1" aria-hidden="true">Press</button>
32 | </template>
33 | ```
34 | 
35 | ```vue
36 | <template>
37 |   <div aria-hidden="true"><a href="#" tabindex="-1">Link</a></div>
38 | </template>
39 | ```
40 | 
41 | ```vue
42 | <template>
43 |   <div aria-hidden="true"><span>Some text</span></div>
44 | </template>
45 | ```
46 | 
47 | ### ❌ Fail
48 | 
49 | ```vue
50 | <template>
51 |   <button aria-hidden="true">press me</button>
52 | </template>
53 | ```
54 | 
55 | ```vue
56 | <template>
57 |   <button aria-hidden="true">press me</button>
58 | </template>
59 | ```
60 | 
61 | ```vue
62 | <template>
63 |   <a href="#" aria-hidden="true">press me</a>
64 | </template>
65 | ```
66 | 
67 | ```vue
68 | <template>
69 |   <div aria-hidden="true">
70 |     <button>press me</button>
71 |   </div>
72 | </template>
73 | ```
74 | 
75 | ```vue
76 | <template>
77 |   <span tabindex="0" aria-hidden="true"><em>Icon</em></span>
78 | </template>
79 | ```
80 | 


--------------------------------------------------------------------------------
/src/rules/__tests__/form-control-has-label.test.ts:
--------------------------------------------------------------------------------
 1 | import rule from "../form-control-has-label";
 2 | import makeRuleTester from "./makeRuleTester";
 3 | 
 4 | makeRuleTester("form-control-has-label", rule, {
 5 |   valid: [
 6 |     "<label for=''><input type='text' /></label>",
 7 |     "<input type='text' aria-label='test' />",
 8 |     "<input type='button'>",
 9 |     `
10 |       <div class="checkbox">
11 |         <label for="check">I agree</label>
12 |         <input id="check" type="checkbox" />
13 |       </div>
14 |     `,
15 |     `
16 |       <div class="checkbox">
17 |         <input id="myCheckbox" type="checkbox" aria-describedby="myCheckboxInfo" />
18 |         <div class="checkbox-label">
19 |           <label for="myCheckbox">I agree</label>
20 |           <p id="myCheckboxInfo">Here is some extra info what I agree upon</p>
21 |         </div>
22 |       </div>
23 |     `,
24 |     `
25 |       <label>
26 |         <div>
27 |           <input type="radio" />
28 |         </div>
29 |         <div>
30 |           <slot />
31 |         </div>
32 |       </label>
33 |     `,
34 |     `
35 |       <div aria-hidden="true">
36 |         <input value="1" type="text" />
37 |       </div>
38 |     `,
39 |     {
40 |       code: "<custom-label for='input'>text</custom-label><input type='text' id='input' />",
41 |       options: [{ labelComponents: ["CustomLabel"] }]
42 |     },
43 |     "<b-form-input />"
44 |   ],
45 |   invalid: [
46 |     "<label for=''>text</label><input type='text' />",
47 |     `
48 |       <div class="checkbox">
49 |         <input type="checkbox" />
50 |         <label>I agree</label>
51 |       </div>
52 |     `,
53 |     "<input type='text' />",
54 |     "<textarea type='text'></textarea>",
55 |     {
56 |       code: "<div><b-form-input /></div>",
57 |       options: [{ controlComponents: ["b-form-input"] }],
58 |       errors: [{ messageId: "default" }]
59 |     }
60 |   ]
61 | });
62 | 


--------------------------------------------------------------------------------
/src/rules/anchor-has-content.ts:
--------------------------------------------------------------------------------
 1 | import type { Rule } from "eslint";
 2 | 
 3 | import {
 4 |   defineTemplateBodyVisitor,
 5 |   getElementType,
 6 |   hasAriaLabel,
 7 |   hasContent,
 8 |   makeDocsURL,
 9 |   makeKebabCase
10 | } from "../utils";
11 | 
12 | const rule: Rule.RuleModule = {
13 |   meta: {
14 |     type: "problem",
15 |     docs: {
16 |       url: makeDocsURL("anchor-has-content")
17 |     },
18 |     messages: {
19 |       default:
20 |         "Anchors must have content and the content must be accessible by a screen reader."
21 |     },
22 |     schema: [
23 |       {
24 |         type: "object",
25 |         properties: {
26 |           components: {
27 |             type: "array",
28 |             items: { type: "string" }
29 |           },
30 |           accessibleChildren: {
31 |             type: "array",
32 |             items: { type: "string" }
33 |           },
34 |           accessibleDirectives: {
35 |             type: "array",
36 |             items: { type: "string" }
37 |           }
38 |         }
39 |       }
40 |     ]
41 |   },
42 |   create(context) {
43 |     return defineTemplateBodyVisitor(context, {
44 |       VElement(node) {
45 |         const {
46 |           components = [],
47 |           accessibleChildren = [],
48 |           accessibleDirectives = []
49 |         } = context.options[0] || {};
50 | 
51 |         const elementTypes = ["a"].concat(components.map(makeKebabCase));
52 |         const accessibleChildTypes = accessibleChildren.map(makeKebabCase);
53 | 
54 |         const elementType = getElementType(node);
55 | 
56 |         if (
57 |           elementTypes.includes(elementType) &&
58 |           !hasContent(node, accessibleChildTypes, accessibleDirectives) &&
59 |           !hasAriaLabel(node)
60 |         ) {
61 |           context.report({ node: node as any, messageId: "default" });
62 |         }
63 |       }
64 |     });
65 |   }
66 | };
67 | 
68 | export default rule;
69 | 


--------------------------------------------------------------------------------
/docs/rules/no-role-presentation-on-focusable.md:
--------------------------------------------------------------------------------
 1 | # no-role-presentation-on-focusable
 2 | 
 3 | Enforce that `role="presentation"` is not set on focusable elements or parent of focusbale elements.
 4 | 
 5 | `role="presentation` can be used to hide purely decorative content from screen reader users. An element with `role="presentation"` that can also be reached by keyboard can lead to confusion or unexpected behavior for screen reader users. Avoid using `role="presentation"` on focusable elements.
 6 | 
 7 | See more in [WAI-ARIA Use in HTML](https://www.w3.org/TR/using-aria/#fourth).
 8 | 
 9 | ### ✔ Succeed
10 | 
11 | ```vue
12 | <template>
13 |   <button>Press Me</button>
14 | </template>
15 | ```
16 | 
17 | ```vue
18 | <template>
19 |   <div role="presentation"><button tabindex="-1">Submit</button></div>
20 | </template>
21 | ```
22 | 
23 | ```vue
24 | <template>
25 |     <div role="presentation"><span>Some text</div></div>
26 | </template>
27 | ```
28 | 
29 | ```vue
30 | <template>
31 |   <button tabindex="-1" role="presentation">Press</button>
32 | </template>
33 | ```
34 | 
35 | ```vue
36 | <template>
37 |   <div role="presentation"><a href="#" tabindex="-1">Link</a></div>
38 | </template>
39 | ```
40 | 
41 | ```vue
42 | <template>
43 |   <div role="presentation"><span>Some text</span></div>
44 | </template>
45 | ```
46 | 
47 | ### ❌ Fail
48 | 
49 | ```vue
50 | <template>
51 |   <button role="presentation">press me</button>
52 | </template>
53 | ```
54 | 
55 | ```vue
56 | <template>
57 |   <button role="presentation">press me</button>
58 | </template>
59 | ```
60 | 
61 | ```vue
62 | <template>
63 |   <a href="#" role="presentation">press me</a>
64 | </template>
65 | ```
66 | 
67 | ```vue
68 | <template>
69 |   <div role="presentation">
70 |     <button>press me</button>
71 |   </div>
72 | </template>
73 | ```
74 | 
75 | ```vue
76 | <template>
77 |   <span tabindex="0" role="presentation"><em>Icon</em></span>
78 | </template>
79 | ```
80 | 


--------------------------------------------------------------------------------
/src/utils/htmlElements.json:
--------------------------------------------------------------------------------
  1 | [
  2 |   "html",
  3 |   "body",
  4 |   "base",
  5 |   "head",
  6 |   "link",
  7 |   "meta",
  8 |   "style",
  9 |   "title",
 10 |   "address",
 11 |   "article",
 12 |   "aside",
 13 |   "footer",
 14 |   "header",
 15 |   "h1",
 16 |   "h2",
 17 |   "h3",
 18 |   "h4",
 19 |   "h5",
 20 |   "h6",
 21 |   "hgroup",
 22 |   "nav",
 23 |   "section",
 24 |   "div",
 25 |   "dd",
 26 |   "dl",
 27 |   "dt",
 28 |   "figcaption",
 29 |   "figure",
 30 |   "hr",
 31 |   "img",
 32 |   "li",
 33 |   "main",
 34 |   "ol",
 35 |   "p",
 36 |   "pre",
 37 |   "ul",
 38 |   "a",
 39 |   "b",
 40 |   "abbr",
 41 |   "bdi",
 42 |   "bdo",
 43 |   "br",
 44 |   "cite",
 45 |   "code",
 46 |   "data",
 47 |   "dfn",
 48 |   "em",
 49 |   "i",
 50 |   "kbd",
 51 |   "mark",
 52 |   "q",
 53 |   "rp",
 54 |   "rt",
 55 |   "rtc",
 56 |   "ruby",
 57 |   "s",
 58 |   "samp",
 59 |   "small",
 60 |   "span",
 61 |   "strong",
 62 |   "sub",
 63 |   "sup",
 64 |   "time",
 65 |   "u",
 66 |   "var",
 67 |   "wbr",
 68 |   "area",
 69 |   "audio",
 70 |   "map",
 71 |   "track",
 72 |   "video",
 73 |   "embed",
 74 |   "object",
 75 |   "param",
 76 |   "source",
 77 |   "canvas",
 78 |   "script",
 79 |   "noscript",
 80 |   "del",
 81 |   "ins",
 82 |   "caption",
 83 |   "col",
 84 |   "colgroup",
 85 |   "table",
 86 |   "thead",
 87 |   "tbody",
 88 |   "tfoot",
 89 |   "td",
 90 |   "th",
 91 |   "tr",
 92 |   "button",
 93 |   "datalist",
 94 |   "fieldset",
 95 |   "form",
 96 |   "input",
 97 |   "label",
 98 |   "legend",
 99 |   "meter",
100 |   "optgroup",
101 |   "option",
102 |   "output",
103 |   "progress",
104 |   "select",
105 |   "textarea",
106 |   "details",
107 |   "dialog",
108 |   "menu",
109 |   "menuitem",
110 |   "summary",
111 |   "content",
112 |   "element",
113 |   "shadow",
114 |   "template",
115 |   "slot",
116 |   "blockquote",
117 |   "iframe",
118 |   "noframes",
119 |   "picture"
120 | ]
121 | 


--------------------------------------------------------------------------------
/src/rules/heading-has-content.ts:
--------------------------------------------------------------------------------
 1 | import type { Rule } from "eslint";
 2 | 
 3 | import {
 4 |   defineTemplateBodyVisitor,
 5 |   getElementType,
 6 |   hasContent,
 7 |   makeDocsURL,
 8 |   makeKebabCase
 9 | } from "../utils";
10 | 
11 | const headings = ["h1", "h2", "h3", "h4", "h5", "h6"];
12 | 
13 | const rule: Rule.RuleModule = {
14 |   meta: {
15 |     type: "problem",
16 |     docs: {
17 |       url: makeDocsURL("heading-has-content")
18 |     },
19 |     messages: {
20 |       default:
21 |         "Headings must have content and the content must be accessible by a screen reader."
22 |     },
23 |     schema: [
24 |       {
25 |         type: "object",
26 |         properties: {
27 |           components: {
28 |             type: "array",
29 |             items: { type: "string" }
30 |           },
31 |           accessibleChildren: {
32 |             type: "array",
33 |             items: { type: "string" }
34 |           },
35 |           accessibleDirectives: {
36 |             type: "array",
37 |             items: { type: "string" }
38 |           }
39 |         }
40 |       }
41 |     ]
42 |   },
43 |   create(context) {
44 |     return defineTemplateBodyVisitor(context, {
45 |       VElement(node) {
46 |         const {
47 |           components = [],
48 |           accessibleChildren = [],
49 |           accessibleDirectives = []
50 |         } = context.options[0] || {};
51 | 
52 |         const elementTypes = headings.concat(components.map(makeKebabCase));
53 |         const accessibleChildTypes = accessibleChildren.map(makeKebabCase);
54 | 
55 |         const elementType = getElementType(node);
56 | 
57 |         if (
58 |           elementTypes.includes(elementType) &&
59 |           !hasContent(node, accessibleChildTypes, accessibleDirectives)
60 |         ) {
61 |           context.report({ node: node as any, messageId: "default" });
62 |         }
63 |       }
64 |     });
65 |   }
66 | };
67 | 
68 | export default rule;
69 | 


--------------------------------------------------------------------------------
/docs/index.md:
--------------------------------------------------------------------------------
 1 | # Getting Started
 2 | 
 3 | An `eslint` plugin for checking accessibility rules from within `.vue` files.
 4 | 
 5 | ## 💿 Installation
 6 | 
 7 | ::: code-group
 8 | 
 9 | ```bash [yarn]
10 | yarn add --dev eslint-plugin-vuejs-accessibility
11 | ```
12 | 
13 | ```bash [npm]
14 | npm install --save-dev eslint-plugin-vuejs-accessibility
15 | ```
16 | 
17 | ```bash [pnpm]
18 | pnpm add -D eslint-plugin-vuejs-accessibility
19 | ```
20 | 
21 | :::
22 | 
23 | ## 📖 Usage
24 | 
25 | ### Configuration (`eslint.config.js`)
26 | 
27 | Use `eslint.config.js` file to configure rules. This is the default in ESLint v9, but can be used starting from ESLint v8.57.0. See also: https://eslint.org/docs/latest/use/configure/configuration-files-new.
28 | 
29 | Example eslint.config.js:
30 | 
31 | ```js
32 | import pluginVueA11y from "eslint-plugin-vuejs-accessibility";
33 | 
34 | export default [
35 |   // add more generic rulesets here, such as:
36 |   // js.configs.recommended,
37 |   ...pluginVueA11y.configs["flat/recommended"],
38 |   {
39 |     rules: {
40 |       // override/add rules settings here, such as:
41 |       // "vuejs-accessibility/alt-text": "error"
42 |     }
43 |   }
44 | ];
45 | ```
46 | 
47 | ### Configuration (`.eslintrc`)
48 | 
49 | Use `.eslintrc.*` file to configure rules in ESLint < v9. See also: https://eslint.org/docs/latest/use/configure/.
50 | 
51 | Add `vuejs-accessibility` to the plugins section of your configuration. You can omit the `eslint-plugin-` prefix:
52 | 
53 | ```json
54 | {
55 |   "plugins": ["vuejs-accessibility"]
56 | }
57 | ```
58 | 
59 | Then configure the rules you want to use under the rules section.
60 | 
61 | ```json
62 | {
63 |   "rules": {
64 |     "vuejs-accessibility/rule-name": "error"
65 |   }
66 | }
67 | ```
68 | 
69 | You can also enable all the recommended rules at once. Add `plugin:vuejs-accessibility/recommended` in extends:
70 | 
71 | ```json
72 | {
73 |   "extends": ["plugin:vuejs-accessibility/recommended"]
74 | }
75 | ```
76 | 


--------------------------------------------------------------------------------
/src/utils.ts:
--------------------------------------------------------------------------------
 1 | export { default as defineTemplateBodyVisitor } from "./utils/defineTemplateBodyVisitor";
 2 | export { default as getAttributeName } from "./utils/getAttributeName";
 3 | export { default as getAttributeValue } from "./utils/getAttributeValue";
 4 | export { default as getElementAttribute } from "./utils/getElementAttribute";
 5 | export { default as getElementAttributeValue } from "./utils/getElementAttributeValue";
 6 | export { default as getElementType } from "./utils/getElementType";
 7 | export { default as getLiteralAttributeValue } from "./utils/getLiteralAttributeValue";
 8 | export { default as getInteractiveRoles } from "./utils/getInteractiveRoles";
 9 | export { default as hasAccessibleChild } from "./utils/hasAccessibleChild";
10 | export { default as hasAriaLabel } from "./utils/hasAriaLabel";
11 | export { default as hasContent } from "./utils/hasContent";
12 | export { default as hasFocusableElement } from "./utils/hasFocusableElement";
13 | export { default as hasOnDirective } from "./utils/hasOnDirective";
14 | export { default as hasOnDirectives } from "./utils/hasOnDirectives";
15 | export { default as interactiveHandlers } from "./utils/interactiveHandlers.json";
16 | export { default as isAriaHidden } from "./utils/isAriaHidden";
17 | export { default as isCustomComponent } from "./utils/isCustomComponent";
18 | export { default as isAttribute } from "./utils/isAttribute";
19 | export { default as isHiddenFromScreenReader } from "./utils/isHiddenFromScreenReader";
20 | export { default as isInteractiveElement } from "./utils/isInteractiveElement";
21 | export { default as isInteractiveRole } from "./utils/isInteractiveRole";
22 | export { default as isMatchingElement } from "./utils/isMatchingElement";
23 | export { default as isPresentationRole } from "./utils/isPresentationRole";
24 | export { default as makeDocsURL } from "./utils/makeDocsURL";
25 | export { default as makeKebabCase } from "./utils/makeKebabCase";
26 | export { default as matchesElementRole } from "./utils/matchesElementRole";
27 | 


--------------------------------------------------------------------------------
/src/utils/hasContent.ts:
--------------------------------------------------------------------------------
 1 | import type { AST } from "vue-eslint-parser";
 2 | 
 3 | import getElementAttributeValue from "./getElementAttributeValue";
 4 | import getElementType from "./getElementType";
 5 | import hasAccessibleChild from "./hasAccessibleChild";
 6 | import isHiddenFromScreenReader from "./isHiddenFromScreenReader";
 7 | 
 8 | function hasDirective(node: AST.VElement, name: string) {
 9 |   return node.startTag.attributes.some(
10 |     (attribute) =>
11 |       attribute.directive && attribute.key.name.name === name.toLowerCase()
12 |   );
13 | }
14 | 
15 | function hasChildWithDirective(node: AST.VElement, name: string): boolean {
16 |   return node.children.some(
17 |     (child) =>
18 |       child.type === "VElement" &&
19 |       (hasDirective(child, name) || hasChildWithDirective(child, name))
20 |   );
21 | }
22 | 
23 | function hasChildImageWithAlt(node: AST.VElement): boolean {
24 |   return node.children.some((child) => {
25 |     if (child.type === "VElement") {
26 |       if (
27 |         !isHiddenFromScreenReader(child) &&
28 |         getElementType(child) === "img" &&
29 |         getElementAttributeValue(child, "alt")
30 |       ) {
31 |         return true;
32 |       }
33 |       return hasChildImageWithAlt(child);
34 |     }
35 |   });
36 | }
37 | 
38 | function hasAccessibleDirective(
39 |   node: AST.VElement,
40 |   accessibleDirectives: string[]
41 | ): boolean {
42 |   return accessibleDirectives.some((directive) => {
43 |     return hasDirective(node, directive);
44 |   });
45 | }
46 | 
47 | function hasContent(
48 |   node: AST.VElement,
49 |   accessibleChildTypes: string[],
50 |   accessibleDirectives: string[]
51 | ) {
52 |   return (
53 |     hasAccessibleChild(node, accessibleChildTypes) ||
54 |     hasAccessibleDirective(node, accessibleDirectives) ||
55 |     hasDirective(node, "text") ||
56 |     hasDirective(node, "html") ||
57 |     hasChildWithDirective(node, "text") ||
58 |     hasChildWithDirective(node, "html") ||
59 |     hasChildImageWithAlt(node)
60 |   );
61 | }
62 | 
63 | export default hasContent;
64 | 


--------------------------------------------------------------------------------
/docs/.vitepress/config.mts:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from "vitepress";
 2 | import { rules } from "./rulesForSidebar";
 3 | import { description, version } from "../../package.json";
 4 | 
 5 | // https://vitepress.dev/reference/site-config
 6 | export default defineConfig({
 7 |   title: "eslint-plugin-vuejs-a11y",
 8 |   base: "/eslint-plugin-vuejs-accessibility/",
 9 |   description,
10 |   head: [
11 |     [
12 |       "link",
13 |       {
14 |         rel: "icon",
15 |         type: "image/png",
16 |         sizes: "32x32",
17 |         href: "https://vue-a11y.com/favicon/favicon-32x32.png"
18 |       }
19 |     ],
20 |     [
21 |       "link",
22 |       {
23 |         rel: "icon",
24 |         type: "image/png",
25 |         sizes: "96x96",
26 |         href: "https://vue-a11y.com/favicon/favicon-96x96.png"
27 |       }
28 |     ],
29 |     [
30 |       "link",
31 |       {
32 |         rel: "icon",
33 |         type: "image/png",
34 |         sizes: "16x16",
35 |         href: "https://vue-a11y.com/favicon/favicon-16x16.png"
36 |       }
37 |     ]
38 |   ],
39 |   themeConfig: {
40 |     // https://vitepress.dev/reference/default-theme-config
41 |     nav: [
42 |       {
43 |         text: version,
44 |         items: [
45 |           {
46 |             text: "Changelog",
47 |             link: "https://github.com/vue-a11y/eslint-plugin-vuejs-accessibility/blob/main/CHANGELOG.md"
48 |           }
49 |         ]
50 |       }
51 |     ],
52 | 
53 |     sidebar: [
54 |       {
55 |         text: "Introduction",
56 |         items: [
57 |           { text: "Getting Started", link: "/" },
58 |           { text: "Rule Overview", link: "/rule-overview/index" }
59 |         ]
60 |       },
61 |       {
62 |         text: "Rules",
63 |         items: rules
64 |       }
65 |     ],
66 | 
67 |     editLink: {
68 |       pattern:
69 |         "https://github.com/vue-a11y/eslint-plugin-vuejs-accessibility/edit/main/docs/:path"
70 |     },
71 | 
72 |     socialLinks: [
73 |       {
74 |         icon: "github",
75 |         link: "https://github.com/vue-a11y/eslint-plugin-vuejs-accessibility"
76 |       }
77 |     ],
78 | 
79 |     search: {
80 |       provider: "local"
81 |     }
82 |   }
83 | });
84 | 


--------------------------------------------------------------------------------
/docs/rules/heading-has-content.md:
--------------------------------------------------------------------------------
 1 | # heading-has-content
 2 | 
 3 | Enforce that heading elements (`h1`, `h2`, etc.) have content and that the content is accessible to screen readers. Accessible means that it is not hidden using the `aria-hidden` prop. Refer to the references to learn about why this is important.
 4 | 
 5 | ## 🔧 Options
 6 | 
 7 | This rule takes one optional object argument of type object:
 8 | 
 9 | ```json
10 | {
11 |   "rules": {
12 |     "vuejs-accessibility/heading-has-content": [
13 |       "error",
14 |       {
15 |         "components": ["MyHeading"],
16 |         "accessibleChildren": ["MyAccessibleText"],
17 |         "accessibleDirectives": ["myAccessibleDirective"]
18 |       }
19 |     ]
20 |   }
21 | }
22 | ```
23 | 
24 | For the `components` option, these strings determine which elements (**always including** `<h1>` thru `<h6>`) should be checked for having content. This is a good use case when you have a wrapper component that simply renders an `h1` element.
25 | 
26 | For the `accessibleChildren` option, these strings determine which elements should be marked as acceptably accessible child elements. For example if you have something like a `<trans tag="hello-world" />` child that you know will translate into accessible text, then you should put the `Trans` component into this array.
27 | 
28 | For the `accessibleDirectives` option, these strings declare an element should be marked as acceptably accessible if a directive is present. For example something like `<h1 v-bb="myBBCode" />` may provide content in the same way `v-html` would. You would add `bb` into this array. _Notice these strings should not include the `v-` prefix._
29 | 
30 | ### ✔ Succeed
31 | 
32 | ```vue
33 | <template>
34 |   <h1>Heading Content!</h1>
35 |   <h1 v-html="msg"></h1>
36 |   <h1 v-myAccessibleDirective="msg"></h1>
37 |   <MyHeading>Heading Content!</MyHeading>
38 |   <h1>
39 |     <MyAccessibleText />
40 |   </h1>
41 | </template>
42 | ```
43 | 
44 | ### ❌ Fail
45 | 
46 | ```vue
47 | <template>
48 |   <h1></h1>
49 |   <MyHeading></MyHeading>
50 | </template>
51 | ```
52 | 
53 | ## 📚 Resources
54 | 
55 | - [Deque University](https://dequeuniversity.com/rules/axe/1.1/empty-heading)
56 | 


--------------------------------------------------------------------------------
/docs/rules/anchor-has-content.md:
--------------------------------------------------------------------------------
 1 | # anchor-has-content
 2 | 
 3 | Enforce that anchors have content and that the content is accessible to screen readers. Accessible means that it is not hidden using the `aria-hidden` prop. Refer to the references to learn about why this is important.
 4 | 
 5 | ## 🔧 Options
 6 | 
 7 | This rule takes one optional object argument of type object:
 8 | 
 9 | ```json
10 | {
11 |   "rules": {
12 |     "vuejs-accessibility/anchor-has-content": [
13 |       "error",
14 |       {
15 |         "components": ["Anchor"],
16 |         "accessibleChildren": ["MyAccessibleText"],
17 |         "accessibleDirectives": ["myAccessibleDirective"]
18 |       }
19 |     ]
20 |   }
21 | }
22 | ```
23 | 
24 | For the `components` option, these strings determine which elements (**always including** `<a>`) should be checked for having content. This is a good use case when you have a wrapper component that simply renders an `a` element.
25 | 
26 | For the `accessibleChildren` option, these strings determine which elements should be marked as acceptably accessible child elements. For example if you have something like a `<trans tag="hello-world" />` child that you know will translate into accessible text, then you should put the `Trans` component into this array.
27 | 
28 | For the `accessibleDirectives` option, these strings declare an element should be marked as acceptably accessible if a directive is present. For example something like `<a href="#" v-bb="myBBCode" />` may provide content in the same way `v-html` would. You would add `bb` into this array. _Notice these strings should not include the `v-` prefix._
29 | 
30 | ### ✔ Succeed
31 | 
32 | <!-- prettier-ignore -->
33 | ```vue
34 | <template>
35 |   <a>Anchor Content!</a>
36 |   <a><TextWrapper /><a>
37 |   <a is="TextWrapper" />
38 |   <a v-text="msg" />
39 |   <a v-html="msg" />
40 |   <a v-myAccessibleDirective="msg" />
41 |   <Anchor>Anchor content</!Anchor>
42 |   <a><my-accessible-text /></a>
43 | </template>
44 | ```
45 | 
46 | ### ❌ Fail
47 | 
48 | ```vue
49 | <template>
50 |   <a />
51 |   <a><TextWrapper aria-hidden /></a>
52 |   <Anchor></Anchor>
53 | </template>
54 | ```
55 | 
56 | ## 📚 Resources
57 | 
58 | - [Deque University](https://dequeuniversity.com/rules/axe/1.1/link-name)
59 | 


--------------------------------------------------------------------------------
/src/rules/media-has-caption.ts:
--------------------------------------------------------------------------------
 1 | import type { Rule } from "eslint";
 2 | import type { AST } from "vue-eslint-parser";
 3 | 
 4 | import {
 5 |   defineTemplateBodyVisitor,
 6 |   getAttributeValue,
 7 |   getElementAttribute,
 8 |   getElementAttributeValue,
 9 |   getElementType,
10 |   makeDocsURL,
11 |   makeKebabCase
12 | } from "../utils";
13 | 
14 | function isCaptionsTrackElement(
15 |   node: AST.VElement | AST.VExpressionContainer | AST.VText
16 | ) {
17 |   const kind =
18 |     node.type === "VElement" && getElementAttributeValue(node, "kind");
19 | 
20 |   return kind && typeof kind === "string" && kind.toLowerCase() === "captions";
21 | }
22 | 
23 | const rule: Rule.RuleModule = {
24 |   meta: {
25 |     type: "problem",
26 |     docs: {
27 |       url: makeDocsURL("media-has-caption")
28 |     },
29 |     messages: {
30 |       default:
31 |         "Media elements such as <audio> and <video> must have a <track> for captions."
32 |     },
33 |     schema: [
34 |       {
35 |         type: "object",
36 |         properties: {
37 |           audio: {
38 |             type: "array",
39 |             items: { type: "string" }
40 |           },
41 |           track: {
42 |             type: "array",
43 |             items: { type: "string" }
44 |           },
45 |           video: {
46 |             type: "array",
47 |             items: { type: "string" }
48 |           }
49 |         }
50 |       }
51 |     ]
52 |   },
53 |   create(context) {
54 |     return defineTemplateBodyVisitor(context, {
55 |       VElement(node) {
56 |         const { audio = [], track = [], video = [] } = context.options[0] || {};
57 | 
58 |         const mediaElementTypes = audio
59 |           .concat(video)
60 |           .map(makeKebabCase)
61 |           .concat("audio", "video");
62 |         if (!mediaElementTypes.includes(getElementType(node))) {
63 |           return;
64 |         }
65 | 
66 |         const muted = getElementAttribute(node, "muted");
67 |         if (muted && (getAttributeValue(muted) || "").toString() !== "false") {
68 |           return;
69 |         }
70 | 
71 |         const trackElementTypes = track.map(makeKebabCase).concat("track");
72 |         const trackElements = node.children.filter(
73 |           (child) =>
74 |             child.type === "VElement" &&
75 |             trackElementTypes.includes(getElementType(child))
76 |         );
77 | 
78 |         if (
79 |           trackElements.length === 0 ||
80 |           !trackElements.some(isCaptionsTrackElement)
81 |         ) {
82 |           context.report({ node: node as any, messageId: "default" });
83 |         }
84 |       }
85 |     });
86 |   }
87 | };
88 | 
89 | export default rule;
90 | 


--------------------------------------------------------------------------------
/src/rules/no-redundant-roles.ts:
--------------------------------------------------------------------------------
 1 | import type { Rule } from "eslint";
 2 | import type { AST } from "vue-eslint-parser";
 3 | import { elementRoles } from "aria-query";
 4 | 
 5 | import {
 6 |   defineTemplateBodyVisitor,
 7 |   getElementAttributeValue,
 8 |   getElementType,
 9 |   makeDocsURL,
10 |   matchesElementRole
11 | } from "../utils";
12 | 
13 | const exceptions: { [type: string]: string[] } = { nav: ["navigation"] };
14 | 
15 | function getImplicitRoleSet(node: AST.VElement): any[] | null {
16 |   const matchingRoles = elementRoles
17 |     .entries()
18 |     .filter(([consept]) => {
19 |       return matchesElementRole(node, consept);
20 |     })
21 |     .sort(([a], [b]) => {
22 |       // try ordering by the concept that is more difficult to match first.
23 |       // the number of attributes needed to "match" is used here as a proxy of
24 |       // that difficulty.
25 |       return (b.attributes?.length ?? 0) - (a.attributes?.length ?? 0);
26 |     });
27 | 
28 |   const [preferedRole] = matchingRoles;
29 |   const [, roleSet = null] = preferedRole || [];
30 | 
31 |   // The types for this are wrong, it's actually a string[]
32 |   return roleSet as unknown as string[];
33 | }
34 | 
35 | const rule: Rule.RuleModule = {
36 |   meta: {
37 |     type: "problem",
38 |     docs: {
39 |       url: makeDocsURL("no-redundant-roles")
40 |     },
41 |     messages: {
42 |       default:
43 |         "The element {{type}} has an implicit role of {{role}}. Defining this explicitly is redundant and should be avoided."
44 |     },
45 |     schema: [
46 |       {
47 |         type: "object",
48 |         additionalProperties: {
49 |           type: "array",
50 |           items: {
51 |             type: "string"
52 |           },
53 |           uniqueItems: true
54 |         }
55 |       }
56 |     ]
57 |   },
58 |   create(context) {
59 |     return defineTemplateBodyVisitor(context, {
60 |       VElement(node) {
61 |         const type = getElementType(node);
62 |         const implicitRoleSet = getImplicitRoleSet(node);
63 |         const explicitRole = getElementAttributeValue(node, "role");
64 | 
65 |         if (!implicitRoleSet || !explicitRole) {
66 |           return;
67 |         }
68 | 
69 |         const permittedRoles = context.options[0] || {};
70 |         if (
71 |           (permittedRoles[type] || [])
72 |             .concat(exceptions[type] || [])
73 |             .includes(explicitRole)
74 |         ) {
75 |           return;
76 |         }
77 | 
78 |         if (implicitRoleSet.includes(explicitRole)) {
79 |           context.report({
80 |             node: node as any,
81 |             messageId: "default",
82 |             data: { type, role: explicitRole.toString() }
83 |           });
84 |         }
85 |       }
86 |     });
87 |   }
88 | };
89 | 
90 | export default rule;
91 | 


--------------------------------------------------------------------------------
/docs/rules/label-has-for.md:
--------------------------------------------------------------------------------
 1 | # label-has-for
 2 | 
 3 | Enforce label tags have associated control. There are two supported ways to associate a label with a control:
 4 | 
 5 | - nesting: by wrapping a control in a label tag
 6 | - id: by using the prop `for` as in `for=[ID of control]`
 7 | 
 8 | To fully cover 100% of assistive devices, you're encouraged to validate for both nesting and id.
 9 | 
10 | ## 🔧 Options
11 | 
12 | This rule takes one optional object argument of type object:
13 | 
14 | ```json
15 | {
16 |   "rules": {
17 |     "vuejs-accessibility/label-has-for": [
18 |       "error",
19 |       {
20 |         "components": ["VLabel"],
21 |         "controlComponents": ["VInput"],
22 |         "required": {
23 |           "every": ["nesting", "id"]
24 |         },
25 |         "allowChildren": false
26 |       }
27 |     ]
28 |   }
29 | }
30 | ```
31 | 
32 | For the `components` 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.
33 | 
34 | For the `controlComponents` option, these strings determine which elements should be counted as form control elements. By default, this includes `input`, `meter`, `progress`, `select`, and `textarea`. This is a good use case when you have a wrapper component that simplify renders a `input` element.
35 | 
36 | The `required` option (defaults to `"required": { "every": ["nesting", "id"] }`) determines which checks are activated. You're allowed to pass in one of the following types:
37 | 
38 | - `string`: must be one of the acceptable strings (`"nesting"` or `"id"`)
39 | - `object`, must have one of the following properties:
40 |   - some: an array of acceptable strings, will pass if ANY of the requested checks passed
41 |   - every: an array of acceptable strings, will pass if ALL of the requested checks passed
42 | 
43 | The `allowChildren` option (defaults to `false`) determines whether default slot content is allowed to be passed into a `label` element. For example, the following pattern, by default, is not allowed:
44 | 
45 | ```vue
46 | <template>
47 |   <label>
48 |     <slot />
49 |   </label>
50 | </template>
51 | ```
52 | 
53 | However, if `allowChildren` is set to `true`, no error will be raised. If you want to pass in default slot content without raising an error because you cannot be sure what the default slot will render, then set `allowChildren` to `true`.
54 | 
55 | ### ✔ Succeed
56 | 
57 | ```vue
58 | <template>
59 |   <label for="name">
60 |     <input type="text" id="name" />
61 |     Name
62 |   </label>
63 | </template>
64 | ```
65 | 
66 | ### ❌ Fail
67 | 
68 | ```vue
69 | <template>
70 |   <input type="text" id="name" />
71 |   <label>First Name</label>
72 | </template>
73 | ```
74 | 


--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
 1 | import { default as recommended } from "./configs/recommended";
 2 | import flatRecommended from "./configs/flat/recommended";
 3 | 
 4 | import altText from "./rules/alt-text";
 5 | import anchorHasContent from "./rules/anchor-has-content";
 6 | import ariaProps from "./rules/aria-props";
 7 | import ariaRole from "./rules/aria-role";
 8 | import ariaUnsupportedElements from "./rules/aria-unsupported-elements";
 9 | import clickEventsHaveKeyEvents from "./rules/click-events-have-key-events";
10 | import formControlHasLabel from "./rules/form-control-has-label";
11 | import headingHasContent from "./rules/heading-has-content";
12 | import iframeHasTitle from "./rules/iframe-has-title";
13 | import interactiveSupportsFocus from "./rules/interactive-supports-focus";
14 | import labelHasFor from "./rules/label-has-for";
15 | import mediaHasCaption from "./rules/media-has-caption";
16 | import mouseEventsHaveKeyEvents from "./rules/mouse-events-have-key-events";
17 | import noAccessKey from "./rules/no-access-key";
18 | import noAriaHiddenOnFocusable from "./rules/no-aria-hidden-on-focusable";
19 | import noAutofocus from "./rules/no-autofocus";
20 | import noDistractingElements from "./rules/no-distracting-elements";
21 | import noOnchange from "./rules/no-onchange";
22 | import noRedundantRoles from "./rules/no-redundant-roles";
23 | import noRolePresentationOnFocusable from "./rules/no-role-presentation-on-focusable";
24 | import noStaticElementInteractions from "./rules/no-static-element-interactions";
25 | import roleHasRequiredAriaProps from "./rules/role-has-required-aria-props";
26 | import tabindexNoPositive from "./rules/tabindex-no-positive";
27 | 
28 | const configs = {
29 |   recommended,
30 |   "flat/recommended": flatRecommended
31 | };
32 | const rules = {
33 |   "alt-text": altText,
34 |   "anchor-has-content": anchorHasContent,
35 |   "aria-props": ariaProps,
36 |   "aria-role": ariaRole,
37 |   "aria-unsupported-elements": ariaUnsupportedElements,
38 |   "click-events-have-key-events": clickEventsHaveKeyEvents,
39 |   "form-control-has-label": formControlHasLabel,
40 |   "heading-has-content": headingHasContent,
41 |   "iframe-has-title": iframeHasTitle,
42 |   "interactive-supports-focus": interactiveSupportsFocus,
43 |   "label-has-for": labelHasFor,
44 |   "media-has-caption": mediaHasCaption,
45 |   "mouse-events-have-key-events": mouseEventsHaveKeyEvents,
46 |   "no-access-key": noAccessKey,
47 |   "no-aria-hidden-on-focusable": noAriaHiddenOnFocusable,
48 |   "no-autofocus": noAutofocus,
49 |   "no-distracting-elements": noDistractingElements,
50 |   "no-onchange": noOnchange,
51 |   "no-redundant-roles": noRedundantRoles,
52 |   "no-role-presentation-on-focusable": noRolePresentationOnFocusable,
53 |   "no-static-element-interactions": noStaticElementInteractions,
54 |   "role-has-required-aria-props": roleHasRequiredAriaProps,
55 |   "tabindex-no-positive": tabindexNoPositive
56 | };
57 | 
58 | export = {
59 |   configs,
60 |   rules
61 | };
62 | 


--------------------------------------------------------------------------------
/docs/rules/no-static-element-interactions.md:
--------------------------------------------------------------------------------
 1 | # no-static-element-interactions
 2 | 
 3 | Static HTML elements do not have semantic meaning. This is clear in the case of `<div>` and `<span>`. It is less so clear in the case of elements that _seem_ semantic, but that do not have a semantic mapping in the accessibility layer. For example `<a>`, `<big>`, `<blockquote>`, `<footer>`, `<picture>`, `<strike>` and `<time>` -- to name a few -- have no semantic layer mapping. They are as void of meaning as `<div>`.
 4 | 
 5 | The [WAI-ARIA `role` attribute](https://www.w3.org/TR/wai-aria-1.1/#usage_intro) confers a semantic mapping to an element. The semantic value can then be expressed to a user via assistive technology.
 6 | 
 7 | In order to add interactivity such as a mouse or key event listener to a static element, that element must be given a role value as well.
 8 | 
 9 | ## 🟢 How to resolve
10 | 
11 | ### Case: This element acts like a button, link, menuitem, etc
12 | 
13 | Indicate the element's role with the `role` attribute:
14 | 
15 | ```vue
16 | <template>
17 |   <div
18 |     @click="onClickHandler"
19 |     @keypress="onKeyPressHandler"
20 |     role="button"
21 |     tabIndex="0"
22 |   >
23 |     Save
24 |   </div>
25 | </template>
26 | ```
27 | 
28 | Common interactive roles include:
29 | 
30 | - `button`
31 | - `link`
32 | - `checkbox`
33 | - `menuitem`
34 | - `menuitemcheckbox`
35 | - `menuitemradio`
36 | - `option`
37 | - `radio`
38 | - `searchbox`
39 | - `switch`
40 | - `textbox`
41 | 
42 | Note: Adding a role to your element does **not** add behavior. When a semantic HTML element like `<button>` is used, then it will also respond to Enter key presses when it has focus. The developer is responsible for providing the expected behavior of an element that the role suggests it would have: focusability and key press support.
43 | 
44 | Do not use the role `presentation` on the element: it removes the element's semantics, and may also remove its children's semantics, creating big issues with assistive technology.
45 | 
46 | Adjust the list of handler prop names in the handlers array to increase or decrease the coverage surface of this rule in your codebase.
47 | 
48 | ### ✔ Succeed
49 | 
50 | ```vue
51 | <template>
52 |   <button @click="() => {}" class="foo" />
53 |   <div class="foo" @click="() => {}" role="button" />
54 |   <input type="text" @click="() => {}" />
55 | </template>
56 | ```
57 | 
58 | ### ❌ Fail
59 | 
60 | ```vue
61 | <template>
62 |   <div @click="() => {}" />
63 | </template>
64 | ```
65 | 
66 | ## 📚 Resources
67 | 
68 | - [WCAG 4.1.2](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value)
69 | - [WAI-ARIA `role` attribute](https://www.w3.org/TR/wai-aria-1.1/#usage_intro)
70 | - [WAI-ARIA Authoring Practices Guide - Design Patterns and Widgets](https://www.w3.org/TR/wai-aria-practices-1.1/#aria_ex)
71 | - [Fundamental Keyboard Navigation Conventions](https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_generalnav)
72 | - [Mozilla Developer Network - ARIA Techniques](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role#Keyboard_and_focus)
73 | 


--------------------------------------------------------------------------------
/src/rules/role-has-required-aria-props.ts:
--------------------------------------------------------------------------------
 1 | import type { Rule } from "eslint";
 2 | import type { AST } from "vue-eslint-parser";
 3 | import { ARIARoleDefinitionKey, dom, roles } from "aria-query";
 4 | 
 5 | import {
 6 |   defineTemplateBodyVisitor,
 7 |   getElementAttribute,
 8 |   getElementAttributeValue,
 9 |   getElementType,
10 |   makeDocsURL
11 | } from "../utils";
12 | 
13 | function hasAttributes(node: AST.VElement, names: string[]) {
14 |   return names.every((name) => getElementAttribute(node, name) !== null);
15 | }
16 | 
17 | function isAriaRoleDefinitionKey(role: any): role is ARIARoleDefinitionKey {
18 |   return roles.has(role);
19 | }
20 | 
21 | function filterRequiredPropsExceptions(
22 |   node: AST.VElement,
23 |   role: ARIARoleDefinitionKey,
24 |   elementType: string,
25 |   requiredProps: string[]
26 | ) {
27 |   // Based on the pattern recommendation in https://www.w3.org/WAI/ARIA/apg/patterns/switch/#wai-ariaroles,states,andproperties
28 |   // "aria-checked" should not be required when elementType is `input` and has the type attribute `checkbox`.
29 |   if (
30 |     role.toLowerCase() === "switch" &&
31 |     elementType === "input" &&
32 |     getElementAttributeValue(node, "type") === "checkbox"
33 |   ) {
34 |     return requiredProps.filter((p) => p !== "aria-checked");
35 |   }
36 |   return requiredProps;
37 | }
38 | 
39 | const rule: Rule.RuleModule = {
40 |   meta: {
41 |     type: "problem",
42 |     docs: {
43 |       url: makeDocsURL("role-has-required-aria-props")
44 |     },
45 |     messages: {
46 |       default: `Elements with the ARIA role "{{role}}" must have the following attributes defined: {{attributes}}`
47 |     },
48 |     schema: []
49 |   },
50 |   create(context) {
51 |     return defineTemplateBodyVisitor(context, {
52 |       VElement(node) {
53 |         const elementType = getElementType(node);
54 |         if (!dom.get(elementType)) {
55 |           return;
56 |         }
57 | 
58 |         const roleValue = getElementAttributeValue(node, "role");
59 |         if (!roleValue || typeof roleValue !== "string") {
60 |           return;
61 |         }
62 | 
63 |         roleValue
64 |           .toLowerCase()
65 |           .split(" ")
66 |           .forEach((role) => {
67 |             if (isAriaRoleDefinitionKey(role)) {
68 |               const roleDefinition = roles.get(role) as any;
69 |               const requiredProps = filterRequiredPropsExceptions(
70 |                 node,
71 |                 role,
72 |                 elementType,
73 |                 Object.keys(roleDefinition.requiredProps)
74 |               );
75 | 
76 |               if (requiredProps && !hasAttributes(node, requiredProps)) {
77 |                 context.report({
78 |                   node: node as any,
79 |                   messageId: "default",
80 |                   data: {
81 |                     role: role.toLowerCase(),
82 |                     attributes: requiredProps.join(", ").toLowerCase()
83 |                   }
84 |                 });
85 |               }
86 |             }
87 |           });
88 |       }
89 |     });
90 |   }
91 | };
92 | 
93 | export default rule;
94 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "eslint-plugin-vuejs-accessibility",
  3 |   "version": "2.4.1",
  4 |   "description": "An eslint plugin for checking Vue.js files for accessibility",
  5 |   "main": "dist/index.js",
  6 |   "files": [
  7 |     "dist"
  8 |   ],
  9 |   "scripts": {
 10 |     "lint": "eslint --cache .",
 11 |     "build": "tsc -p tsconfig.build.json",
 12 |     "prepublishOnly": "tsc -p tsconfig.build.json",
 13 |     "test": "jest",
 14 |     "test:integration": "jest --testTimeout 60000 --testRegex \".*\\.spec\\.ts$\"",
 15 |     "release": "np",
 16 |     "docs:dev": "vitepress dev docs",
 17 |     "docs:build": "vitepress build docs"
 18 |   },
 19 |   "author": "Kevin Newton",
 20 |   "license": "MIT",
 21 |   "repository": "github:vue-a11y/eslint-plugin-vuejs-accessibility",
 22 |   "bugs": {
 23 |     "url": "https://github.com/vue-a11y/eslint-plugin-vuejs-accessibility/issues"
 24 |   },
 25 |   "engines": {
 26 |     "node": ">=16.0.0"
 27 |   },
 28 |   "homepage": "https://github.com/vue-a11y/eslint-plugin-vuejs-accessibility#readme",
 29 |   "keywords": [
 30 |     "eslint",
 31 |     "eslint-plugin",
 32 |     "a11y",
 33 |     "accessibility",
 34 |     "vue",
 35 |     "vuejs"
 36 |   ],
 37 |   "peerDependencies": {
 38 |     "eslint": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0"
 39 |   },
 40 |   "dependencies": {
 41 |     "aria-query": "^5.3.0",
 42 |     "emoji-regex": "^10.0.0",
 43 |     "vue-eslint-parser": "^10.1.1"
 44 |   },
 45 |   "devDependencies": {
 46 |     "@types/aria-query": "^5.0.0",
 47 |     "@types/eslint-scope": "^8.3.0",
 48 |     "@types/jest": "^30.0.0",
 49 |     "@types/node": "^25.0.0",
 50 |     "@types/semver": "^7.5.7",
 51 |     "@typescript-eslint/eslint-plugin": "^7.0.0",
 52 |     "@typescript-eslint/parser": "^7.0.0",
 53 |     "eslint": "^8.8.0",
 54 |     "eslint-plugin-eslint-plugin": "^6.0.0",
 55 |     "globals": "^16.0.0",
 56 |     "husky": "^9.0.5",
 57 |     "jest": "^30.0.0",
 58 |     "np": "^10.0.4",
 59 |     "prettier": "^3.0.0",
 60 |     "pretty-quick": "^4.0.0",
 61 |     "semver": "^7.6.0",
 62 |     "ts-jest": "^29.0.3",
 63 |     "ts-node": "^10.3.0",
 64 |     "typescript": "5.9.3",
 65 |     "vitepress": "1.6.4"
 66 |   },
 67 |   "eslintConfig": {
 68 |     "env": {
 69 |       "es6": true,
 70 |       "node": true,
 71 |       "jest": true
 72 |     },
 73 |     "extends": [
 74 |       "eslint:recommended",
 75 |       "plugin:eslint-plugin/recommended",
 76 |       "plugin:@typescript-eslint/recommended"
 77 |     ],
 78 |     "parser": "@typescript-eslint/parser",
 79 |     "plugins": [
 80 |       "eslint-plugin",
 81 |       "@typescript-eslint"
 82 |     ],
 83 |     "rules": {
 84 |       "@typescript-eslint/explicit-module-boundary-types": "off",
 85 |       "@typescript-eslint/no-explicit-any": "off"
 86 |     }
 87 |   },
 88 |   "husky": {
 89 |     "hooks": {
 90 |       "pre-commit": "pretty-quick --staged"
 91 |     }
 92 |   },
 93 |   "jest": {
 94 |     "preset": "ts-jest",
 95 |     "setupFilesAfterEnv": [
 96 |       "./jest.setup.ts"
 97 |     ],
 98 |     "testRegex": ".test.ts$"
 99 |   },
100 |   "prettier": {
101 |     "trailingComma": "none"
102 |   },
103 |   "directories": {
104 |     "doc": "docs"
105 |   }
106 | }
107 | 


--------------------------------------------------------------------------------
/src/rules/__tests__/no-static-element-interactions.test.ts:
--------------------------------------------------------------------------------
 1 | import rule from "../no-static-element-interactions";
 2 | import makeRuleTester from "./makeRuleTester";
 3 | 
 4 | makeRuleTester("no-static-element-interactions", rule, {
 5 |   valid: [
 6 |     // Doesn't contain relevant directives
 7 |     "<div />",
 8 |     "<div id='foo' />",
 9 |     "<CoolComponent />",
10 |     "<div class='foo' />",
11 |     "<form @submit='void 0' />",
12 | 
13 |     // Custom components
14 |     "<Button @click='void 0' />",
15 |     "<v2-button @click='void 0' />",
16 | 
17 |     // Contains relevant directives
18 |     "<div @click='void 0' role='button' />",
19 |     "<div @contextmenu='void 0' role='button' />",
20 |     "<div @dblclick='void 0' role='button' />",
21 |     "<div @doubleclick='void 0' role='button' />",
22 |     "<div @drag='void 0' role='button' />",
23 |     "<div @dragend='void 0' role='button' />",
24 |     "<div @dragenter='void 0' role='button' />",
25 |     "<div @dragexit='void 0' role='button' />",
26 |     "<div @dragleave='void 0' role='button' />",
27 |     "<div @dragover='void 0' role='button' />",
28 |     "<div @dragstart='void 0' role='button' />",
29 |     "<div @drop='void 0' role='button' />",
30 |     "<div @keydown='void 0' role='button' />",
31 |     "<div @keypress='void 0' role='button' />",
32 |     "<div @keyup='void 0' role='button' />",
33 |     "<div @mousedown='void 0' role='button' />",
34 |     "<div @mouseenter='void 0' role='button' />",
35 |     "<div @mouseleave='void 0' role='button' />",
36 |     "<div @mousemove='void 0' role='button' />",
37 |     "<div @mouseout='void 0' role='button' />",
38 |     "<div @mouseover='void 0' role='button' />",
39 |     "<div @mouseup='void 0' role='button' />",
40 | 
41 |     // Elements which don't require `role='button'`
42 |     "<button @click='void 0' />",
43 |     "<input @click='void 0'} />",
44 | 
45 |     // Exception: Elements hidden for screenreaders
46 |     "<div @click='void 0' aria-hidden='true'/>",
47 | 
48 |     // Exception: `role='presentation'`
49 |     "<div @click='void 0' role='presentation'/>"
50 |   ],
51 |   invalid: [
52 |     // Contains relevant directives but no `role='button'`
53 |     "<div @click='void 0' />",
54 |     "<div @contextmenu='void 0' />",
55 |     "<div @dblclick='void 0' />",
56 |     "<div @doubleclick='void 0' />",
57 |     "<div @drag='void 0' />",
58 |     "<div @dragend='void 0' />",
59 |     "<div @dragenter='void 0' />",
60 |     "<div @dragexit='void 0' />",
61 |     "<div @dragleave='void 0' />",
62 |     "<div @dragover='void 0' />",
63 |     "<div @dragstart='void 0' />",
64 |     "<div @drop='void 0' />",
65 |     "<div @keydown='void 0' />",
66 |     "<div @keypress='void 0' />",
67 |     "<div @keyup='void 0' />",
68 |     "<div @mousedown='void 0' />",
69 |     "<div @mouseenter='void 0' />",
70 |     "<div @mouseleave='void 0' />",
71 |     "<div @mousemove='void 0' />",
72 |     "<div @mouseout='void 0' />",
73 |     "<div @mouseover='void 0' />",
74 |     "<div @mouseup='void 0' />",
75 | 
76 |     // Check other element types
77 |     "<a @click='void 0' />",
78 |     "<a @mousedown='void 0' />",
79 |     "<span @click='void 0' />",
80 |     "<span @mousedown='void 0' />",
81 |     "<section @click='void 0' />",
82 |     "<section @mousedown='void 0' />"
83 |   ]
84 | });
85 | 


--------------------------------------------------------------------------------
/src/rules/__tests__/media-has-caption.test.ts:
--------------------------------------------------------------------------------
  1 | import rule from "../media-has-caption";
  2 | import makeRuleTester from "./makeRuleTester";
  3 | 
  4 | const options = [
  5 |   {
  6 |     audio: ["VAudio"],
  7 |     video: ["VVideo"],
  8 |     track: ["VTrack"]
  9 |   }
 10 | ];
 11 | 
 12 | makeRuleTester("media-has-caption", rule, {
 13 |   valid: [
 14 |     "<div />",
 15 |     "<MyDiv />",
 16 |     "<audio><track kind='captions' /></audio>",
 17 |     "<audio><track kind='Captions' /></audio>",
 18 |     "<audio><track kind='Captions' /><track kind='subtitles' /></audio>",
 19 |     "<video><track kind='captions' /></video>",
 20 |     "<video><track kind='Captions' /></video>",
 21 |     "<video><track kind='Captions' /><track kind='subtitles' /></video>",
 22 |     "<audio muted='true' />",
 23 |     "<video muted='true' />",
 24 |     "<video muted />",
 25 |     {
 26 |       code: "<VAudio><track kind='captions' /></VAudio>",
 27 |       options
 28 |     },
 29 |     {
 30 |       code: "<audio><VTrack kind='captions' /></audio>",
 31 |       options
 32 |     },
 33 |     {
 34 |       code: "<VVideo><track kind='captions' /></VVideo>",
 35 |       options
 36 |     },
 37 |     {
 38 |       code: "<video><VTrack kind='captions' /></video>",
 39 |       options
 40 |     },
 41 |     {
 42 |       code: "<VAudio><VTrack kind='captions' /></VAudio>",
 43 |       options
 44 |     },
 45 |     {
 46 |       code: "<VVideo><VTrack kind='captions' /></VVideo>",
 47 |       options
 48 |     },
 49 |     {
 50 |       code: "<VVideo muted />",
 51 |       options
 52 |     },
 53 |     {
 54 |       code: "<VVideo muted='true' />",
 55 |       options
 56 |     },
 57 |     {
 58 |       code: "<VAudio muted />",
 59 |       options
 60 |     },
 61 |     {
 62 |       code: "<VAudio muted='true' />",
 63 |       options
 64 |     }
 65 |   ],
 66 |   invalid: [
 67 |     "<audio><track /></audio>",
 68 |     "<audio><track kind='subtitles' /></audio>",
 69 |     "<audio />",
 70 |     "<video><track /></video>",
 71 |     "<video><track kind='subtitles' /></video>",
 72 |     {
 73 |       code: "<VAudio muted='false' />",
 74 |       options,
 75 |       errors: [{ messageId: "default" }]
 76 |     },
 77 |     {
 78 |       code: "<VVideo muted='false' />",
 79 |       options,
 80 |       errors: [{ messageId: "default" }]
 81 |     },
 82 |     "<video />",
 83 |     "<audio>Foo</audio>",
 84 |     "<video>Foo</video>",
 85 |     {
 86 |       code: "<VAudio />",
 87 |       options,
 88 |       errors: [{ messageId: "default" }]
 89 |     },
 90 |     {
 91 |       code: "<VVideo />",
 92 |       options,
 93 |       errors: [{ messageId: "default" }]
 94 |     },
 95 |     {
 96 |       code: "<audio><VTrack /></audio>",
 97 |       options,
 98 |       errors: [{ messageId: "default" }]
 99 |     },
100 |     {
101 |       code: "<video><VTrack /></video>",
102 |       options,
103 |       errors: [{ messageId: "default" }]
104 |     },
105 |     {
106 |       code: "<VAudio><VTrack kind='subtitles' /></VAudio>",
107 |       options,
108 |       errors: [{ messageId: "default" }]
109 |     },
110 |     {
111 |       code: "<VVideo><VTrack kind='subtitles' /></VVideo>",
112 |       options,
113 |       errors: [{ messageId: "default" }]
114 |     },
115 |     {
116 |       code: "<v-video><v-track kind='subtitles' /></v-video>",
117 |       options,
118 |       errors: [{ messageId: "default" }]
119 |     }
120 |   ]
121 | });
122 | 


--------------------------------------------------------------------------------
/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
 1 | # Contributor Covenant Code of Conduct
 2 | 
 3 | ## Our Pledge
 4 | 
 5 | In the interest of fostering an open and welcoming environment, we as
 6 | contributors and maintainers pledge to making participation in our project and
 7 | our community a harassment-free experience for everyone, regardless of age, body
 8 | size, disability, ethnicity, sex characteristics, gender identity and expression,
 9 | level of experience, education, socio-economic status, nationality, personal
10 | appearance, race, religion, or sexual identity and orientation.
11 | 
12 | ## Our Standards
13 | 
14 | Examples of behavior that contributes to creating a positive environment
15 | include:
16 | 
17 | - Using welcoming and inclusive language
18 | - Being respectful of differing viewpoints and experiences
19 | - Gracefully accepting constructive criticism
20 | - Focusing on what is best for the community
21 | - Showing empathy towards other community members
22 | 
23 | Examples of unacceptable behavior by participants include:
24 | 
25 | - The use of sexualized language or imagery and unwelcome sexual attention or
26 |   advances
27 | - Trolling, insulting/derogatory comments, and personal or political attacks
28 | - Public or private harassment
29 | - Publishing others' private information, such as a physical or electronic
30 |   address, without explicit permission
31 | - Other conduct which could reasonably be considered inappropriate in a
32 |   professional setting
33 | 
34 | ## Our Responsibilities
35 | 
36 | Project maintainers are responsible for clarifying the standards of acceptable
37 | behavior and are expected to take appropriate and fair corrective action in
38 | response to any instances of unacceptable behavior.
39 | 
40 | Project maintainers have the right and responsibility to remove, edit, or
41 | reject comments, commits, code, wiki edits, issues, and other contributions
42 | that are not aligned to this Code of Conduct, or to ban temporarily or
43 | permanently any contributor for other behaviors that they deem inappropriate,
44 | threatening, offensive, or harmful.
45 | 
46 | ## Scope
47 | 
48 | This Code of Conduct applies both within project spaces and in public spaces
49 | when an individual is representing the project or its community. Examples of
50 | representing a project or community include using an official project e-mail
51 | address, posting via an official social media account, or acting as an appointed
52 | representative at an online or offline event. Representation of a project may be
53 | further defined and clarified by project maintainers.
54 | 
55 | ## Enforcement
56 | 
57 | Instances of abusive, harassing, or otherwise unacceptable behavior may be
58 | reported by contacting the project team at kddnewton@gmail.com. All
59 | complaints will be reviewed and investigated and will result in a response that
60 | is deemed necessary and appropriate to the circumstances. The project team is
61 | obligated to maintain confidentiality with regard to the reporter of an incident.
62 | Further details of specific enforcement policies may be posted separately.
63 | 
64 | Project maintainers who do not follow or enforce the Code of Conduct in good
65 | faith may face temporary or permanent repercussions as determined by other
66 | members of the project's leadership.
67 | 
68 | ## Attribution
69 | 
70 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
71 | available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
72 | 
73 | [homepage]: https://www.contributor-covenant.org
74 | 
75 | For answers to common questions about this code of conduct, see
76 | https://www.contributor-covenant.org/faq
77 | 


--------------------------------------------------------------------------------
/src/rules/form-control-has-label.ts:
--------------------------------------------------------------------------------
  1 | import type { Rule } from "eslint";
  2 | import type { AST } from "vue-eslint-parser";
  3 | 
  4 | interface FormControlHasLabelOptions {
  5 |   labelComponents: string[];
  6 | }
  7 | 
  8 | import {
  9 |   defineTemplateBodyVisitor,
 10 |   getElementAttributeValue,
 11 |   getElementType,
 12 |   hasAriaLabel,
 13 |   isAriaHidden,
 14 |   isMatchingElement,
 15 |   makeDocsURL
 16 | } from "../utils";
 17 | 
 18 | function isLabelElement(
 19 |   node:
 20 |     | AST.VElement
 21 |     | AST.VDocumentFragment
 22 |     | AST.VText
 23 |     | AST.VExpressionContainer,
 24 |   { labelComponents = [] }: FormControlHasLabelOptions
 25 | ) {
 26 |   const allLabelComponents = labelComponents.concat("label");
 27 |   return isMatchingElement(node, allLabelComponents);
 28 | }
 29 | 
 30 | function hasNestedLabelElement(
 31 |   node: AST.VElement,
 32 |   options: FormControlHasLabelOptions
 33 | ): boolean {
 34 |   const { parent } = node;
 35 | 
 36 |   if (isLabelElement(parent, options)) {
 37 |     return true;
 38 |   }
 39 | 
 40 |   return (
 41 |     parent &&
 42 |     parent.type === "VElement" &&
 43 |     hasNestedLabelElement(parent, options)
 44 |   );
 45 | }
 46 | 
 47 | /**
 48 |  * Check if the form control at least has an "id" to be associated with a label
 49 |  * Can't really check for the label with a matching "for" attribute, because
 50 |  * checking every element in the file may lead to bad performance.
 51 |  */
 52 | function hasIdForLabelElement(node: AST.VElement): boolean {
 53 |   const id = getElementAttributeValue(node, "id");
 54 | 
 55 |   return Boolean(id);
 56 | }
 57 | 
 58 | const rule: Rule.RuleModule = {
 59 |   meta: {
 60 |     type: "problem",
 61 |     docs: {
 62 |       url: makeDocsURL("form-control-has-label")
 63 |     },
 64 |     messages: {
 65 |       default:
 66 |         "Each form element must have a programmatically associated label element."
 67 |     },
 68 |     schema: [
 69 |       {
 70 |         type: "object",
 71 |         properties: {
 72 |           labelComponents: {
 73 |             type: "array",
 74 |             items: {
 75 |               type: "string"
 76 |             },
 77 |             uniqueItems: true
 78 |           },
 79 |           controlComponents: {
 80 |             type: "array",
 81 |             items: {
 82 |               type: "string"
 83 |             },
 84 |             uniqueItems: true
 85 |           }
 86 |         }
 87 |       }
 88 |     ]
 89 |   },
 90 |   create(context) {
 91 |     return defineTemplateBodyVisitor(context, {
 92 |       VElement(node) {
 93 |         const options = context.options[0] || {};
 94 |         const controlComponents = [
 95 |           "input",
 96 |           "textarea",
 97 |           "select",
 98 |           "meter",
 99 |           "output",
100 |           "progress",
101 |           ...(options.controlComponents || [])
102 |         ];
103 | 
104 |         const elementType = getElementType(node);
105 |         if (!controlComponents.includes(elementType)) {
106 |           return;
107 |         }
108 | 
109 |         if (elementType === "input") {
110 |           const type = getElementAttributeValue(node, "type");
111 |           const types = ["hidden", "button", "image", "submit", "reset"];
112 | 
113 |           if (!type || types.includes(type as any)) {
114 |             return;
115 |           }
116 |         }
117 | 
118 |         if (
119 |           !isAriaHidden(node) &&
120 |           !hasAriaLabel(node) &&
121 |           !hasNestedLabelElement(node, options) &&
122 |           !hasIdForLabelElement(node)
123 |         ) {
124 |           context.report({ node: node as any, messageId: "default" });
125 |         }
126 |       }
127 |     });
128 |   }
129 | };
130 | 
131 | export default rule;
132 | 


--------------------------------------------------------------------------------
/src/rules/__tests__/interactive-supports-focus.test.ts:
--------------------------------------------------------------------------------
 1 | import rule from "../interactive-supports-focus";
 2 | import makeRuleTester from "./makeRuleTester";
 3 | 
 4 | makeRuleTester("interactive-supports-focus", rule, {
 5 |   valid: [
 6 |     "<div />",
 7 |     "<div aria-hidden @click='void 0' />",
 8 |     "<div aria-hidden='true' @click='void 0' />",
 9 |     "<div aria-hidden='hidden !== false' @click='void 0' />",
10 |     "<div aria-hidden='1 < 2' @click='void 0' />",
11 |     "<div aria-hidden='1 <= 2' @click='void 0' />",
12 |     "<div @click='void 0' />",
13 |     "<div @click='void 0' :tabindex='undefined' />",
14 |     "<div @click='void 0' tabindex='bad' />",
15 |     "<div @click='void 0' :role='undefined' />",
16 |     "<div role='section' @click='void 0' />",
17 |     "<div @click='void 0' :aria-hidden='false' />",
18 |     "<input type='text' @click='void 0' />",
19 |     "<input type='hidden' @click='void 0' tabindex='-1' />",
20 |     "<input type='hidden' @click='void 0' :tabindex='-1' />",
21 |     "<input @click='void 0' />",
22 |     "<input @click='void 0' role='combobox' />",
23 |     "<button @click='void 0' class='foo' />",
24 |     "<option @click='void 0' class='foo' />",
25 |     "<select @click='void 0' class='foo' />",
26 |     "<area href='#' @click='void 0' class='foo' />",
27 |     "<area @click='void 0' class='foo' />",
28 |     "<textarea @click='void 0' class='foo' />",
29 |     "<a @click='showNextPage'>Next page</a>",
30 |     "<a @click='showNextPage' :tabindex='undefined'>Next page</a>",
31 |     "<a @click='showNextPage()' tabindex='bad'>Next page</a>",
32 |     "<a @click='void 0' />",
33 |     "<a tabindex='0' @click='void 0' />",
34 |     "<a :tabindex='dynamicTabIndex' @click='void 0' />",
35 |     "<a :tabindex='0' @click='void 0' />",
36 |     "<a role='button' href='#' @click='void 0' />",
37 |     "<a @click='void 0' href='http://x.y.z' />",
38 |     "<a @click='void 0' href='http://x.y.z' tabindex='0' />",
39 |     "<a @click='void 0' href='http://x.y.z' :tabindex='0' />",
40 |     "<a @click='void 0' href='http://x.y.z' role='button' />",
41 |     "<TestComponent @click='foo' />",
42 |     "<input @click='void 0' type='hidden' />",
43 |     "<span @click='submitForm'>Submit</span>",
44 |     "<span @click='submitForm' tabindex='undefined'>Submit</span>",
45 |     "<span @click='submitForm' tabindex='bad'>Submit</span>",
46 |     "<span @click='doSomething' tabindex='0'>Click me!</span>",
47 |     "<span @click='doSomething' :tabindex='0'>Click me!</span>",
48 |     "<span @click='doSomething' tabindex='-1'>Click me too!</span>",
49 |     "<a href='javascript:void(0);' @click='doSomething'>Click ALL the things!</a>",
50 |     "<section @click='void 0' />",
51 |     "<main @click='void 0' />",
52 |     "<article @click='void 0' />",
53 |     "<header @click='void 0' />",
54 |     "<footer @click='void 0' />",
55 |     ...rule.interactiveRoles.map((role) => ({
56 |       code: `<div role='${role}' tabindex='0' @click='void 0' />`,
57 |       options: [{ tabbable: rule.interactiveRoles }]
58 |     })),
59 |     "<div role='tab' tabindex='0' @click='void 0' />",
60 |     "<div role='textbox' tabindex='0' @click='void 0' />",
61 |     "<div role='textbox' aria-disabled='true' @click='void 0' />",
62 |     "<Foo.Bar @click='void 0' aria-hidden='false' />",
63 |     "<Input @click='void 0' type='hidden' />",
64 |     `<component role="button" :is="foo ? 'a' : 'button'" />`
65 |   ],
66 |   invalid: [
67 |     ...rule.interactiveRoles.flatMap((role) =>
68 |       rule.interactiveHandlers.map((handler) => ({
69 |         code: `<div role='${role}' @${handler}='void 0' />`,
70 |         options: [{ tabbable: rule.interactiveRoles }],
71 |         errors: [{ messageId: "tabbable", data: { role } }]
72 |       }))
73 |     ),
74 |     ...rule.interactiveRoles.flatMap((role) =>
75 |       rule.interactiveHandlers.map((handler) => ({
76 |         code: `<div role='${role}' @${handler}='void 0' />`,
77 |         options: [{ tabbable: [] }],
78 |         errors: [{ messageId: "focusable", data: { role } }]
79 |       }))
80 |     )
81 |   ]
82 | });
83 | 


--------------------------------------------------------------------------------
/docs/rules/alt-text.md:
--------------------------------------------------------------------------------
  1 | # alt-text
  2 | 
  3 | Enforce that all elements that require alternative text have meaningful information to relay back to the end user. This is a critical component of accessibility for screenreader users in order for them to understand the content's purpose on the page. By default, this rule checks for alternative text on the following elements: `<img>`, `<area>`, `<input type="image">`, and `<object>`.
  4 | 
  5 | ## 🟢 How to resolve
  6 | 
  7 | ### `<img>`
  8 | 
  9 | An `<img>` must have the `alt` prop set with meaningful text or as an empty string to indicate that it is an image for decoration.
 10 | 
 11 | For images that are being used as icons for a button or control, the `alt` prop should be set to an empty string (`alt=""`).
 12 | 
 13 | ```vue
 14 | <template>
 15 |   <button>
 16 |     <img src="icon.png" alt="" />
 17 |     Save
 18 |   </button>
 19 | </template>
 20 | ```
 21 | 
 22 | The content of an `alt` attribute is used to calculate the accessible label of an element, whereas the text content is used to produce a label for the element. For this reason, adding a label to an icon can produce a confusing or duplicated label on a control that already has appropriate text content.
 23 | 
 24 | ### `<object>`
 25 | 
 26 | Add alternative text to all embedded `<object>` elements using either inner text, setting the `title` prop, or using the `aria-label` or `aria-labelledby` props.
 27 | 
 28 | ### `<input type="image">`
 29 | 
 30 | All `<input type="image">` elements must have a non-empty `alt` prop set with a meaningful description of the image or have the `aria-label` or `aria-labelledby` props set.
 31 | 
 32 | ### `<area>`
 33 | 
 34 | All clickable `<area>` elements within an image map have an `alt`, `aria-label` or `aria-labelledby` prop that describes the purpose of the link.
 35 | 
 36 | ## 🔧 Options
 37 | 
 38 | This rule takes one optional object argument of type object:
 39 | 
 40 | ```json
 41 | {
 42 |   "rules": {
 43 |     "vuejs-accessibility/alt-text": [
 44 |       "error",
 45 |       {
 46 |         "elements": ["img", "object", "area", "input[type=\"image\"]"],
 47 |         "img": ["Image"],
 48 |         "object": ["Object"],
 49 |         "area": ["Area"],
 50 |         "input[type=\"image\"]": ["ImageInput"]
 51 |       }
 52 |     ]
 53 |   }
 54 | }
 55 | ```
 56 | 
 57 | The `elements` option is a whitelist for DOM elements to check for alternative text. If an element is removed from the default set of elements (noted above), any custom components for that component will also be ignored. In order to indicate any custom wrapper components that should be checked, you can map the DOM element to an array of JSX custom components. This is a good use case when you have a wrapper component that simply renders an `img` element:
 58 | 
 59 | ### ✔ Succeed
 60 | 
 61 | ```vue
 62 | <template>
 63 |   <img src="foo" alt="Foo eating a sandwich." />
 64 |   <img src="foo" :alt="altText" />
 65 |   <img src="foo" alt="" />
 66 | 
 67 |   <object aria-label="foo" />
 68 |   <object aria-labelledby="id1" />
 69 |   <object>Meaningful description</object>
 70 |   <object title="An object" />
 71 | 
 72 |   <area aria-label="foo" />
 73 |   <area aria-labelledby="id1" />
 74 |   <area alt="This is descriptive!" />
 75 | 
 76 |   <input type="image" alt="This is descriptive!" />
 77 |   <input type="image" aria-label="foo" />
 78 |   <input type="image" aria-labelledby="id1" />
 79 | </template>
 80 | ```
 81 | 
 82 | ### ❌ Fail
 83 | 
 84 | ```vue
 85 | <template>
 86 |   <img src="foo" />
 87 |   <img alt />
 88 |   <!-- Has no value -->
 89 |   <img src="foo" role="presentation" />
 90 |   <!-- Avoid ARIA if it can be achieved without -->
 91 |   <img src="foo" role="none" />
 92 |   <!-- Avoid ARIA if it can be achieved without -->
 93 | 
 94 |   <object />
 95 |   <area />
 96 |   <input type="image" />
 97 | </template>
 98 | ```
 99 | 
100 | ## 📚 Resources
101 | 
102 | - [aXe object-alt](https://dequeuniversity.com/rules/axe/2.1/object-alt)
103 | - [aXe image-alt](https://dequeuniversity.com/rules/axe/2.1/image-alt)
104 | - [aXe input-image-alt](https://dequeuniversity.com/rules/axe/2.1/input-image-alt)
105 | - [aXe area-alt](https://dequeuniversity.com/rules/axe/2.1/area-alt)
106 | 


--------------------------------------------------------------------------------
/src/rules/alt-text.ts:
--------------------------------------------------------------------------------
  1 | import type { Rule } from "eslint";
  2 | import type { AST } from "vue-eslint-parser";
  3 | 
  4 | import {
  5 |   defineTemplateBodyVisitor,
  6 |   getAttributeValue,
  7 |   getElementAttribute,
  8 |   getElementAttributeValue,
  9 |   getElementType,
 10 |   hasAccessibleChild,
 11 |   hasAriaLabel,
 12 |   isPresentationRole,
 13 |   makeDocsURL,
 14 |   makeKebabCase
 15 | } from "../utils";
 16 | 
 17 | type ElementRule = (context: Rule.RuleContext, node: AST.VElement) => void;
 18 | type RuleByElement = { [key: string]: ElementRule };
 19 | 
 20 | const ruleByElement: RuleByElement = {
 21 |   img(context, node) {
 22 |     const altAttribute = getElementAttribute(node, "alt");
 23 | 
 24 |     if (!altAttribute) {
 25 |       if (isPresentationRole(node)) {
 26 |         context.report({ node: node as any, messageId: "imgPresentation" });
 27 |       } else {
 28 |         context.report({ node: node as any, messageId: "imgMissingAlt" });
 29 |       }
 30 |     } else {
 31 |       const altValue = getAttributeValue(altAttribute);
 32 | 
 33 |       if (!altValue && altValue !== "") {
 34 |         context.report({ node: node as any, messageId: "imgInvalidAlt" });
 35 |       }
 36 |     }
 37 |   },
 38 |   object(context, node) {
 39 |     if (
 40 |       !hasAriaLabel(node) &&
 41 |       !getElementAttributeValue(node, "title") &&
 42 |       !hasAccessibleChild(node)
 43 |     ) {
 44 |       context.report({ node: node as any, messageId: "object" });
 45 |     }
 46 |   },
 47 |   area(context, node) {
 48 |     if (!hasAriaLabel(node) && !getElementAttributeValue(node, "alt")) {
 49 |       context.report({ node: node as any, messageId: "area" });
 50 |     }
 51 |   },
 52 |   'input[type="image"]'(context, node) {
 53 |     if (
 54 |       getElementAttributeValue(node, "type") === "image" &&
 55 |       !hasAriaLabel(node) &&
 56 |       !getElementAttributeValue(node, "alt")
 57 |     ) {
 58 |       context.report({ node: node as any, messageId: "input" });
 59 |     }
 60 |   }
 61 | };
 62 | 
 63 | const rule: Rule.RuleModule = {
 64 |   meta: {
 65 |     type: "problem",
 66 |     docs: {
 67 |       url: makeDocsURL("alt-text")
 68 |     },
 69 |     messages: {
 70 |       area: "Each area of an image map must have a text alternative through the `alt`, `aria-label`, or `aria-labelledby` prop.",
 71 |       imgMissingAlt:
 72 |         "img elements must have an alt prop, either with meaningful text, or an empty string for decorative images.",
 73 |       imgInvalidAlt: `Invalid alt value for img. Use alt="" for presentational images.`,
 74 |       imgPresentation: `Prefer alt="" over a presentational role. First rule of aria is to not use aria if it can be achieved via native HTML.`,
 75 |       input: `<input> elements with type="image" must have a text alternative through the alt, aria-label, or aria-labelledby prop.`,
 76 |       object:
 77 |         "Embedded <object> elements must have alternative text by providing inner text, aria-label or aria-labelledby props."
 78 |     },
 79 |     schema: [
 80 |       {
 81 |         type: "object",
 82 |         properties: ["elements", ...Object.keys(ruleByElement)].reduce(
 83 |           (accum, key) =>
 84 |             Object.assign(accum, {
 85 |               [key]: {
 86 |                 type: "array",
 87 |                 items: {
 88 |                   type: "string"
 89 |                 },
 90 |                 uniqueItems: true
 91 |               }
 92 |             }),
 93 |           {}
 94 |         )
 95 |       }
 96 |     ]
 97 |   },
 98 |   create(context) {
 99 |     const options = context.options[0] || {};
100 |     const elements: string[] = options.elements || Object.keys(ruleByElement);
101 | 
102 |     // Here we're building up a list of element types and their corresponding
103 |     // check function.
104 |     const elementTypes: Record<string, keyof typeof ruleByElement> = {};
105 | 
106 |     elements.forEach((element) => {
107 |       const elementKey = element === 'input[type="image"]' ? "input" : element;
108 |       elementTypes[elementKey] = element;
109 | 
110 |       (options[element] || []).forEach((matchedElement: string) => {
111 |         elementTypes[makeKebabCase(matchedElement)] = elementKey;
112 |       });
113 |     });
114 | 
115 |     return defineTemplateBodyVisitor(context, {
116 |       VElement(node) {
117 |         const elementType = elementTypes[getElementType(node)];
118 |         elementType && ruleByElement[elementType](context, node);
119 |       }
120 |     });
121 |   }
122 | };
123 | 
124 | export default rule;
125 | 


--------------------------------------------------------------------------------
/src/rules/interactive-supports-focus.ts:
--------------------------------------------------------------------------------
  1 | import type { Rule } from "eslint";
  2 | import type { AST } from "vue-eslint-parser";
  3 | import { ARIARoleDefinitionKey, dom, roles } from "aria-query";
  4 | 
  5 | import {
  6 |   defineTemplateBodyVisitor,
  7 |   getAttributeValue,
  8 |   getElementAttribute,
  9 |   getElementAttributeValue,
 10 |   getElementType,
 11 |   hasOnDirectives,
 12 |   interactiveHandlers,
 13 |   isHiddenFromScreenReader,
 14 |   isInteractiveElement,
 15 |   isPresentationRole,
 16 |   makeDocsURL
 17 | } from "../utils";
 18 | 
 19 | const interactiveRoles: ARIARoleDefinitionKey[] = [];
 20 | 
 21 | for (const [role, definition] of roles.entries()) {
 22 |   if (
 23 |     !definition.abstract &&
 24 |     definition.superClass.some((classes) => classes.includes("widget"))
 25 |   ) {
 26 |     interactiveRoles.push(role);
 27 |   }
 28 | }
 29 | 
 30 | function isDisabledElement(node: AST.VElement) {
 31 |   return (
 32 |     getElementAttributeValue(node, "disabled") ||
 33 |     (getElementAttributeValue(node, "aria-disabled") || "").toString() ===
 34 |       "true"
 35 |   );
 36 | }
 37 | 
 38 | function isInteractiveRole(value: any): value is string {
 39 |   if (typeof value !== "string") {
 40 |     return false;
 41 |   }
 42 | 
 43 |   return value
 44 |     .toLowerCase()
 45 |     .split(" ")
 46 |     .some(
 47 |       (role) => roles.has(role as any) && interactiveRoles.includes(role as any)
 48 |     );
 49 | }
 50 | 
 51 | function hasTabIndex(node: AST.VElement) {
 52 |   const attribute = getElementAttribute(node, "tabindex");
 53 | 
 54 |   if (!attribute) {
 55 |     return false;
 56 |   }
 57 | 
 58 |   const value = getAttributeValue(attribute);
 59 | 
 60 |   if (["string", "number"].includes(typeof value)) {
 61 |     if (typeof value === "string" && value.length === 0) {
 62 |       return false;
 63 |     }
 64 |     return Number.isInteger(Number(value));
 65 |   }
 66 | 
 67 |   if (value === true || value === false) {
 68 |     return false;
 69 |   }
 70 | 
 71 |   return value === null;
 72 | }
 73 | 
 74 | export interface InteractiveSupportsFocus extends Rule.RuleModule {
 75 |   interactiveHandlers: string[];
 76 |   interactiveRoles: ARIARoleDefinitionKey[];
 77 | }
 78 | 
 79 | const rule: InteractiveSupportsFocus = {
 80 |   meta: {
 81 |     type: "problem",
 82 |     docs: {
 83 |       url: makeDocsURL("interactive-supports-focus")
 84 |     },
 85 |     messages: {
 86 |       tabbable: `Elements with the "{{role}}" interactive role must be tabbable.`,
 87 |       focusable: `Elements with the "{{role}}" interactive role must be focusable.`
 88 |     },
 89 |     schema: [
 90 |       {
 91 |         type: "object",
 92 |         properties: {
 93 |           tabbable: {
 94 |             type: "array",
 95 |             items: {
 96 |               type: "string",
 97 |               enum: interactiveRoles,
 98 |               default: [
 99 |                 "button",
100 |                 "checkbox",
101 |                 "link",
102 |                 "searchbox",
103 |                 "spinbutton",
104 |                 "switch",
105 |                 "textbox"
106 |               ]
107 |             },
108 |             uniqueItems: true,
109 |             additionalItems: false
110 |           }
111 |         }
112 |       }
113 |     ]
114 |   },
115 |   create(context) {
116 |     return defineTemplateBodyVisitor(context, {
117 |       VElement(node) {
118 |         const role = getElementAttributeValue(node, "role");
119 | 
120 |         if (
121 |           dom.has(getElementType(node)) &&
122 |           hasOnDirectives(node, interactiveHandlers) &&
123 |           !hasTabIndex(node) &&
124 |           !isDisabledElement(node) &&
125 |           !isHiddenFromScreenReader(node) &&
126 |           !isPresentationRole(node) &&
127 |           isInteractiveRole(role) &&
128 |           !isInteractiveElement(node)
129 |         ) {
130 |           const tabbable: string[] = (context.options[0] || {}).tabbable || [];
131 | 
132 |           if (tabbable.includes(role)) {
133 |             // Always tabbable, tabIndex = 0
134 |             context.report({
135 |               node: node as any,
136 |               messageId: "tabbable",
137 |               data: { role }
138 |             });
139 |           } else {
140 |             // Focusable, tabIndex = -1 or 0
141 |             context.report({
142 |               node: node as any,
143 |               messageId: "focusable",
144 |               data: { role }
145 |             });
146 |           }
147 |         }
148 |       }
149 |     });
150 |   },
151 |   interactiveHandlers,
152 |   interactiveRoles
153 | };
154 | 
155 | export default rule;
156 | 


--------------------------------------------------------------------------------
/docs/rules/interactive-supports-focus.md:
--------------------------------------------------------------------------------
 1 | # interactive-supports-focus
 2 | 
 3 | Elements with an interactive role and interaction handlers (mouse or key press) must be focusable.
 4 | 
 5 | ## 🟢 How to resolve
 6 | 
 7 | ### Case: I got the error "Elements with the '\${role}' interactive role must be tabbable". How can I fix this?
 8 | 
 9 | This element is a stand-alone control like a button, a link or a form element. A user should be able to reach this element by pressing the tab key on their keyboard.
10 | 
11 | Replace the component with one that renders semantic html element like `<button>`, `<a href>` or `<input>`. Generally buttons, links and form elements should be reachable via tab key presses. An element that can be tabbed to is said to be in the _tab ring_.
12 | 
13 | -- or --
14 | 
15 | Add the `tabindex` property to your component. A value of zero indicates that this element can be tabbed to.
16 | 
17 | ```vue
18 | <template>
19 |   <div role="button" @click="foo" tabindex="0" />
20 | </template>
21 | ```
22 | 
23 | ### Case: I got the error "Elements with the '\${role}' interactive role must be focusable". How can I fix this?
24 | 
25 | This element is part of a group of buttons, links, menu items, etc. Or this element is part of a composite widget. Composite widgets prescribe standard [keyboard interaction patterns](https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_generalnav). Within a group of similar elements -- like a button bar -- or within a composite widget, elements that can be focused are given a tabindex of -1. This makes the element _focusable_ but not _tabbable_. Generally one item in a group should have a tabindex of zero so that a user can tab to the component. Once an element in the component has focus, your key management behaviors will control traversal within the component's pieces. As the UI author, you will need to implement the key handling behaviors such as listening for traversal key (up/down/left/right) presses and moving the page focus between the focusable elements in your widget.
26 | 
27 | ```vue
28 | <template>
29 |   <div role="menu">
30 |     <div role="menuitem" tabindex="0">Open</div>
31 |     <div role="menuitem" tabindex="-1">Save</div>
32 |     <div role="menuitem" tabindex="-1">Close</div>
33 |   </div>
34 | </template>
35 | ```
36 | 
37 | In the example above, the first item in the group can be tabbed to. The developer provides the ability to traverse to the subsequent items via the up/down/left/right arrow keys. Traversing via arrow keys is not provided by the browser or the assistive technology. See [Fundamental Keyboard Navigation Conventions](https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_generalnav) for information about established traversal behaviors for various UI widgets.
38 | 
39 | ## 🔧 Options
40 | 
41 | This rule takes an options object with the key `tabbable`. The value is an array of interactive ARIA roles that should be considered tabbable, not just focusable. Any interactive role not included in this list will be flagged as needing to be focusable (tabindex of -1).
42 | 
43 | ```json
44 | {
45 |   "vuejs-accessibility/interactive-supports-focus": ["error", {
46 |     "tabbable": [
47 |       "button",
48 |       "checkbox",
49 |       "link",
50 |       "searchbox",
51 |       "spinbutton",
52 |       "switch",
53 |       "textbox"
54 |     ]
55 |   }
56 | ]
57 | ```
58 | 
59 | ### ✔ Succeed
60 | 
61 | ```vue
62 | <template>
63 |   <!-- Good: div with @click attribute is hidden from screen reader -->
64 |   <div aria-hidden @click="() => void 0"></div>
65 | 
66 |   <!-- Good: span with @click attribute is in the tab order -->
67 |   <span @click="doSomething" tabindex="0" role="button">Click me!</span>
68 | 
69 |   <!-- Good: span with @click attribute may be focused programmatically -->
70 |   <span @click="doSomething" tabindex="-1" role="menuitem">Click me too!</span>
71 | 
72 |   <!-- Good: anchor element with href is inherently focusable -->
73 |   <a href="javascript:void(0)" @click="doSomething">Click ALL the things!</a>
74 | 
75 |   <!-- Good: buttons are inherently focusable -->
76 |   <button @click="doSomething">Click the button</button>
77 | </template>
78 | ```
79 | 
80 | ### ❌ Fail
81 | 
82 | ```vue
83 | <template>
84 |   <!-- Bad: span with @click attribute has no tabindex -->
85 |   <span @click="submitForm" role="button">Submit</span>
86 | 
87 |   <!-- Bad: anchor element without href is not focusable -->
88 |   <a @click="showNextPage" role="button">Next page</a>
89 | </template>
90 | ```
91 | 
92 | ## 📚 Resources
93 | 
94 | - [AX_FOCUS_02](https://github.com/GoogleChrome/accessibility-developer-tools/wiki/Audit-Rules#ax_focus_02)
95 | - [Mozilla Developer Network - ARIA Techniques](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role#Keyboard_and_focus)
96 | - [Fundamental Keyboard Navigation Conventions](https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_generalnav)
97 | - [WAI-ARIA Authoring Practices Guide - Design Patterns and Widgets](https://www.w3.org/TR/wai-aria-practices-1.1/#aria_ex)
98 | 


--------------------------------------------------------------------------------
/src/rules/label-has-for.ts:
--------------------------------------------------------------------------------
  1 | import type { Rule } from "eslint";
  2 | import type { AST } from "vue-eslint-parser";
  3 | 
  4 | import {
  5 |   defineTemplateBodyVisitor,
  6 |   getElementAttributeValue,
  7 |   getElementType,
  8 |   isHiddenFromScreenReader,
  9 |   makeDocsURL,
 10 |   makeKebabCase
 11 | } from "../utils";
 12 | 
 13 | type Association = "nesting" | "id";
 14 | type Required =
 15 |   | Association
 16 |   | { some: Association[]; every: undefined }
 17 |   | { some: undefined; every: Association[] };
 18 | 
 19 | type Options = { allowChildren: boolean; controlComponents: string[] };
 20 | 
 21 | const controlTypes = ["input", "meter", "progress", "select", "textarea"];
 22 | 
 23 | function validateNesting(node: AST.VElement, options: Options): boolean {
 24 |   return node.children.some((child) => {
 25 |     const { allowChildren, controlComponents } = options;
 26 | 
 27 |     if (child.type === "VElement" && child.rawName === "slot") {
 28 |       return allowChildren;
 29 |     }
 30 | 
 31 |     if (child.type === "VElement") {
 32 |       return (
 33 |         !isHiddenFromScreenReader(child) &&
 34 |         (controlTypes
 35 |           .concat(controlComponents)
 36 |           .includes(getElementType(child)) ||
 37 |           validateNesting(child, options))
 38 |       );
 39 |     }
 40 | 
 41 |     return false;
 42 |   });
 43 | }
 44 | 
 45 | function validate(node: AST.VElement, rule: Association, options: Options) {
 46 |   switch (rule) {
 47 |     case "nesting":
 48 |       return validateNesting(node, options);
 49 |     case "id":
 50 |       return getElementAttributeValue(node, "for");
 51 |     default:
 52 |       return false;
 53 |   }
 54 | }
 55 | 
 56 | function isValidLabel(
 57 |   node: AST.VElement,
 58 |   required: Required,
 59 |   options: Options
 60 | ) {
 61 |   if (typeof required === "string") {
 62 |     return validate(node, required, options);
 63 |   }
 64 | 
 65 |   if (Array.isArray(required.some)) {
 66 |     return required.some.some((rule) => validate(node, rule, options));
 67 |   }
 68 | 
 69 |   if (Array.isArray(required.every)) {
 70 |     return required.every.every((rule) => validate(node, rule, options));
 71 |   }
 72 | }
 73 | 
 74 | const rule: Rule.RuleModule = {
 75 |   meta: {
 76 |     type: "problem",
 77 |     docs: {
 78 |       url: makeDocsURL("label-has-for")
 79 |     },
 80 |     messages: {
 81 |       default: "Form label must have an associated control."
 82 |     },
 83 |     schema: [
 84 |       {
 85 |         type: "object",
 86 |         properties: {
 87 |           components: {
 88 |             type: "array",
 89 |             items: {
 90 |               type: "string"
 91 |             },
 92 |             uniqueItems: true
 93 |           },
 94 |           controlComponents: {
 95 |             type: "array",
 96 |             items: {
 97 |               type: "string"
 98 |             },
 99 |             uniqueItems: true
100 |           },
101 |           required: {
102 |             oneOf: [
103 |               {
104 |                 type: "string",
105 |                 enum: ["nesting", "id"]
106 |               },
107 |               {
108 |                 type: "object",
109 |                 properties: {
110 |                   some: {
111 |                     type: "array",
112 |                     items: {
113 |                       type: "string",
114 |                       enum: ["nesting", "id"]
115 |                     },
116 |                     uniqueItems: true
117 |                   }
118 |                 },
119 |                 required: ["some"]
120 |               },
121 |               {
122 |                 type: "object",
123 |                 properties: {
124 |                   every: {
125 |                     type: "array",
126 |                     items: {
127 |                       type: "string",
128 |                       enum: ["nesting", "id"]
129 |                     },
130 |                     uniqueItems: true
131 |                   }
132 |                 },
133 |                 required: ["every"]
134 |               }
135 |             ]
136 |           },
137 |           allowChildren: {
138 |             type: "boolean"
139 |           }
140 |         }
141 |       }
142 |     ]
143 |   },
144 |   create(context) {
145 |     return defineTemplateBodyVisitor(context, {
146 |       VElement(node) {
147 |         const {
148 |           allowChildren = false,
149 |           components = [],
150 |           controlComponents = [],
151 |           required = { every: ["nesting", "id"] }
152 |         } = context.options[0] || {};
153 | 
154 |         const labelComponents = components.map(makeKebabCase).concat("label");
155 |         const options = {
156 |           allowChildren,
157 |           controlComponents: controlComponents.map(makeKebabCase)
158 |         };
159 | 
160 |         if (
161 |           labelComponents.includes(getElementType(node)) &&
162 |           !isValidLabel(node, required, options)
163 |         ) {
164 |           context.report({ node: node as any, messageId: "default" });
165 |         }
166 |       }
167 |     });
168 |   }
169 | };
170 | 
171 | export default rule;
172 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
  1 | # Changelog
  2 | 
  3 | All notable changes to this project will be documented in this file.
  4 | 
  5 | The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/) and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
  6 | 
  7 | ## [Unreleased]
  8 | 
  9 | ## [2.0.0] - 2022-10-30
 10 | 
 11 | ### Added
 12 | 
 13 | - `labelComponents` options to add custom label components in `form-control-has-label`.
 14 | - `controlComponents` options to add custom control components in `form-control-has-label`.
 15 | 
 16 | ### Changed
 17 | 
 18 | - Require `aria-query` version 5.0.0 or higher. This is a breaking change for this dependency, meaning it's a breaking change for this package.
 19 | 
 20 | ## [1.1.1] - 2021-12-23
 21 | 
 22 | ### Changed
 23 | 
 24 | - Deprecate the accessible-emoji rule. See https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/issues/627 for details.
 25 | - Fix the `alt-text` handling of different element case names.
 26 | - Fix the `anchor-has-content` handling for content directives (v-html, v-text) on child elements.
 27 | 
 28 | ## [1.1.0] - 2021-10-14
 29 | 
 30 | ### Added
 31 | 
 32 | - Change the peer dependency to allow ESLint 8 without a warning.
 33 | 
 34 | ## [1.0.0] - 2021-10-14
 35 | 
 36 | ### Changed
 37 | 
 38 | - Major bump because of the `aria-query` dependency major bump.
 39 | 
 40 | ## [0.7.1] - 2021-07-15
 41 | 
 42 | ### Changed
 43 | 
 44 | - Reduce overall bundle size by ignoring a lot more files in `.npmignore`.
 45 | 
 46 | ## [0.7.0] - 2021-07-15
 47 | 
 48 | ### Added
 49 | 
 50 | - The `accessibleDirectives` option to both `heading-has-content` and `anchor-has-content`.
 51 | 
 52 | ### Changed
 53 | 
 54 | - Ensure directives that have identifiers for values are counted as present in the element.
 55 | - Convert over to using TypeScript for development.
 56 | 
 57 | ## [0.6.2] - 2021-05-26
 58 | 
 59 | ### Changed
 60 | 
 61 | - Fix `iframe-has-title` such that if the attribute is ommitted completely that it fires correctly.
 62 | - Fix `form-control-has-label` to ignore form controls nested inside `aria-hidden` elements.
 63 | 
 64 | ## [0.6.1] - 2021-01-21
 65 | 
 66 | ### Changed
 67 | 
 68 | - Fix up the extra quote at the end of the doc links.
 69 | 
 70 | ## [0.6.0] - 2020-10-29
 71 | 
 72 | ### Added
 73 | 
 74 | - For the `heading-has-content` and the `anchor-has-content` rules, add an `accessibleChildren` option that always marks certain children as being accessible.
 75 | 
 76 | ### Changed
 77 | 
 78 | - Handle non string literal role values and `role-has-required-aria-props` and non string literal value for `kind` attribute in `media-has-caption`.
 79 | 
 80 | ## [0.5.1] - 2020-09-08
 81 | 
 82 | ### Changed
 83 | 
 84 | - When you pass a conditional expression into an `:is`, then `getElementType` would not be able to handle it. It doesn't truly handle it now, as it just ends up returning `null` for the value of the `:is` expression, but at least now it doesn't break.
 85 | 
 86 | ## [0.5.0] - 2020-09-05
 87 | 
 88 | ### Changed
 89 | 
 90 | - Ensure all rules that allow configuring extra components that should match certain conditions support both forms of casing (`VFoo` and `v-foo`).
 91 | - For the `anchor-has-content` rule, we're now going to allow images with an `alt` tag as the screen reader should pick that up as the content.
 92 | 
 93 | ## [0.4.0] - 2020-08-15
 94 | 
 95 | ### Added
 96 | 
 97 | - The `controlComponents` option for the `label-has-for` rule, which allows you to configure the rule to allow additional control components.
 98 | 
 99 | ## [0.3.1] - 2020-07-10
100 | 
101 | ### Changed
102 | 
103 | - When emojis are hidden from the a11y tree, don't warn with the `accessible-emoji` rule.
104 | 
105 | ## [0.3.0] - 2020-07-03
106 | 
107 | ### Changed
108 | 
109 | - For the `anchor-has-content` rule, allow anchors with explicit aria labels to pass.
110 | - For the `label-has-for` rule when validating that there is correct nesting, ensure that we're actually checking for form controls and not just checking for VElement nodes.
111 | 
112 | ## [0.2.0] - 2020-06-26
113 | 
114 | ### Changed
115 | 
116 | - Bump the dependency on `aria-query` to `4.2.2`.
117 | 
118 | ## [0.1.3] - 2020-05-27
119 | 
120 | ### Changed
121 | 
122 | - Support deeply nested `input` controls for the `form-control-has-label` rule.
123 | 
124 | ## [0.1.2] - 2020-05-11
125 | 
126 | ### Changed
127 | 
128 | - Support using `v-bind` to pass an object, as in `v-bind:$attrs`.
129 | - The `hasContent` check should be assume slots will have content.
130 | 
131 | ## [0.1.1] - 2020-04-27
132 | 
133 | ### Changed
134 | 
135 | - Fix checking for directives when they don't have any arguments.
136 | - Fix `aria-props` rule when checking custom directives.
137 | 
138 | ## [0.1.0] - 2020-04-27
139 | 
140 | ### Added
141 | 
142 | - Initial release 🎉.
143 | 
144 | [unreleased]: https://github.com/vue-a11y/eslint-plugin-vuejs-accessibility/compare/v2.0.0...HEAD
145 | [2.0.0]: https://github.com/vue-a11y/eslint-plugin-vuejs-accessibility/compare/v1.1.1...v2.0.0
146 | [1.1.1]: https://github.com/vue-a11y/eslint-plugin-vuejs-accessibility/compare/v1.1.0...v1.1.1
147 | [1.1.0]: https://github.com/vue-a11y/eslint-plugin-vuejs-accessibility/compare/v1.0.0...v1.1.0
148 | [1.0.0]: https://github.com/vue-a11y/eslint-plugin-vuejs-accessibility/compare/v0.7.1...v1.0.0
149 | [0.7.1]: https://github.com/vue-a11y/eslint-plugin-vuejs-accessibility/compare/v0.7.0...v0.7.1
150 | [0.7.0]: https://github.com/vue-a11y/eslint-plugin-vuejs-accessibility/compare/v0.6.2...v0.7.0
151 | [0.6.2]: https://github.com/vue-a11y/eslint-plugin-vuejs-accessibility/compare/v0.6.1...v0.6.2
152 | [0.6.1]: https://github.com/vue-a11y/eslint-plugin-vuejs-accessibility/compare/v0.6.0...v0.6.1
153 | [0.6.0]: https://github.com/vue-a11y/eslint-plugin-vuejs-accessibility/compare/v0.5.1...v0.6.0
154 | [0.5.1]: https://github.com/vue-a11y/eslint-plugin-vuejs-accessibility/compare/v0.5.0...v0.5.1
155 | [0.5.0]: https://github.com/vue-a11y/eslint-plugin-vuejs-accessibility/compare/v0.4.0...v0.5.0
156 | [0.4.0]: https://github.com/vue-a11y/eslint-plugin-vuejs-accessibility/compare/v0.3.1...v0.4.0
157 | [0.3.1]: https://github.com/vue-a11y/eslint-plugin-vuejs-accessibility/compare/v0.3.0...v0.3.1
158 | [0.3.0]: https://github.com/vue-a11y/eslint-plugin-vuejs-accessibility/compare/v0.2.0...v0.3.0
159 | [0.2.0]: https://github.com/vue-a11y/eslint-plugin-vuejs-accessibility/compare/v0.1.3...v0.2.0
160 | [0.1.3]: https://github.com/vue-a11y/eslint-plugin-vuejs-accessibility/compare/v0.1.2...v0.1.3
161 | [0.1.2]: https://github.com/vue-a11y/eslint-plugin-vuejs-accessibility/compare/v0.1.1...v0.1.2
162 | [0.1.1]: https://github.com/vue-a11y/eslint-plugin-vuejs-accessibility/compare/v0.1.0...v0.1.1
163 | [0.1.0]: https://github.com/vue-a11y/eslint-plugin-vuejs-accessibility/compare/9de449...v0.1.0
164 | 


--------------------------------------------------------------------------------