tdesign-react icon indicating copy to clipboard operation
tdesign-react copied to clipboard

feat(button): improve a11y support according to WCAG 2.1

Open Dcose opened this issue 2 months ago • 4 comments

🤔 这个 PR 的性质是?

  • [ ] 日常 bug 修复
  • [x] 新特性提交
  • [ ] 文档改进
  • [ ] 演示代码改进
  • [ ] 组件样式/交互改进
  • [ ] CI/CD 改进
  • [ ] 重构
  • [ ] 代码风格优化
  • [x] 测试用例
  • [ ] 分支合并
  • [ ] 其他

🔗 相关 Issue

💡 需求背景和解决方案

  • 背景: 当前 Button 组件在使用 div 作为按钮或图标按钮时,部分无障碍需求未完全满足 WCAG 2.1 标准,例如键盘可操作性、aria 标签、loading 状态标识等。

  • 解决方案:

    1. 增加 role="button"aria-disabled 等无障碍属性,确保 div 按钮可被屏幕阅读器识别。
    2. 为键盘操作(Enter / Space)提供事件支持,保证非 <button> 元素也可操作。
    3. icon 元素加上 aria-hidden="true",避免装饰性图标干扰屏幕阅读器。
    4. loading 状态时增加 aria-busy 标识。
    5. 新增 button.a11y.test.tsx 测试文件,覆盖所有新增无障碍行为。

📝 更新日志

  • feat(Button): 增强组件的无障碍支持,符合 WCAG 2.1 标准

  • [ ] 本条 PR 不需要纳入 Changelog

☑️ 请求合并前的自查清单

⚠️ 请自检并全部勾选全部选项。⚠️

  • [x] 文档已补充或无须补充
  • [x] 代码演示已提供或无须提供
  • [x] TypeScript 定义已补充或无须补充
  • [x] Changelog 已提供或无须提供

Dcose avatar Oct 11 '25 09:10 Dcose

完成

github-actions[bot] avatar Oct 11 '25 11:10 github-actions[bot]

tdesign-react-demo

npm i https://pkg.pr.new/tdesign-react@3884

commit: 1a9e168

pkg-pr-new[bot] avatar Oct 11 '25 11:10 pkg-pr-new[bot]

/update-snapshots

RylanBot avatar Oct 12 '25 03:10 RylanBot

⏳ 正在运行快照更新。。。 CI: Open

github-actions[bot] avatar Oct 12 '25 03:10 github-actions[bot]