Skip to content

fix: make row expand controls accessible - #1509

Open
nrps9909 wants to merge 1 commit into
react-component:masterfrom
nrps9909:codex/accessible-row-expand-button
Open

fix: make row expand controls accessible#1509
nrps9909 wants to merge 1 commit into
react-component:masterfrom
nrps9909:codex/accessible-row-expand-button

Conversation

@nrps9909

@nrps9909 nrps9909 commented Aug 27, 2026

Copy link
Copy Markdown

Summary

  • render each expandable row control as a native button instead of a click-only span
  • expose the current state through aria-expanded and update the accessible name when the row opens or closes
  • add focused coverage for the button semantics and update the affected snapshots

Why

The default per-row expand control is currently a <span onClick>, so direct @rc-component/table consumers cannot reach or operate it from the keyboard, and assistive technology receives neither a button role nor the expanded state. The header-level “expand all” control already uses the native-button pattern; this makes row controls consistent with it. Non-expandable placeholder icons remain non-interactive spans.

On the exact base commit 7977f2b45a501728dddf0853466c1a013a7190dc, the new regression failed because Testing Library could not find any accessible button named “Expand row”. It passes after this change and verifies both collapsed and expanded states.

I searched the repository's open issues and open PR changed files before implementation and found no duplicate accessibility fix for src/utils/expandUtil.tsx.

Validation

  • npm test — 21 files, 237 tests
  • npm run tsc
  • npm run lint — 0 errors; 23 existing warnings
  • npx prettier --check src/utils/expandUtil.tsx tests/ExpandRow.spec.jsx tests/Table.spec.jsx
  • npm run compile — ESM, CJS, declarations, and Less
  • git diff --check

AI assistance disclosure: Codex was used to trace the default expand-control path, audit overlap, draft the regression test and implementation, and run the validation listed above. The behavior and results were verified locally against the cited exact base and PR head.

Summary by CodeRabbit

  • 新功能

    • 展开行控件现支持键盘访问,并提供明确的展开/收起状态及无障碍名称。
    • 展开控件改用按钮交互,点击后会正确更新状态。
  • 测试

    • 新增展开行无障碍交互测试,验证按钮类型、状态、名称及点击行为。
    • 更新相关测试,兼容新的展开控件元素。

@vercel

vercel Bot commented Aug 27, 2026

Copy link
Copy Markdown

@nrps9909 is attempting to deploy a commit to the afc163's projects Team on Vercel.

A member of the Team first needs to authorize it.

@coderabbitai

coderabbitai Bot commented Aug 27, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 6dd18a7c-7548-48a0-832e-19f2164867e5

📥 Commits

Reviewing files that changed from the base of the PR and between 7977f2b and fd3f911.

⛔ Files ignored due to path filters (1)
  • tests/__snapshots__/ExpandRow.spec.jsx.snap is excluded by !**/*.snap
📒 Files selected for processing (3)
  • src/utils/expandUtil.tsx
  • tests/ExpandRow.spec.jsx
  • tests/Table.spec.jsx

Included review availability: Your plan provides up to 4 included reviews per hour; 3 remain after this review.


Walkthrough

行展开图标从 span 改为带无障碍属性的 button。新增测试验证按钮类型、可访问名称和 aria-expanded 状态。相关测试选择器不再限制元素标签。

Changes

行展开控件无障碍支持

Layer / File(s) Summary
实现并验证无障碍展开控件
src/utils/expandUtil.tsx, tests/ExpandRow.spec.jsx, tests/Table.spec.jsx
DefaultExpandIcon 的行类型分支改用 button,并设置 typearia-expandedaria-label。测试验证点击前后的按钮状态。展开图标选择器不再限制为 span

Estimated code review effort: 1 (Trivial) | ~5 minutes

Merge Risk: ⚪ Minimal · up to fd3f9

This PR makes expandable row controls keyboard-accessible and exposes their open or closed state without changing row-expansion behavior. No actionable merge-blocking risk remains after normal checks and review.

Suggested reviewers: zombiej, nikzanda

Poem

小兔敲键盘,按钮亮晶晶
展开变收起,状态写分明
Enter 轻轻按,行列应声醒
aria 跟着变,访问更顺行
月光下提交,测试也欢鸣

🚥 Pre-merge checks | ✅ 4 | ❌ 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%. Docstring coverage is scoped to functions touched by this diff. Analyzed 2 functions across 3 files. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed 标题“fix: make row expand controls accessible”准确概括了将行展开控件改为可访问控件这一主要变更。
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
  • Fix all pre-merge checks with AI
✨ Finishing Touches 💡 1
🛠️ Fix failing CI checks 💡
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Warning

Some tools did not complete. Review the errors below.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint install failed: private package registry requires authentication. Disable ESLint in CodeRabbit settings or use public packages.


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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant