Skip to content

Buttonのアクセシビリティをチェック - #132

Closed
touyou wants to merge 6 commits into
mainfrom
chore/check-button-a11y
Closed

Buttonのアクセシビリティをチェック#132
touyou wants to merge 6 commits into
mainfrom
chore/check-button-a11y

Conversation

@touyou

@touyou touyou commented Aug 19, 2025

Copy link
Copy Markdown
Member

概要

試しにアクセシビリティ面でチェックを入れるとしたらの一連をやってみました

変更内容

  • Downイベントを非推奨にするように
  • テストを念の為見直してもらい、セキュリティ関連のものを追加
  • ボタンのアイコンを個別に見ることはないかと思うのでaria-hiddenを設定
  • issueのチェックを敢行
  • READMEを更新

動作確認

  • pnpm lint を実行
  • pnpm build:package を実行してパッケージが正常にビルドされることを確認
  • pnpm test を実行してテストがすべて成功することを確認

関連 Issue

close goodpatch/sparkle-design-issue-archive#16

touyou added 5 commits August 19, 2025 16:10
- ButtonPropsに新しい型ButtonComponentPropsを導入
- onMouseDown, onPointerDown, onTouchStartを非推奨としてマーク
- アクセシビリティに関する注意喚起を追加
- DocsページでのargTypesとcontrolsのイベントハンドラを除外しました。
- ボタンコンポーネントのprefixIconとsuffixIconにaria-hidden属性を追加
- ボタンの子要素に対するXSS攻撃を防ぐテストを追加
- aria-labelに特殊文字を含む場合の処理を確認するテストを追加
- ボタンコンポーネントのサポート状況を更新し、対応状況を明確化しました。
@touyou
touyou requested a review from ore0 August 19, 2025 07:39
@touyou touyou self-assigned this Aug 19, 2025
Copilot AI review requested due to automatic review settings August 19, 2025 07:39
@vercel

vercel Bot commented Aug 19, 2025

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Preview Comments Updated (UTC)
sparkle-design Ready Ready Preview Comment Sep 26, 2025 8:48am

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR implements accessibility improvements for the Button component by deprecating down event handlers and adding proper ARIA attributes to icons.

  • Deprecated onMouseDown, onPointerDown, and onTouchStart event handlers for accessibility compliance with WCAG pointer cancellation guidelines
  • Added aria-hidden attributes to prefix and suffix icons to improve screen reader experience
  • Added security-focused tests to prevent XSS vulnerabilities and handle special characters in ARIA labels

Reviewed Changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 4 comments.

File Description
src/components/ui/button/index.tsx Deprecated down event handlers and added aria-hidden to icons
src/components/ui/button/index.test.tsx Added security tests for XSS prevention and special character handling
README.md Updated Button accessibility status to complete
.storybook/preview.ts Excluded deprecated event handlers from Storybook documentation

Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.

Comment thread src/components/ui/button/index.tsx
Comment thread src/components/ui/button/index.tsx
Comment thread .storybook/preview.ts
Comment thread .storybook/preview.ts
@touyou

touyou commented Jan 6, 2026

Copy link
Copy Markdown
Member Author

こっちスキルに反映して別でやってみたので閉じますね

@touyou touyou closed this Jan 6, 2026
@touyou
touyou deleted the chore/check-button-a11y branch January 6, 2026 08:32
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants