Skip to content

fix: make hidden overflow items inert - #70

Open
nrps9909 wants to merge 1 commit into
react-component:masterfrom
nrps9909:codex/hidden-items-inert
Open

fix: make hidden overflow items inert#70
nrps9909 wants to merge 1 commit into
react-component:masterfrom
nrps9909:codex/hidden-items-inert

Conversation

@nrps9909

@nrps9909 nrps9909 commented Aug 26, 2026

Copy link
Copy Markdown

Summary

  • mark responsive overflow items as inert while they are visually hidden
  • keep aria-hidden for the accessibility-tree contract
  • cover both hidden and visible items, including SSR output

The existing styles and aria-hidden remove hidden items visually and from the accessibility tree, but aria-hidden does not remove focusable descendants from sequential keyboard navigation. inert closes that gap without changing visible-item or overflow-menu behavior.

The value is serialized conditionally because this package supports React 16.9+: React 16–18 require the unknown attribute to be passed as a string, while React 19 treats inert as a boolean property.

Closes #43.

Verification

  • Exact-base regression: 35 passed, 1 failed because the hidden item had no inert attribute
  • Fixed full suite: 7 suites, 36 tests, 7 snapshots passed
  • npm run tsc
  • npm run lint — 0 errors, 4 pre-existing Hook dependency warnings
  • npm run compile — ESM, CJS, and declarations passed
  • focused Prettier check and git diff --check
  • independent SSR compatibility probes:
    • React 16.14: <div inert="">…</div> with no warning
    • React 18.3: string form renders inert; boolean form warns and is omitted
    • React 19.2: boolean form renders inert="" and the repository suite passes without warnings

No current open PR addresses hidden-item focusability or adds inert.

AI assistance disclosure: Codex was used to trace the hidden-item DOM contract, audit open-PR overlap, add the regression, and verify React-version serialization. The exact-base failure, compatibility probes, and final diff were reviewed locally.

Summary by CodeRabbit

  • Bug Fixes
    • 修复响应式布局中溢出项目的可访问性标记问题。
    • 隐藏的溢出项目现在会正确设置 aria-hiddeninert,避免被辅助技术或键盘导航访问。
    • 兼容不同 React 版本,确保相关属性能够正确呈现。
@vercel

vercel Bot commented Aug 26, 2026

Copy link
Copy Markdown

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

A member of the Team first needs to authorize it.

@coderabbitai

coderabbitai Bot commented Aug 26, 2026

Copy link
Copy Markdown

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: a74b8357-d68a-4825-93bd-167f27ded8d7

📥 Commits

Reviewing files that changed from the base of the PR and between 7abb1af and e7fbca0.

⛔ Files ignored due to path filters (1)
  • tests/__snapshots__/ssr.spec.tsx.snap is excluded by !**/*.snap
📒 Files selected for processing (2)
  • src/Item.tsx
  • tests/responsive.spec.tsx

Included review availability: Your plan provides up to 1 included review per hour; 0 remain after this review.


Walkthrough

隐藏的响应式溢出项现在设置 inert。实现兼容 React 19 及更早版本。测试验证隐藏项带有 inert,可见项不带有该属性。

Changes

隐藏项可访问性

Layer / File(s) Summary
溢出项 inert 属性处理
src/Item.tsx, tests/responsive.spec.tsx
InternalItem 根据 React 主版本设置隐藏项的 inert 值。响应式测试验证最后一个溢出项带有 inert,第一个可见项不带有 inert

Estimated code review effort: 2 (简单) | ~10 分钟

Merge Risk: ⚪ Minimal · up to e7fbc

This localized change makes visually hidden responsive items inert while preserving visible-item and overflow-menu behavior; no actionable merge-blocking risk remains after normal checks and review.

Suggested reviewers: qdyanbing

Poem

兔子敲键盘,藏起溢出行
inert 轻轻落,键路不再停
React 新旧版本,都有对应形
可见项自由走,隐藏项安静听
测试点点头,代码月光明

🚥 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 1 functions across 2 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 标题准确概括了主要变更:为隐藏的溢出项添加 inert 属性。
Linked Issues check ✅ Passed PR 为 mergedHidden 项设置 inert,并保留 aria-hidden。测试覆盖隐藏项和可见项。该实现满足 Issue #43 关于阻止隐藏元素参与键盘导航的要求。
Out of Scope Changes check ✅ Passed 变更仅涉及隐藏溢出项的 inert 处理及对应回归测试。未发现与 Issue #43 无关的代码变更。
  • 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

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

1 participant