fix: should generate standard id via useId by aojunhao123 · Pull Request #1003 · react-component/tree

aojunhao123 · 2026-01-23T05:49:34Z

Summary by CodeRabbit

发布说明

新功能
- 为树形组件引入可生成稳定唯一节点标识的机制，提升无障碍属性映射和键盘导航一致性。
- 节点现在可以接收来自上层的树标识以避免跨实例冲突。
重构
- 改进节点 DOM id 生成，增强多个树组件共存时的隔离性。
测试
- 无障碍相关测试改为通过引用的目标元素角色验证，覆盖聚焦与键盘导航场景。

_{✏️ Tip: You can customize this high-level summary in your review settings.}

- Add getTreeNodeId function to generate unique tree node IDs - Use useId() hook to generate unique tree ID - Fix aria-activedescendant to use the same ID format as TreeNode - Pass treeId prop through MotionTreeNode to TreeNode

vercel · 2026-01-23T05:49:39Z

@aojunhao123 is attempting to deploy a commit to the React Component Team on Vercel.

A member of the Team first needs to authorize it.

gemini-code-assist · 2026-01-23T05:49:51Z

Summary of Changes

Hello @aojunhao123, I'm Gemini Code Assist¹! 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 significantly enhances the accessibility of the tree component by ensuring a robust and consistent mechanism for identifying individual tree nodes. It introduces unique identifiers for tree instances and their nodes, which are then correctly utilized by ARIA attributes like aria-activedescendant. This change improves the component's compatibility with assistive technologies and overall semantic correctness.

Highlights

Unique Tree Identification: Introduced a unique treeId for each NodeList component instance using the @rc-component/util/lib/hooks/useId hook. This ensures that multiple tree components on the same page will have distinct identifiers.
Consistent Node ID Generation: Implemented a new utility function getTreeNodeId that generates a consistent and unique ID for each tree node by combining the treeId and the node's key. This function is now used across the tree component for ID generation.
Accessibility Fix for aria-activedescendant: The aria-activedescendant attribute on the main tree container (NodeList) now correctly references the id of the active TreeNode using the newly generated unique node IDs. This resolves a potential accessibility issue where the aria-activedescendant might not have matched the id of the active element.
TreeNode ID Update: The TreeNode component's id attribute for its role="treeitem" div is now set using the getTreeNodeId function, ensuring that each tree node has a globally unique and consistently formatted ID.

🧠 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 Assist

The 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 /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	`/gemini review`	Performs a code review for the current pull request in its current state.
Pull Request Summary	`/gemini summary`	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	`/gemini help`	Displays a list of available commands.

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 .gemini/ folder in the base of the repository. Detailed instructions can be found here.

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.

Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

coderabbitai · 2026-01-23T05:49:56Z

Note

Other AI code review bot(s) detected

CodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review.

Walkthrough

在 NodeList 中引入 useId 生成局部 treeId，并新增 getTreeNodeId 工具以生成复合节点 id；将 treeId 通过 props 传入 TreeNode/MotionTreeNode 并将 aria-activedescendant 改为引用复合 id；相应测试改为通过该 id 验证目标元素 role。

Changes

Cohort / File(s)	变更摘要
ID 生成与 NodeList 变更 `src/NodeList.tsx`, `src/utils/treeUtil.ts`	在 NodeList 中引入 `useId()` 生成 `treeId`，导入并使用 `getTreeNodeId(treeId, key)` 生成复合 id，更新 `aria-activedescendant`，并将 `treeId` 通过 props 传递给子节点；新增 `getTreeNodeId` 导出函数。
TreeNode 公共 props 与 DOM id `src/TreeNode.tsx`, `src/interface.tsx`	为 TreeNode 增加可选公共 prop `treeId?: string`，在 TreeNode 内使用 `getTreeNodeId(treeId, eventKey)` 计算并设置 DOM `id`（拖拽等内部逻辑仍基于 `eventKey`）。
无障碍测试调整 `tests/Accessibility.spec.tsx`	测试中不再断言具体 id 值；改为读取 `aria-activedescendant` 所指 id，并验证 `document.getElementById(activeId)` 的 `role="treeitem"`，覆盖若干聚焦与键盘导航场景。

Sequence Diagram(s)

（此变更为较小的可访问性/ID 生成调整，控制流无复杂多组件序列，故省略序列图。）

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

refactor: rewrite TreeNode CC => FC #905: 与本次对 TreeNode 及其 props 的修改在代码层面高度相关（均修改 TreeNode/TreeNodeProps）。
refactor: better a11y #1001: 涉及 NodeList/TreeNode 的 id 与 aria-activedescendant 处理，功能关注点与本 PR 重叠。

Suggested reviewers

afc163
zombieJ

诗歌

🐰 新树名纵横连，
id 合成绕枝繁，
useId 轻捻成唯一，
无障碍路细又安，
小兔跳跃笑吟间 🥕✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	PR标题"fix: should generate standard id via useId"准确反映了变更的核心内容——通过useId生成标准ID来解决aria-activedescendant匹配问题。

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment

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.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

gemini-code-assist

Code Review

This pull request correctly fixes an accessibility issue where aria-activedescendant did not match the TreeNode's id. By introducing a treeId using the useId hook and a getTreeNodeId helper function, it ensures unique and matching IDs are generated for the tree and its nodes. The implementation is sound and improves accessibility.

I have one major point of feedback regarding a circular dependency introduced by the placement of the new helper function. Please see my detailed comment on how to resolve this to prevent potential runtime issues.

coderabbitai

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@src/TreeNode.tsx`:
- Line 7: TreeNode.tsx 引入的 getTreeNodeId 导致循环依赖（TreeNode → NodeList →
MotionTreeNode → TreeNode）；将 getTreeNodeId 从 NodeList.tsx 提取到新的工具模块（例如
utils/treeUtil.ts），并在 NodeList.tsx、TreeNode.tsx 中改为从该工具模块导入。确保导出的函数名保持
getTreeNodeId，更新所有对 getTreeNodeId 的导入路径，并运行构建/测试以验证循环依赖已消失。

🧹 Nitpick comments (1)

src/TreeNode.tsx (1)
409-410: 考虑 treeId 未定义的边界情况

当 TreeNode 在 NodeList 外部独立使用时，treeId 可能为 undefined，导致生成的 nodeId 为 "undefined-${eventKey}"，这不是有效的 ID 格式。

建议添加防御性处理：
♻️ 建议修改
- const nodeId = getTreeNodeId(treeId, eventKey);
+ const nodeId = treeId ? getTreeNodeId(treeId, eventKey) : undefined;

codecov · 2026-01-23T06:04:30Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 99.84%. Comparing base (c766a03) to head (720ea22).
⚠️ Report is 1 commits behind head on master.

Additional details and impacted files

@@           Coverage Diff           @@
##           master    #1003   +/-   ##
=======================================
  Coverage   99.84%   99.84%           
=======================================
  Files          14       14           
  Lines        1291     1295    +4     
  Branches      396      396           
=======================================
+ Hits         1289     1293    +4     
  Misses          2        2

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

aojunhao123 · 2026-01-23T06:16:54Z

    ...domProps
  } = props;

+  const treeId = useId();


useId在虚拟滚动情况下生成结果不稳定。直接在外层生成一个稳定 id 跟 key 拼接一下

fix: ensure aria-activedescendant matches TreeNode id

b45fccb

- Add getTreeNodeId function to generate unique tree node IDs - Use useId() hook to generate unique tree ID - Fix aria-activedescendant to use the same ID format as TreeNode - Pass treeId prop through MotionTreeNode to TreeNode

gemini-code-assist Bot reviewed Jan 23, 2026

View reviewed changes

Comment thread src/NodeList.tsx Outdated

coderabbitai Bot reviewed Jan 23, 2026

View reviewed changes

Comment thread src/TreeNode.tsx Outdated

fix test

720ea22

aojunhao123 commented Jan 23, 2026

View reviewed changes

aojunhao123 changed the title ~~fix: ensure aria-activedescendant matches TreeNode id~~ fix: should generate standard id via useId Jan 23, 2026

aojunhao123 mentioned this pull request Jan 23, 2026

refactor: better a11y #1001

Merged

zombieJ approved these changes Jan 26, 2026

View reviewed changes

zombieJ merged commit 32c986e into react-component:master Jan 26, 2026
7 of 8 checks passed

coderabbitai Bot mentioned this pull request Jan 26, 2026

fix: add aria-labelledby to checkbox for better a11y #1004

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: should generate standard id via useId#1003

fix: should generate standard id via useId#1003
zombieJ merged 2 commits into
react-component:masterfrom
aojunhao123:fix/aria-activedescendant-id

aojunhao123 commented Jan 23, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

vercel Bot commented Jan 23, 2026

Uh oh!

gemini-code-assist Bot commented Jan 23, 2026

Uh oh!

coderabbitai Bot commented Jan 23, 2026 •

edited

Loading

Other AI code review bot(s) detected

Uh oh!

gemini-code-assist Bot left a comment

Uh oh!

Uh oh!

coderabbitai Bot left a comment

Uh oh!

Uh oh!

codecov Bot commented Jan 23, 2026 •

edited

Loading

Uh oh!

aojunhao123 Jan 23, 2026 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

aojunhao123 commented Jan 23, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

发布说明

Uh oh!

vercel Bot commented Jan 23, 2026

Uh oh!

gemini-code-assist Bot commented Jan 23, 2026

Summary of Changes

Highlights

Footnotes

Uh oh!

coderabbitai Bot commented Jan 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Other AI code review bot(s) detected

Walkthrough

Changes

Sequence Diagram(s)

Estimated code review effort

Possibly related PRs

Suggested reviewers

诗歌

Uh oh!

gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

codecov Bot commented Jan 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

aojunhao123 Jan 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

aojunhao123 commented Jan 23, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Jan 23, 2026 •

edited

Loading

codecov Bot commented Jan 23, 2026 •

edited

Loading

aojunhao123 Jan 23, 2026 •

edited

Loading