feat: improve a11y #888
feat: improve a11y #888
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
Important Review skippedReview was skipped due to path filters ⛔ Files ignored due to path filters (2)
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
Assessment against linked issues
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 (
|
|
@afc163 大佬有空的时候帮忙看一下 |
![coderabbitai[bot]](https://app.smartcontext.ai/default/https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Outside diff range and nitpick comments (2)
src/NodeList.tsx (1)
Line range hint
1-385: 建议进一步增强组件的无障碍性能为了更好地支持辅助技术，建议考虑以下改进：
动画过渡的无障碍性：
- 考虑添加
aria-busy属性在动画过程中- 确保动画不会影响屏幕阅读器的导航
树形结构的语义化：
- 为整个树添加
role="tree"属性- 确保每个节点都有正确的
aria-level和aria-setsize属性文档完善：
- 添加无障碍性相关的使用说明
- 说明键盘导航的方式
建议添加以下属性到 VirtualList 组件：
<VirtualList<FlattenNode> {...domProps} data={mergedData} itemKey={itemKey} height={height} fullHeight={false} virtual={virtual} itemHeight={itemHeight} prefixCls={`${prefixCls}-list`} + role="tree" + aria-label="树形选择器" ref={listRef}src/TreeNode.tsx (1)
377-379: 复选框无障碍功能改进符合规范复选框的ARIA属性实现符合标准，但建议考虑以下增强：
- 添加
aria-label或aria-labelledby以提供更明确的标签- 考虑添加键盘事件处理（Space键）以增强可访问性
<span className={classNames( `${prefixCls}-checkbox`, checked && `${prefixCls}-checkbox-checked`, !checked && halfChecked && `${prefixCls}-checkbox-indeterminate`, (disabled || disableCheckbox) && `${prefixCls}-checkbox-disabled`, )} onClick={this.onCheck} role="checkbox" aria-checked={halfChecked ? 'mixed' : checked} aria-disabled={disabled || disableCheckbox} + aria-label={`${title || ''} 复选框`} + onKeyDown={this.onCheckboxKeyDown} + tabIndex={disabled ? -1 : 0} >
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
⛔ Files ignored due to path filters (3)
tests/__snapshots__/Tree.spec.tsx.snapis excluded by!**/*.snaptests/__snapshots__/TreeNodeProps.spec.tsx.snapis excluded by!**/*.snaptests/__snapshots__/TreeProps.spec.tsx.snapis excluded by!**/*.snap
📒 Files selected for processing (3)
.gitignore(1 hunks)src/NodeList.tsx(2 hunks)src/TreeNode.tsx(2 hunks)
✅ Files skipped from review due to trivial changes (1)
- .gitignore
🔇 Additional comments (2)
src/NodeList.tsx (1)
Line range hint 287-296: 无障碍性改进符合预期！
对输入框的改动很好地提升了无障碍性：
- 添加
aria-hidden到包装 div 可以防止屏幕阅读器读取这个区域 - 添加
role="presentation"明确表示这个输入框仅用于键盘导航 - 移除了
aria-label避免了冗余的朗读
这些改动与 PR 的目标完全一致，可以改善使用屏幕阅读器时的体验。
src/TreeNode.tsx (1)
377-379: 验证无障碍改进的实际效果
为确保这些改动能够解决 #51517 中提到的问题，建议进行以下验证：
- 使用 VoiceOver 和 NVDA 测试树节点的可访问性
- 验证复选框状态是否正确朗读
- 确认键盘导航是否正常工作
Also applies to: 551-551
✅ Verification successful
无障碍改进已正确实现且经过充分测试
代码分析显示：
- 树组件已正确实现 ARIA 角色（role="tree"、role="treeitem"）
- 复选框状态通过 aria-checked 属性正确传递给屏幕阅读器
- 测试用例覆盖了无障碍相关功能，包括：
- 复选框状态的切换
- 键盘导航
- 禁用状态的处理
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查是否有其他需要类似无障碍改进的组件
# 搜索其他可能需要添加 role="treeitem" 的组件
rg -l "className.*treenode" --type tsx
# 搜索其他可能需要添加 ARIA 属性的复选框实现
ast-grep --pattern 'className={classNames($$$, "checkbox"$$$)}'
Length of output: 134
Script:
#!/bin/bash
# 搜索包含 treenode 相关类名的文件
rg -l "treenode" --type ts --type tsx --type jsx
# 搜索包含 checkbox 相关实现的文件
rg -l "checkbox" --type ts --type tsx --type jsx
# 查找其他使用 aria-checked 属性的组件
rg "aria-checked" --type ts --type tsx --type jsx -A 2 -B 2
# 检查相关的无障碍测试文件
fd -e test.tsx -e test.ts -e spec.tsx -e spec.ts | xargs rg "accessibility|aria|screen reader"
Length of output: 1356
Script:
#!/bin/bash
# 使用通用文件搜索，不指定文件类型
rg -l "treenode"
# 搜索树组件中的无障碍相关实现
rg "role=\"(treeitem|tree|group)\"" -A 2 -B 2
# 查找复选框状态相关的测试用例
rg "checkbox.*checked|checked.*checkbox" tests/
# 检查键盘导航相关的测试
rg "keyboard|keydown|keyup" tests/
Length of output: 54452
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (1)
src/TreeNode.tsx (1)
539-541: 建议优化节点位置计算的性能当前使用
findIndex计算位置可能在大型树结构中造成性能问题。建议考虑以下优化方案：-const posInSet = siblings.findIndex(node => node.key === eventKey); +const posInSet = siblings.findIndex(node => node.key === eventKey) + 1;考虑在父节点中缓存子节点的位置信息，避免重复计算。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
⛔ Files ignored due to path filters (3)
tests/__snapshots__/Tree.spec.tsx.snapis excluded by!**/*.snaptests/__snapshots__/TreeNodeProps.spec.tsx.snapis excluded by!**/*.snaptests/__snapshots__/TreeProps.spec.tsx.snapis excluded by!**/*.snap
📒 Files selected for processing (1)
src/TreeNode.tsx(3 hunks)
🔇 Additional comments (2)
src/TreeNode.tsx (2)
377-379: 复选框无障碍属性设置正确！
复选框的ARIA属性设置完整且准确：
role="checkbox"明确了元素的语义aria-checked正确处理了半选状态aria-disabled适当反映了禁用状态
553-557: 树节点无障碍属性设置完善！
树节点的ARIA属性设置符合WAI-ARIA规范，建议验证在以下场景下的行为：
- 使用VoiceOver和NVDA测试节点层级朗读
- 验证展开/折叠状态的朗读
- 检查节点位置信息的准确性
✅ Verification successful
Let me run one more verification to check the implementation of aria-posinset and aria-setsize:
树节点的ARIA属性实现正确且完整！
代码分析显示：
- 所有树节点都包含必要的ARIA属性（role、aria-level、aria-expanded、aria-setsize、aria-posinset）
- 层级（aria-level）计算正确，测试快照显示从0到2级的正确嵌套
- 位置信息计算逻辑合理：
- aria-setsize使用siblings.length计算同级节点数
- aria-posinset通过findIndex正确计算当前节点位置
无障碍实现符合WAI-ARIA规范要求，无需进一步修改。
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查是否所有树节点都正确设置了必要的ARIA属性
# 搜索所有可能缺少必要ARIA属性的树节点
rg -l 'role="treeitem"' | xargs rg -L 'aria-level' || echo "所有树节点都包含必要的ARIA属性"
# 检查是否存在可能的ARIA属性值计算错误
ast-grep --pattern 'aria-posinset={$_}'
Length of output: 7339
Script:
#!/bin/bash
# 检查树节点的位置信息计算
rg -A 5 'aria-posinset' src/
rg -A 5 'aria-setsize' src/
# 检查相关的计算逻辑
ast-grep --pattern 'const posInSet = $_'
ast-grep --pattern 'const siblings = $_'
Length of output: 1229
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## master #888 +/- ##
=======================================
Coverage 99.84% 99.84%
=======================================
Files 14 14
Lines 1317 1321 +4
Branches 380 384 +4
=======================================
+ Hits 1315 1319 +4
Misses 2 2 ☔ View full report in Codecov by Sentry. 🚨 Try these New Features:
|
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (2)
src/TreeNode.tsx (2)
377-379: 复选框无障碍属性实现正确！复选框的ARIA属性实现符合规范，正确处理了混合状态（mixed）和禁用状态。
建议添加
aria-label属性来提供更好的语义描述：<span className={classNames( `${prefixCls}-checkbox`, checked && `${prefixCls}-checkbox-checked`, !checked && halfChecked && `${prefixCls}-checkbox-indeterminate`, (disabled || disableCheckbox) && `${prefixCls}-checkbox-disabled`, )} onClick={this.onCheck} role="checkbox" aria-checked={halfChecked ? 'mixed' : checked} aria-disabled={disabled || disableCheckbox} + aria-label={`选择${title || ''}`} >
551-552: 树节点基础无障碍属性已添加，建议补充更多ARIA属性！已添加的
role="treeitem"和aria-expanded是个好的开始，但建议继续完善以下ARIA属性以提供更完整的无障碍体验：建议添加以下属性：
<div ref={domRef} role="treeitem" aria-expanded={isLeaf ? undefined : expanded} + aria-level={level} + aria-setsize={isEnd.length} + aria-posinset={isEnd.length - (isEndNode ? 0 : 1)} + aria-selected={selected} className={classNames(className, `${prefixCls}-treenode`, {属性说明：
aria-level: 表示节点的层级深度aria-setsize: 表示同级节点的总数aria-posinset: 表示在同级节点中的位置aria-selected: 表示节点的选中状态
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
⛔ Files ignored due to path filters (3)
tests/__snapshots__/Tree.spec.tsx.snapis excluded by!**/*.snaptests/__snapshots__/TreeNodeProps.spec.tsx.snapis excluded by!**/*.snaptests/__snapshots__/TreeProps.spec.tsx.snapis excluded by!**/*.snap
📒 Files selected for processing (1)
src/TreeNode.tsx(2 hunks)
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
⛔ Files ignored due to path filters (3)
tests/__snapshots__/Tree.spec.tsx.snapis excluded by!**/*.snaptests/__snapshots__/TreeNodeProps.spec.tsx.snapis excluded by!**/*.snaptests/__snapshots__/TreeProps.spec.tsx.snapis excluded by!**/*.snap
📒 Files selected for processing (3)
src/NodeList.tsx(1 hunks)src/Tree.tsx(0 hunks)src/TreeNode.tsx(2 hunks)
💤 Files with no reviewable changes (1)
- src/Tree.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
- src/NodeList.tsx
🔇 Additional comments (1)
src/TreeNode.tsx (1)
377-379: 复选框无障碍属性设置正确！
复选框的无障碍属性设置完整且准确：
- 使用
role="checkbox"明确表示这是一个复选框 - 使用
aria-checked正确处理了半选状态 - 使用
aria-disabled正确传达了禁用状态
treeCheckable={true}时，只需要让screen reader能够读取到CheckBox即可role="treeitem"Summary by CodeRabbit
NodeList和TreeNode组件的可访问性，增强了对辅助技术的支持。NodeList组件的运动效果处理逻辑，确保状态更新正确。Tree组件中添加了role="tree"属性，进一步提升了可访问性。.gitignore文件，添加了对.vscode目录的忽略。