feat(a11y): add screen reader support for Tooltip #490
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
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
tests/index.test.tsxOops! Something went wrong! :( ESLint: 8.57.1 Error: Cannot read config file: /.eslintrc.js
概述演练此次更改主要关注改进 Tooltip 组件的无障碍性能。通过添加 变更
对链接问题的评估
诗歌
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
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: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
jest.config.js(1 hunks)package.json(2 hunks)src/Popup.tsx(1 hunks)src/Tooltip.tsx(5 hunks)tests/popup.test.tsx(1 hunks)tests/setup.js(1 hunks)
✅ Files skipped from review due to trivial changes (2)
- jest.config.js
- tests/setup.js
🔇 Additional comments (21)
src/Popup.tsx (3)
38-38: 使用辅助函数统一提取文本内容的思路良好。
tooltipText会根据children中的多种类型提取并拼接文本，为屏幕阅读器提供完整的辅助文本，逻辑清晰。
41-48: 分层结构可读性高，便于定制。这里将包裹内容独立于外层
<div>与内部<div>，为后续样式或行为调整提供了较好的扩展空间。
50-59: 通过视觉隐藏方式呈现文本，兼顾辅助技术需求。采用
role="tooltip"并使用绝对定位且opacity: 0来隐藏元素，符合常见的可访问性模式，使屏幕阅读器能够识别并朗读对应文本。tests/popup.test.tsx (7)
1-3: 测试环境配置完整，引入的库满足组件测试需求。导入
@testing-library/react和自定义的Popup模块后，即可方便地对组件进行渲染和断言操作。
10-12: 对 Tooltip 导出的基础测试用例简洁易读。该用例验证组件是否可成功导出，测试覆盖面基础但必要。
30-47: 测试隐藏样式的断言准确，确保可访问性样式不被破坏。通过
toHaveStyle断言检查隐形容器的样式配置是否符合预期，能够及早发现样式回归问题。
49-58: 空内容场景测试覆盖周全。验证
null或undefined情况时，不渲染 tooltip 内容，能避免空引用导致的潜在错误。
60-75: 嵌套数组文本拼接的逻辑测试全面。测试通过多层数组结构以验证文本是否正确拼接，可防止意外的空格或缺失。
77-88: 函数返回数组场景测试，增强鲁棒性。确保函数节点同样能返回数组并正确生成文本，加深对多类型子元素的支持。
90-99: 对函数返回undefined情况的测试可避免意外报错。若函数式子元素不产生实际内容，可使 tooltip 安静地退出以免出现浏览器渲染问题。
src/Tooltip.tsx (8)
4-4: 引入classNames便于动态切换样式。通过
classnames库可简化条件渲染类名的逻辑，增加可读性与维护性。
6-6: 使用解构方式导入 React 钩子，让组件结构更清晰。这种写法可快速辨别用到哪些原生 Hooks，便于后续维护。
9-9: 通过rc-util/lib/hooks/useId生成唯一 ID，提升组件可访问性。它能在
id未指定时自动提供唯一标识，避免多个 Tooltip 重复 ID 引发的可访问性冲突。
64-64: 空接口扩展保留，方便后续增加新属性。在
TooltipRef中保持扩展空间，可随时补充其他方法或字段。
67-67:useId提供默认值的方式可简化配置流程。若用户不显式传入
id，也可保证生成可访问性所需的关联属性。
90-90: 在解构参数时优先保留默认值，有助于避免空值带来的逻辑错误。
id = defaultId让组件在使用时更具语义化和安全性。
117-126:getChildren函数封装增强重复逻辑复用性。通过克隆子元素并追加
aria-describedby属性，可减少在其他地方重复编写相同行为的可能性。
152-152: 通过调用getChildren()注入可访问性属性，API 设计干净简洁。清晰地在源码中表明
children的二次处理逻辑，易于维护和扩展。package.json (3)
46-47: 新增依赖优化现有功能及提升兼容性。
"classnames"已广泛使用；"rc-util"提供必要的工具函数，为项目整合更多通用能力。
51-53: 新增测试库依赖丰富测试场景，增强可测试性。引入
@testing-library/jest-dom及@testing-library/user-event，可实现更全面的交互式测试，对可访问性及动态交互的测试覆盖度更高。
75-75: 配置文件结构完整，更新后仍确保兼容性。保留原有字段与脚本的同时，新增依赖无缝对接。
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## master #490 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 3 3
Lines 26 33 +7
Branches 10 12 +2
=========================================
+ Hits 26 33 +7 ☔ View full report in Codecov by Sentry. |
添加读屏器支持
后续pr将对trigger做调整，目前trigger的focus action未区分鼠标focus和键盘focus
Summary by CodeRabbit
依赖项更新
package.json中添加了rc-util依赖项（版本 ^5.44.3）新功能
测试
aria-describedby属性的正确性