feat: improved accessibility #299
Conversation
|
Warning Rate limit exceeded@aojunhao123 has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 24 minutes and 26 seconds before requesting another review. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. 📒 Files selected for processing (1)
概述演练此拉取请求修改了 变更
可能相关的 PR
诗歌
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 (
|
![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/index.tsx (1)
150-151: ARIA属性修改正确，建议进一步改进！将
aria-selected替换为role="radio"和aria-checked是正确的改进，符合WAI-ARIA规范。这些更改使得组件的语义更准确，提高了可访问性。建议考虑添加以下改进：
- 添加
aria-labelledby属性关联标签文本- 考虑添加
aria-describedby属性提供额外描述<div className={classNames( `${prefixCls}-item-label`, segmentedClassNames?.label, )} title={title} role="radio" aria-checked={checked} + aria-labelledby={`${prefixCls}-label-${value}`} style={styles?.label} > + <span id={`${prefixCls}-label-${value}`}> {label} + </span> </div>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
tests/__snapshots__/index.test.tsx.snapis excluded by!**/*.snap
📒 Files selected for processing (1)
src/index.tsx(1 hunks)
|
New, updated, and removed dependencies detected. Learn more about Socket for GitHub ↗︎
🚮 Removed packages: npm/np@7.7.0 |
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## master #299 +/- ##
=======================================
Coverage 99.37% 99.37%
=======================================
Files 2 2
Lines 161 161
Branches 40 40
=======================================
Hits 160 160
Misses 1 1 ☔ View full report in Codecov by Sentry. |
|
@afc163 佬，这个pr能带到v5吗？我看segmented里的部分依赖已经迁移到@rc-component里了 |
* feat: add role attribute to InternalSegmentedOption for improved accessibility * fix: update role and aria attributes * test: update snapshot * chore: add @rc-component/np dependency and remove np package
* feat: improved accessibility (#299) * feat: add role attribute to InternalSegmentedOption for improved accessibility * fix: update role and aria attributes * test: update snapshot * chore: add @rc-component/np dependency and remove np package * chore: add np package for release management
div不能设置aria-selected属性，而且segmented本质上还是个Radio，应该使用aria-checked
Summary by CodeRabbit
div元素的角色从通用选择指示器调整为更具语义的单选按钮角色。role="radio"和aria-checked属性，以提高组件的可访问性和屏幕阅读器兼容性。