feat(vue-a11y): add vue accessibility plugin support (#686)

Author: oliver139

README.md

@@ -540,6 +540,27 @@ export default antfu({
 
 As it's in maintenance mode, we only accept bug fixes for Vue 2. It might also be removed in the future when `eslint-plugin-vue` drops support for Vue 2. We recommend upgrading to Vue 3 if possible.
 
+#### Vue Accessibility
+
+To enable Vue accessibility support, you need to explicitly turn it on:
+
+```js
+// eslint.config.js
+import antfu from '@antfu/eslint-config'
+
+export default antfu({
+  vue: {
+    a11y: true
+  },
+})
+```
+
+Running `npx eslint` should prompt you to install the required dependencies, otherwise, you can install them manually:
+
+```bash
+npm i -D eslint-plugin-vuejs-accessibility
+```
+
 ### Optional Configs
 
 We provide some optional configs for specific use cases, that we don't include their dependencies by default.

eslint.config.ts

@@ -4,7 +4,9 @@ import { antfu } from './src'
 
 export default antfu(
   {
-    vue: true,
+    vue: {
+      a11y: true,
+    },
     react: true,
     solid: true,
     svelte: true,

package.json

@@ -54,6 +54,7 @@
     "eslint-plugin-react-refresh": "^0.4.4",
     "eslint-plugin-solid": "^0.14.3",
     "eslint-plugin-svelte": ">=2.35.1",
+    "eslint-plugin-vuejs-accessibility": "^2.4.1",
     "prettier-plugin-astro": "^0.14.0",
     "prettier-plugin-slidev": "^1.0.5",
     "svelte-eslint-parser": ">=0.37.0"
@@ -89,6 +90,9 @@
     "eslint-plugin-svelte": {
       "optional": true
     },
+    "eslint-plugin-vuejs-accessibility": {
+      "optional": true
+    },
     "prettier-plugin-astro": {
       "optional": true
     },
@@ -155,6 +159,7 @@
     "eslint-plugin-react-refresh": "catalog:peer",
     "eslint-plugin-solid": "catalog:peer",
     "eslint-plugin-svelte": "catalog:peer",
+    "eslint-plugin-vuejs-accessibility": "catalog:peer",
     "eslint-typegen": "catalog:dev",
     "execa": "catalog:dev",
     "jiti": "catalog:dev",

pnpm-lock.yaml

@@ -35,6 +35,7 @@ catalogs:
     eslint-plugin-react-refresh: ^0.4.19
     eslint-plugin-solid: ^0.14.5
     eslint-plugin-svelte: ^3.3.3
+    eslint-plugin-vuejs-accessibility: ^2.4.1
     prettier-plugin-astro: ^0.14.1
     prettier-plugin-slidev: ^1.0.5
     svelte: ^5.23.2

pnpm-workspace.yaml

@@ -9,12 +9,13 @@ import type {
 
 import { mergeProcessors } from 'eslint-merge-processors'
 import { GLOB_VUE } from '../globs'
-import { interopDefault } from '../utils'
+import { ensurePackages, interopDefault } from '../utils'
 
 export async function vue(
   options: OptionsVue & OptionsHasTypeScript & OptionsOverrides & OptionsStylistic & OptionsFiles = {},
 ): Promise<TypedFlatConfigItem[]> {
   const {
+    a11y = false,
     files = [GLOB_VUE],
     overrides = {},
     stylistic = true,
@@ -29,14 +30,22 @@ export async function vue(
     indent = 2,
   } = typeof stylistic === 'boolean' ? {} : stylistic
 
+  if (a11y) {
+    await ensurePackages([
+      'eslint-plugin-vuejs-accessibility',
+    ])
+  }
+
   const [
     pluginVue,
     parserVue,
     processorVueBlocks,
+    pluginVueA11y,
   ] = await Promise.all([
     interopDefault(import('eslint-plugin-vue')),
     interopDefault(import('vue-eslint-parser')),
     interopDefault(import('eslint-processor-vue-blocks')),
+    ...a11y ? [interopDefault(import('eslint-plugin-vuejs-accessibility'))] : [],
   ] as const)
 
   return [
@@ -64,6 +73,7 @@ export async function vue(
       name: 'antfu/vue/setup',
       plugins: {
         vue: pluginVue,
+        ...a11y ? { 'vue-a11y': pluginVueA11y } : {},
       },
     },
     {
@@ -192,6 +202,33 @@ export async function vue(
             }
           : {},
 
+        ...a11y
+          ? {
+              'vue-a11y/alt-text': 'error',
+              'vue-a11y/anchor-has-content': 'error',
+              'vue-a11y/aria-props': 'error',
+              'vue-a11y/aria-role': 'error',
+              'vue-a11y/aria-unsupported-elements': 'error',
+              'vue-a11y/click-events-have-key-events': 'error',
+              'vue-a11y/form-control-has-label': 'error',
+              'vue-a11y/heading-has-content': 'error',
+              'vue-a11y/iframe-has-title': 'error',
+              'vue-a11y/interactive-supports-focus': 'error',
+              'vue-a11y/label-has-for': 'error',
+              'vue-a11y/media-has-caption': 'warn',
+              'vue-a11y/mouse-events-have-key-events': 'error',
+              'vue-a11y/no-access-key': 'error',
+              'vue-a11y/no-aria-hidden-on-focusable': 'error',
+              'vue-a11y/no-autofocus': 'warn',
+              'vue-a11y/no-distracting-elements': 'error',
+              'vue-a11y/no-redundant-roles': 'error',
+              'vue-a11y/no-role-presentation-on-focusable': 'error',
+              'vue-a11y/no-static-element-interactions': 'error',
+              'vue-a11y/role-has-required-aria-props': 'error',
+              'vue-a11y/tabindex-no-positive': 'warn',
+            }
+          : {},
+
         ...overrides,
       },
     },

src/configs/vue.ts

@@ -44,6 +44,14 @@ export interface OptionsVue extends OptionsOverrides {
    * @default 3
    */
   vueVersion?: 2 | 3
+
+  /**
+   * Vue accessibility plugin. Help check a11y issue in `.vue` files upon enabled
+   *
+   * @see https://vue-a11y.github.io/eslint-plugin-vuejs-accessibility/
+   * @default false
+   */
+  a11y?: boolean
 }
 
 export type OptionsTypescript =