fix: remove tabIndex={-1} from clear button to make it keyboard accessible

[cyphercodes]

This PR removes the tabIndex={-1} from the clear button in BaseInput component.

Problem

The clear button had tabIndex={-1} which made it unreachable via keyboard navigation. This violates WCAG 2.1 success criteria 2.1.1 (Keyboard) and 2.1.3 (Keyboard No Exception), creating inequality for keyboard users who cannot access and operate this functionality.

Solution

Remove the tabIndex={-1} attribute so the clear button becomes focusable by default. This allows keyboard users to tab to the clear button and activate it.

Related Issue

Fixes ant-design/ant-design#57378

Note

After this change, ant-design will need to add proper :focus styles for the clear button in their style file (components/input/style/index.ts - genAllowClearStyle function) to ensure the focus state is visually identifiable.

Summary by CodeRabbit

发布说明

• Bug Fixes

  • 改进了输入框清除按钮的键盘无障碍行为：该按钮现已包含在标准 Tab 导航顺序中，可被键盘直接聚焦并激活以清除内容。

• Tests

  • 增加针对按键（空格与回车）和 Tab 导航的自动化测试，验证清除按钮的键盘可访问性与清除行为。

[gemini-code-assist]

Summary of Changes

Hello, 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 keyboard accessibility of the clear button within the BaseInput component. By removing a specific HTML attribute, the button becomes fully navigable and operable for users relying on keyboard input, thereby improving compliance with web accessibility standards and ensuring a more inclusive user experience.

Highlights

• Accessibility Improvement: Removed tabIndex={-1} from the clear button in the BaseInput component to make it keyboard accessible, addressing WCAG 2.1 success criteria 2.1.1 and 2.1.3.
• Keyboard Navigation: The clear button is now focusable by default, allowing keyboard users to tab to it and activate its functionality.
• Future Styling Note: Noted that ant-design will need to add proper :focus styles for the clear button in their style file to ensure visual identification of the focus state.

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

Footnotes

1. 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]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 29c21a51-ce60-4064-975f-d2980fd0f437

📥 Commits

Reviewing files that changed from the base of the PR and between e8edef9 and 8a88023.

⛔ Files ignored due to path filters (3)

• tests/__snapshots__/TextArea.allowClear.test.tsx.snap is excluded by !**/*.snap
• tests/__snapshots__/TextArea.test.tsx.snap is excluded by !**/*.snap
• tests/__snapshots__/index.test.tsx.snap is excluded by !**/*.snap

📒 Files selected for processing (1)

• tests/BaseInput.test.tsx

---

走查

移除 src/BaseInput.tsx 中清除按钮上的 tabIndex={-1}，使该按钮重新加入浏览器标签顺序；同时在 tests/BaseInput.test.tsx 中添加表格驱动的键盘交互测试，验证按 [Space] 和 [Enter] 可清除输入内容。

更改

Cohort / File(s)	Summary
清除按钮实现 src/BaseInput.tsx	从清除按钮元素中移除 tabIndex={-1}，不改变其他点击/鼠标事件或条件渲染逻辑。
键盘可访问性测试 tests/BaseInput.test.tsx	添加 it.each 表格化测试覆盖 [Space] 和 [Enter]，在每个用例中使用 userEvent 聚焦输入、输入文本、Tab 到清除按钮并通过键盘触发清除，断言输入被清空；移除未使用的顶层 userEvent.setup() 变量。

代码审查工作量

🎯 2 (Simple) | ⏱️ ~10 分钟

可能相关的 PR

• fix: clearIcon add tabIndex #111 — 该 PR 曾向清除按钮添加 tabIndex={-1}，本次改动直接撤销/修复该变更。
• fix: clear button should have type="button" #83 — 之前对清除按钮元素的属性（如 type="button"）做过修改，与本次针对清除按钮的改动相关。

建议的审查者

• afc163

诗歌

🐰 我在键盘上轻轻跳，Tab 一下光芒照，
清除按钮归队列，输入再见不再绕，
小爪一点心里暖，可及皆可被看见 🐇✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	标题准确概括了拉取请求的主要变化：移除clear按钮的tabIndex={-1}属性以改进键盘可访问性。
Linked Issues check	✅ Passed	拉取请求成功满足了问题#57378的需求：移除了tabIndex={-1}属性并添加了键盘可访问性测试覆盖。
Out of Scope Changes check	✅ Passed	所有代码更改都在范围内，专注于解决clear按钮的键盘可访问性问题，无关无关变更。
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

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

✨ Finishing Touches

🧪 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

• X
• Mastodon
• Reddit
• LinkedIn

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

[gemini-code-assist]

Code Review

This pull request removes the tabIndex={-1} attribute from the clear icon button in src/BaseInput.tsx. There are no review comments to provide feedback on.

[afc163]

[Pareder]

@cyphercodes Will you be able to fix it?

[Pareder]

@cyphercodes Ping. I can create a new PR with fixed tests if you are not able, just let me know.

[cyphercodes]

Thanks for the ping! I pushed a follow-up commit (8a88023) to fix the failing tests.

Changes:

• Updated Input/TextArea allowClear snapshots to match the keyboard-accessible clear button (no tabindex="-1").
• Enabled keyboard coverage for the clear button, verifying it is tabbable and can be activated with Space/Enter.

Local verification:

• bun run lint ✅ (passes with the existing ResizableTextArea hook warnings)
• bunx tsc --noEmit ✅
• bun run compile ✅ (same existing warnings)
• bun run test -- --coverage ✅ (10 suites, 127 tests, 22 snapshots)

The new GitHub Actions ✅ test run is currently marked action_required with no jobs, so it may need maintainer approval/rerun.