-
Notifications
You must be signed in to change notification settings - Fork 28
fix: remove duplicate radio role and optimize aria attributes #317
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
fix: remove duplicate radio role and optimize aria attributes #317
Conversation
概览此 PR 包含配置更新、依赖升级和可访问性属性调整。在 变更
估计代码审查工作量🎯 2 (简单) | ⏱️ ~10 分钟
相关 PR
建议审查人
诗歌
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Summary of ChangesHello @aojunhao123, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request focuses on refining the accessibility of the segmented control component by optimizing its ARIA attributes. It addresses a potential redundancy in ARIA roles and states on individual segmented items and enhances the overall accessibility by explicitly defining the orientation of the segmented control group. Additionally, it includes minor updates to development dependencies and configuration files to support these changes and improve the development environment. Highlights
🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console. Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
|
Review the following changes in direct dependencies. Learn more about Socket for GitHub.
|
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #317 +/- ##
=======================================
Coverage 99.39% 99.39%
=======================================
Files 2 2
Lines 164 165 +1
Branches 39 41 +2
=======================================
+ Hits 163 164 +1
Misses 1 1 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Code Review
This pull request introduces several valuable improvements. The core changes enhance the accessibility of the Segmented component by removing a redundant role="radio" attribute and adding the aria-orientation attribute to the radiogroup. These changes align the component with WAI-ARIA best practices, providing a better experience for users of assistive technologies. Additionally, the PR includes dependency updates, configuration file corrections, and snapshot updates, all of which contribute to the overall health and maintainability of the codebase. The changes are correct and well-implemented.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 1
📜 Review details
Configuration used: Organization 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 (4)
.dumirc.ts(1 hunks)package.json(1 hunks)src/index.tsx(1 hunks)tsconfig.json(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: preview
🔇 Additional comments (4)
tsconfig.json (2)
15-15: 代码变更看起来不错!将
@testing-library/jest-dom添加到 types 数组与 package.json 中的版本升级保持一致,这确保 TypeScript 能够识别 jest-dom 提供的自定义匹配器。
22-22: docs/demo 目录已正确迁移验证确认
docs/demo目录存在且包含完整的演示文件(basic、controlled、custom-render、dynamic、html-title、name、refs、rtl),原有的docs/examples目录已被移除。tsconfig.json 中的 include 路径更新与实际目录结构一致。src/index.tsx (1)
309-309: 优秀的无障碍改进!在 radiogroup 容器上添加
aria-orientation属性是正确的,它能向辅助技术明确传达控件的方向(水平或垂直)。结合 AI 摘要中提到的更改(从 label 元素移除重复的
role="radio"和aria-checked属性),这些改进符合 ARIA 最佳实践:
- 避免角色重复:label 包裹的
input[type="radio"]已经具有隐式的 radio 角色- 正确的属性位置:
aria-checked应该在 input 元素上,而不是 label 上- 语义化容器属性:radiogroup 正确声明了其方向
这些更改提升了组件对屏幕阅读器等辅助技术的支持。
.dumirc.ts (1)
2-2: 代码变更看起来不错!添加 path 模块导入和 alias 配置是正确的。alias 映射使得文档和演示能够直接引用本地源代码
src/index.tsx,这是 Dumi 组件库的常见开发模式,有助于在文档中测试实际源代码。Also applies to: 17-19
| "@rc-component/father-plugin": "^2.0.1", | ||
| "@rc-component/np": "^1.0.0", | ||
| "@testing-library/jest-dom": "^5.16.5", | ||
| "@testing-library/jest-dom": "^6.9.1", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
更新导入路径和测试设置配置以适配 v6 的破坏性变更
从 v5.16.5 升级到 v6.9.1 涉及多项破坏性变更需要处理:
- v6.0.0 移除了 extend-expect 脚本,不能再直接在 setupFilesAfterEnv 中引用包名
- TypeScript 类型定义加载机制已更改,需要创建独立的设置文件或使用明确的导入路径(如
@testing-library/jest-dom/jest、@testing-library/jest-dom/jest-globals或@testing-library/jest-dom/vitest) - 需要验证项目的 Jest 配置和测试设置文件是否已相应调整
🤖 Prompt for AI Agents
In package.json around line 57, the dependency was updated to
"@testing-library/jest-dom": "^6.9.1" but v6 introduced breaking changes: remove
direct package name in setupFilesAfterEnv and adjust TypeScript/type loading.
Fix by creating/using an explicit test setup file (e.g., tests/setupTests.ts or
jest.setup.ts) that imports the correct v6 entry (one of
@testing-library/jest-dom/jest, @testing-library/jest-dom/jest-globals, or
@testing-library/jest-dom/vitest depending on test runner), update package.json
Jest configuration to reference that setup file in setupFilesAfterEnv (not the
package name), and ensure TypeScript config includes the setup file types or add
the appropriate types import so type definitions load correctly.
|
@afc163 佬,这个需要cheery-pick到v5吗 |
|
可以 |
Summary by CodeRabbit
发布说明
改进
依赖更新
✏️ Tip: You can customize this high-level summary in your review settings.