fix: add aria-hidden attribute to visually hidden input element #279
Conversation
|
Important Review skippedReview was skipped due to path filters ⛔ Files ignored due to path filters (1)
CodeRabbit blocks several paths by default. You can override this behavior by explicitly including those paths in the path filters. For example, including You can disable this status message by setting the Walkthrough此次更改在 Changes
Possibly related PRs
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 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 (
|
|
input组件属于内部实现，对用户不可见，无需展示在屏幕阅读器上
|
![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
🧹 Outside diff range and nitpick comments (1)
src/index.tsx (1)
需要增强键盘可访问性支持
基于代码分析，虽然组件已实现了基本的ARIA属性（role="listbox"/"option"和aria-selected等），但仍缺少关键的键盘交互支持：
- 未发现tabIndex属性设置
- 缺少键盘事件处理（如onKeyDown）
- 未实现焦点管理相关逻辑
建议添加以下改进：
- 为可选项添加适当的tabIndex
- 实现左右方向键导航
- 添加焦点状态样式
- 确保Enter/Space键可触发选择
🔗 Analysis chain
Line range hint
109-116: 建议验证完整的可访问性实现虽然添加
aria-hidden是个很好的改进，但建议进行全面的可访问性测试，确保：
- 键盘导航正常工作
- 焦点管理适当
- 高对比度模式下的可见性
运行以下脚本检查其他可访问性相关属性：
Let me check for keyboard navigation and focus management related attributes.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # 检查组件中的所有 ARIA 属性和角色 rg -i '(aria-|role=)'Length of output: 7194
Script:
#!/bin/bash # Check for keyboard and focus related attributes rg -i '(tabindex|onkey|focus)' src/index.tsx -A 2Length of output: 51
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (1)
- src/index.tsx (1 hunks)
🔇 Additional comments (1)
src/index.tsx (1)
110-110: 添加 aria-hidden 属性改善了可访问性！这个改动很好地解决了屏幕阅读器重复朗读的问题。由于该 input 元素仅用于内部状态管理，添加
aria-hidden="true"可以防止辅助技术重复朗读，从而提供更好的用户体验。
|
ci 挂了 |
已修复 |
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## master #279 +/- ##
=======================================
Coverage 99.21% 99.21%
=======================================
Files 2 2
Lines 127 127
Branches 29 29
=======================================
Hits 126 126
Misses 1 1 ☔ View full report in Codecov by Sentry. |
| @@ -107,6 +107,7 @@ const InternalSegmentedOption: React.FC<{ | |||
| > | |||
| <input | |||
| className={`${prefixCls}-item-input`} | |||
| aria-hidden="true" | |||
There was a problem hiding this comment.
input 不是内部状态管理，而是专门用来做无障碍的。如果影响读屏器，应该是把其他的藏起来，而只保留 input 的读屏能力
Description
添加了
aria-hidden="true"属性到视觉隐藏的 radio input 元素上，以优化屏幕阅读器的体验。改动原因
该 radio input 元素仅用于组件内部状态管理，不需要被屏幕阅读器读取。添加
aria-hidden属性可以防止冗余的朗读信息，提升无障碍体验。相关改动
aria-hidden="true"属性参考文档
Summary by CodeRabbit
InternalSegmentedOption组件的<input>元素中添加了aria-hidden="true"属性，增强了可访问性，使辅助技术忽略该输入。