feat(button): improve a11y support according to WCAG 2.1 #3884
Conversation
Dcose
requested review from
HaixingOoO,
NWYLZW,
RylanBot,
ZWkang,
carolin913,
honkinglin and
uyarn
as code owners
There was a problem hiding this comment.
Pull Request Overview
This pull request enhances the Button component's accessibility (a11y) support to meet WCAG 2.1 standards. The changes focus on improving keyboard operability, screen reader compatibility, and proper semantic markup for various button types.
Key Changes:
- Added comprehensive accessibility attributes (role, aria-disabled, aria-busy, aria-label, tabIndex)
- Implemented keyboard event handlers for div-based buttons (Enter and Space key support)
- Enhanced icon accessibility by adding aria-hidden attribute to decorative icons
- Created extensive test suite covering all accessibility improvements
Reviewed Changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
Button.tsx |
Core implementation of accessibility features including ARIA attributes, keyboard handlers, and semantic improvements |
button.a11y.test.tsx |
Comprehensive test suite validating WCAG 2.1 compliance and accessibility behaviors |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| const handleKeyDown = (e: React.KeyboardEvent) => { | ||
| if (!disabled && !loading) { | ||
| if (e.key === 'Enter') { | ||
| onClick?.(e as unknown as React.MouseEvent<HTMLDivElement>); |
There was a problem hiding this comment.
The type casting e as unknown as React.MouseEvent<HTMLDivElement> is problematic because it forces a KeyboardEvent to be treated as a MouseEvent. Consider creating a separate handler or using a union type that accepts both event types.
Copilot uses AI. Check for mistakes.
|
|
||
| const handleKeyUp = (e: React.KeyboardEvent) => { | ||
| if (!disabled && !loading && e.key === ' ') { | ||
| onClick?.(e as unknown as React.MouseEvent<HTMLDivElement>); |
There was a problem hiding this comment.
Same type casting issue as line 76. The KeyboardEvent should not be forced into a MouseEvent type, as this could lead to runtime issues when the onClick handler expects MouseEvent-specific properties.
Copilot uses AI. Check for mistakes.
|
|
commit: |
|
/update-snapshots |
|
⏳ 正在运行快照更新。。。 CI: Open |
2 participants
🤔 这个 PR 的性质是？
🔗 相关 Issue
💡 需求背景和解决方案
背景：
当前
Button组件在使用div作为按钮或图标按钮时，部分无障碍需求未完全满足 WCAG 2.1 标准，例如键盘可操作性、aria 标签、loading 状态标识等。解决方案：
role="button"和aria-disabled等无障碍属性，确保div按钮可被屏幕阅读器识别。<button>元素也可操作。aria-hidden="true"，避免装饰性图标干扰屏幕阅读器。aria-busy标识。button.a11y.test.tsx测试文件，覆盖所有新增无障碍行为。📝 更新日志
feat(Button): 增强组件的无障碍支持，符合 WCAG 2.1 标准
本条 PR 不需要纳入 Changelog
☑️ 请求合并前的自查清单