🎸 feat: accesibility のツールの導入

[anko9801]

PR Type

Enhancement, Tests

---

Description

• 開発環境でアクセシビリティツールvue-axeを統合し、アクセシビリティの問題を検出するポップアップを表示する機能を追加しました。
• eslint-plugin-vuejs-accessibilityを導入し、Vueコンポーネントのアクセシビリティルールを強化しました。
• Vite設定にaxe-coreを最適化依存関係として追加しました。
• Mock Service Workerのバージョンとヘッダー処理を更新しました。
• package.jsonおよびpackage-lock.jsonに新しい依存関係を追加しました。

---

Changes walkthrough 📝

	Relevant files
Enhancement	env.d.ts Add module declaration for `vue-axe`.                                        src/env.d.ts Added module declaration for vue-axe. +2/-0      main.ts Integrate `vue-axe` for accessibility in development.        src/main.ts Introduced conditional loading of vue-axe for development environments. Updated app initialization to include vue-axe and its popup component. +16/-3    eslint.config.js Configure `eslint-plugin-vuejs-accessibility` for improved linting. eslint.config.js Added eslint-plugin-vuejs-accessibility configuration. Defined specific accessibility rules for Vue components. +11/-0
Configuration changes	vite.config.ts Optimize `axe-core` dependency in Vite configuration.        vite.config.ts Added axe-core to optimizeDeps for dependency optimization. +5/-2
Miscellaneous	mockServiceWorker.js Update Mock Service Worker for compatibility improvements. public/mockServiceWorker.js Updated PACKAGE_VERSION and INTEGRITY_CHECKSUM. Adjusted headers handling for passthrough requests. +10/-8
Dependencies	package-lock.json Update package-lock.json with new dependencies.                    package-lock.json Added dependencies for vue-axe, eslint-plugin-vuejs-accessibility, and related packages. Updated versions of existing dependencies. +121/-0  package.json Add `vue-axe` and `eslint-plugin-vuejs-accessibility` to project. package.json Added vue-axe and eslint-plugin-vuejs-accessibility to dev dependencies. Updated dependency versions. +3/-0

---

💡 PR-Agent usage: Comment /help "your question" on any pull request to receive relevant information

[github-actions]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 4 🔵🔵🔵🔵⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Conditional Import Logic The conditional import of vue-axe for development environments should be carefully reviewed to ensure it does not unintentionally affect production builds or introduce performance issues. 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 } Accessibility Rules Configuration The addition of eslint-plugin-vuejs-accessibility and its rules should be validated to ensure they align with the project's accessibility goals and do not cause unnecessary linting conflicts. ...pluginVueA11y.configs["flat/recommended"], { "rules": { "vuejs-accessibility/label-has-for": ["error", { "required": { "some": ["nesting", "id"] } }] }, },