关闭按钮a标签修改为button用以无障碍属性实现 #367
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Walkthrough本次提交包含两部分更改：一是在 Changes
Sequence Diagram(s)sequenceDiagram
participant 用户
participant 按钮
participant 组件
用户->>按钮: 点击关闭按钮
按钮->>组件: 触发 onCloseKeyDown 事件
组件->>组件: 执行关闭逻辑
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure. 🔧 ESLint
WARN deprecated [email protected]: This version is no longer supported. Please see https://eslint.org/version-support for other options. 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/Notice.tsx (1)
146-160: 提高可访问性：将锚点标签替换为按钮元素将关闭图标从
<a>标签更改为<button>标签是一个很好的改进，可以：
- 提高语义正确性 - 按钮用于触发页面内的操作，而不是导航
- 改善屏幕阅读器用户体验 - 辅助技术可以正确识别并宣布这是一个按钮
- 增强键盘可访问性 - 按钮默认可以接收键盘焦点，并可通过Enter和空格键激活
这符合WCAG (Web Content Accessibility Guidelines) 的最佳实践，特别是针对"可感知"和"可操作"原则的要求。
您还可以考虑添加一些额外的无障碍属性来进一步提升用户体验：
<button tabIndex={0} className={`${noticePrefixCls}-close`} onKeyDown={onCloseKeyDown} aria-label="Close" + aria-pressed="false" {...ariaProps} onClick={(e) => { e.preventDefault(); e.stopPropagation(); onInternalClose(); }} > {closableObj.closeIcon} </button>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
assets/index.less(1 hunks)src/Notice.tsx(3 hunks)
🔇 Additional comments (2)
assets/index.less (1)
82-83: 为关闭按钮添加适当的样式通过设置
border: 0和background-color: #fff，使按钮元素在视觉上保持一致性，同时去除了按钮默认的边框样式。这是从<a>标签转换为<button>元素的必要样式调整，确保用户界面不会产生视觉差异。在无障碍性方面，这些样式变更配合HTML元素的语义变更，共同提升了组件的可访问性。
src/Notice.tsx (1)
49-49: 更新事件处理器类型以匹配按钮元素将
onCloseKeyDown的类型从HTMLAnchorElement更改为HTMLButtonElement，与实际DOM元素类型保持一致，确保类型安全。这种变更是从锚点标签转换到按钮元素的必要步骤。
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## master #367 +/- ##
==========================================
- Coverage 99.74% 99.74% -0.01%
==========================================
Files 7 7
Lines 777 772 -5
Branches 125 124 -1
==========================================
- Hits 775 770 -5
Misses 2 2 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
…nt#367) * 关闭按钮修改从a标签修改为button并调整样式和之前a标签一致 * 格式化恢复 * 无 * 关闭button删除tabIndex={0} * 补充单测 * 删除closeIcon，icon从closable中取用 * 单测配置duration=0 * 修改closableObj?.closeIcon为?? --------- Co-authored-by: 刘欢 <[email protected]> (cherry picked from commit bdc9763)
3 participants
修改背景：
antd RFC：ant-design/ant-design#53197
Summary by CodeRabbit