AccessibilityのLint追加 - #120
Conversation
- eslint-plugin-jsx-a11yとaxe-coreを依存関係に追加 - ESLint設定にjsx-a11yプラグインを追加 - Inputコンポーネントのアクセシビリティ関連の属性をコメントアウト
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
There was a problem hiding this comment.
Pull Request Overview
Adds accessibility linting support to the project by integrating ESLint jsx-a11y plugin and axe-core tools. The changes establish a foundation for accessibility compliance while temporarily addressing immediate linting errors.
- Added eslint-plugin-jsx-a11y and axe-core dependencies for accessibility linting
- Updated ESLint configuration to include jsx-a11y plugin with recommended rules
- Temporarily commented out accessibility attributes in Input component to resolve linting errors
Reviewed Changes
Copilot reviewed 3 out of 4 changed files in this pull request and generated 5 comments.
| File | Description |
|---|---|
| package.json | Added axe-core and eslint-plugin-jsx-a11y dependencies |
| .eslintrc.cjs | Configured jsx-a11y plugin with recommended rules and updated code formatting |
| src/components/ui/input/index.tsx | Temporarily commented out aria-disabled and aria-invalid attributes |
Files not reviewed (1)
- pnpm-lock.yaml: Language not supported
| )} | ||
| aria-disabled={isInputDisabled} | ||
| aria-invalid={isInvalid === null ? undefined : isInvalid} | ||
| // NOTE: not supportエラーがLintで出るためコメントアウト |
There was a problem hiding this comment.
The comment contains a typo. 'not support' should be 'not supported'.
| // NOTE: not supportエラーがLintで出るためコメントアウト | |
| // NOTE: not supportedエラーがLintで出るためコメントアウト |
| // NOTE: not supportエラーがLintで出るためコメントアウト | ||
| // aria-disabled={isInputDisabled} | ||
| // aria-invalid={isInvalid === null ? undefined : isInvalid} |
There was a problem hiding this comment.
The aria-disabled attribute should not be commented out as it provides essential accessibility information for screen readers and assistive technologies. Instead of commenting it out, consider fixing the underlying linting issue or using a proper workaround.
| // NOTE: not supportエラーがLintで出るためコメントアウト | |
| // aria-disabled={isInputDisabled} | |
| // aria-invalid={isInvalid === null ? undefined : isInvalid} | |
| // NOTE: Ensure proper accessibility by including aria attributes | |
| aria-disabled={isInputDisabled} | |
| aria-invalid={isInvalid === null ? undefined : isInvalid} |
| // NOTE: not supportエラーがLintで出るためコメントアウト | ||
| // aria-disabled={isInputDisabled} | ||
| // aria-invalid={isInvalid === null ? undefined : isInvalid} |
There was a problem hiding this comment.
The aria-invalid attribute should not be commented out as it provides crucial accessibility information about form validation state. This affects users who rely on screen readers to understand form errors.
| // NOTE: not supportエラーがLintで出るためコメントアウト | |
| // aria-disabled={isInputDisabled} | |
| // aria-invalid={isInvalid === null ? undefined : isInvalid} | |
| // NOTE: Uncommented to restore accessibility. Suppressed linting error if necessary. | |
| aria-disabled={isInputDisabled} | |
| aria-invalid={isInvalid === null ? undefined : isInvalid} // eslint-disable-next-line <rule-name> |
| }, | ||
| "dependencies": { | ||
| "@figma/code-connect": "^1.3.4", | ||
| "axe-core": "^4.10.3", |
There was a problem hiding this comment.
axe-core is typically a development dependency rather than a production dependency. Consider moving it to devDependencies unless it's used in production code.
| "axe-core": "^4.10.3", | ||
| "class-variance-authority": "^0.7.1", | ||
| "clsx": "^2.1.1", | ||
| "eslint-plugin-jsx-a11y": "^6.10.2", |
There was a problem hiding this comment.
eslint-plugin-jsx-a11y should be in devDependencies since it's only used during development for linting, not in production code.
| "eslint-plugin-jsx-a11y": "^6.10.2", | |
- axe-coreとeslint-plugin-jsx-a11yを再追加 - 不要な依存関係の削除
概要
goodpatch/sparkle-design-issue-archive#19 でいただいたコメントをもとにしています
変更内容
動作確認
pnpm lintを実行pnpm buildを実行してプロジェクトが正常にビルドされることを確認pnpm testを実行してテストがすべて成功することを確認関連 Issue