🎸 feat: accesibility のツールの導入

eslint.config.js

@@ -1,6 +1,7 @@
 import pluginJs from '@eslint/js'
 import eslintConfigPrettier from 'eslint-config-prettier'
 import pluginVue from 'eslint-plugin-vue'
+import pluginVueA11y from 'eslint-plugin-vuejs-accessibility'
 import globals from 'globals'
 import tseslint from 'typescript-eslint'
 
@@ -31,5 +32,15 @@ export default [
       'vue/require-default-prop': 'off'
     }
   },
+  ...pluginVueA11y.configs["flat/recommended"],
+  {
+    "rules": {
+      "vuejs-accessibility/label-has-for": ["error", {
+        "required": {
+          "some": ["nesting", "id"]
+        }
+      }]
+    },
+  },
   eslintConfigPrettier
 ]

package.json

@@ -40,11 +40,13 @@
     "@vue/eslint-config-prettier": "^10.1.0",
     "@vue/eslint-config-typescript": "^14.1.4",
     "autoprefixer": "^10.4.20",
+    "axe-core": "^4.10.2",
     "eslint": "^9.14.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-unused-imports": "^4.1.4",
     "eslint-plugin-vue": "^9.30.0",
+    "eslint-plugin-vuejs-accessibility": "^2.4.1",
     "esno": "^4.8.0",
     "execa": "^9.5.1",
     "globals": "^15.12.0",
@@ -58,6 +60,7 @@
     "typescript": "^5.6.3",
     "typescript-eslint": "^8.12.2",
     "vite": "^5.4.10",
+    "vue-axe": "^3.1.2",
     "vue-tsc": "^2.1.10"
   },
   "msw": {

public/mockServiceWorker.js

@@ -8,8 +8,8 @@
  * - Please do NOT serve this file on production.
  */
 
-const PACKAGE_VERSION = '2.6.1'
-const INTEGRITY_CHECKSUM = '07a8241b182f8a246a7cd39894799a9e'
+const PACKAGE_VERSION = '2.6.6'
+const INTEGRITY_CHECKSUM = 'ca7800994cc8bfb5eb961e037c877074'
 const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
 const activeClientIds = new Set()
 
@@ -192,12 +192,14 @@ async function getResponse(event, client, requestId) {
   const requestClone = request.clone()
 
   function passthrough() {
-    const headers = Object.fromEntries(requestClone.headers.entries())
-
-    // Remove internal MSW request header so the passthrough request
-    // complies with any potential CORS preflight checks on the server.
-    // Some servers forbid unknown request headers.
-    delete headers['x-msw-intention']
+    // Cast the request headers to a new Headers instance
+    // so the headers can be manipulated with.
+    const headers = new Headers(requestClone.headers)
+
+    // Remove the "accept" header value that marked this request as passthrough.
+    // This prevents request alteration and also keeps it compliant with the
+    // user-defined CORS policies.
+    headers.delete('accept', 'msw/passthrough')
 
     return fetch(requestClone, { headers })
   }

src/env.d.ts

@@ -8,3 +8,5 @@ declare module '*.vue' {
 }
 
 declare const _APP_VERSION: string
+
+declare module 'vue-axe'

src/main.ts

@@ -1,5 +1,5 @@
 import { createPinia } from 'pinia'
-import { createApp } from 'vue'
+import { Fragment, createApp, h } from 'vue'
 import type { PluginOptions } from 'vue-toastification'
 import Toast, { POSITION } from 'vue-toastification'
 import 'vue-toastification/dist/index.css'
@@ -11,7 +11,20 @@ import router from './router'
 
 initMock()
 
-const app = createApp(App)
+const setup = async () => {
+  if (import.meta.env.NODE_DEV === 'production') {
+    return createApp(App)
+  }
+
+  // NOTE: 開発環境では vue-axe を読み込む
+  const VueAxe = await import('vue-axe')
+  const app = createApp({
+    render: () => h(Fragment, [h(App), h(VueAxe.VueAxePopup)])
+  })
+  app.use(VueAxe.default)
+
+  return app
+}
 
 const options: PluginOptions = {
   position: POSITION.BOTTOM_LEFT,
@@ -22,4 +35,4 @@ const options: PluginOptions = {
   hideProgressBar: true
 }
 
-app.use(router).use(createPinia()).use(Toast, options).mount('#app')
+setup().then((app) => app.use(router).use(createPinia()).use(Toast, options).mount('#app'))

vite.config.ts

@@ -1,6 +1,6 @@
-import vue from '@vitejs/plugin-vue'
 import * as https from 'https'
 import * as path from 'path'
+import vue from '@vitejs/plugin-vue'
 import brotli from 'rollup-plugin-brotli'
 import { defineConfig } from 'vite'
 
@@ -23,5 +23,8 @@ export default defineConfig({
         agent: keepAliveAgent
       }
     }
-  }
+  },
+  optimizeDeps: {
+    include: ["axe-core"],
+  },
 })