Skip to content

fix: set correct tabIndex for next button in simple mode - #729

Open
feritcemkahraman wants to merge 1 commit into
react-component:masterfrom
feritcemkahraman:fix/simple-next-tabindex
Open

feritcemkahraman wants to merge 1 commit into
react-component:masterfrom
feritcemkahraman:fix/simple-next-tabindex

Conversation

@feritcemkahraman

@feritcemkahraman feritcemkahraman commented Oct 21, 2026 •

Copy link
Copy Markdown

Summary

In simple pagination mode, the Next button's tabIndex was evaluated as nextTabIndex = hasPrev ? 0 : null.
This inverted the keyboard accessibility behavior:

  • On page 1 (where hasPrev is false, but hasNext is true and enabled), tabIndex was set to null, preventing keyboard navigation into the enabled Next button.
  • On the last page (where hasPrev is true, but hasNext is false and disabled), tabIndex was set to 0, causing the disabled Next button to be keyboard focusable.

Fix

Evaluate nextTabIndex consistently with nextDisabled ? null : 0 in both simple and standard pagination modes, ensuring enabled buttons receive tabIndex={0} and disabled buttons omit tabIndex.

Verification

  • 223 tests passing across all 10 test suites (pnpm test).
  • Clean ESLint check (pnpm lint).
  • Clean dual ESM and CJS build (npx father build).

Summary by CodeRabbit

  • Bug Fixes

    • 修复简单分页模式下“下一页”按钮的键盘聚焦状态,使其仅在存在下一页时可聚焦。
    • 优化分页按钮的键盘导航:第一页禁用“上一页”聚焦,最后一页禁用“下一页”聚焦。
  • Tests

    • 新增简单分页模式下前后翻页按钮键盘聚焦状态的测试。

@vercel

vercel Bot commented Oct 21, 2026

Copy link
Copy Markdown

@feritcemkahraman 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 Oct 21, 2026 •

Copy link
Copy Markdown

Review in Change Stack →

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration
  • Configuration used: Organization UI
  • Review profile: CHILL
  • Plan: Advanced
  • Run ID: b0d49b18-14d2-4167-8b12-c45a8d7fb47c
📥 Commits

Reviewing files that changed from the base of the PR and between a7dd4cb and 2a6ab77.

⛔ Files ignored due to path filters: 1
  • tests/__snapshots__/demo.test.tsx.snap is excluded by !**/*.snap
📒 Files selected for processing: 2
  • src/Pagination.tsx
  • tests/simple.test.tsx

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

Walkthrough

简单模式下,Next 控件的键盘焦点条件改为依据是否存在下一页。新增测试验证第一页和第三页的前后翻页按钮 tabIndex。

Changes

简单分页焦点

Layer / File(s) Summary
修正焦点条件并验证
src/Pagination.tsx, tests/simple.test.tsx
Next 控件在存在下一页时设置 tabIndex 为 0,否则设置为 null。测试覆盖第一页和第三页的前后翻页按钮。

Priority: ⬇️ Low

Estimated code review effort: 2 (Simple) | ~8 minutes

Change: Bug fix

Suggested reviewers: qdyanbing

Merge Risk: ⚪ Minimal · up to 2a6ab

The pagination focus correction is covered by the added tests and presents no unresolved merge risk.

Pre-merge checks: Passed 5
Check name Status Explanation
Description Check Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check Passed 标题准确概括了主要变更:修复 simple 模式下 Next 按钮的 tabIndex 设置。
Docstring Coverage Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 2…
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.
Full details: Docstring Coverage

Explanation

No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 2 files.

✨ Finishing Touches: 💡 1
🛠️ Fix failing CI checks: 💡
  • Commit to this branch
  • Create a new PR
🧪 Generate unit tests (beta)
  • Create a new PR
  • Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

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 timed out. The project may have too many dependencies for the sandbox.

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.

This branch has not been deployed

No deployments
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