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

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add the attribute "inert" or tabindex="-1" for hidden elements

1 participant