fix: open dropdown on spacekey for keyboard accessibility

[claytonlin1110]

🔗 Related Issues

• Fixes Select is not keyboard accessible with the spacebar ant-design/ant-design#56841

💡 Background and Solution

Problem: When focusing a Select and pressing Space, the page scrolls instead of opening the dropdown. For ARIA combobox, both Enter and Space should open the dropdown.

Solution: In BaseSelect, handle Space the same way as Enter when the dropdown is closed:

• If the dropdown is closed and the key is Space, open the dropdown and call preventDefault() (non-combobox mode) so the page does not scroll.
• When the dropdown is open, do not forward Space to the option list (the list only uses Enter/Tab to select) and still prevent default so Space does not scroll the page.

Summary by CodeRabbit

• Bug 修复
  • 改进了下拉菜单组件中的键盘交互，Space 键现可打开下拉菜单，避免不需要的页面滚动。

[vercel]

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

A member of the Team first needs to authorize it.

[gemini-code-assist]

Summary of Changes

Hello @claytonlin1110, 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 addresses a keyboard accessibility issue in the BaseSelect component where pressing the Space key would cause the page to scroll instead of opening the dropdown. The changes modify the event handling logic to treat the Space key similarly to the Enter key for opening the dropdown, while also preventing the default browser scroll behavior. This enhancement improves the user experience for keyboard navigators and ensures better compliance with ARIA combobox accessibility guidelines.

Highlights

• Keyboard Accessibility: Implemented Space key handling in the BaseSelect component to open the dropdown, aligning with ARIA combobox standards for improved keyboard accessibility.
• Scroll Prevention: Ensured event.preventDefault() is called when the Space key is pressed, preventing unwanted page scrolling both when the dropdown is closed and when it is open.
• Key Handling Refinement: Adjusted the key locking mechanism to specifically exclude the Space key when the dropdown is already open, preventing interference with option selection which typically uses Enter or Tab.

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

Changelog

• src/BaseSelect/index.tsx
  • Introduced isSpaceKey variable to detect Space key presses.
  • Modified the dropdown opening condition to include isSpaceKey alongside isEnterKey.
  • Updated the preventDefault() call to apply when either Enter or Space keys are pressed, preventing form submission and page scrolling.
  • Adjusted the mergedOpen condition to explicitly exclude isSpaceKey from the key locking mechanism, ensuring Space key behavior does not conflict with open dropdown interactions.

Activity

• The pull request was initiated by claytonlin1110 to resolve a reported accessibility bug.
• It directly addresses and fixes issue https://github.com/ant-design/ant-design/issues/56841, which details the problem of the Space key causing page scrolling instead of opening the dropdown.

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.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

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]

行走指南

在 BaseSelect 组件中添加了空格键 (Space) 的处理支持。空格键现可像 Enter 键一样打开下拉菜单，在非组合框模式下会阻止其默认行为以避免页面滚动或表单提交。

变更

改动内容 / 文件	摘要
Space 键盘可访问性支持 src/BaseSelect/index.tsx	添加空格键处理逻辑以打开下拉菜单，阻止默认页面滚动行为，并更新按键锁定 (keyLockRef) 机制以正确处理 Enter 和 Space 键的交互。

估计代码审查工作量

🎯 2 (Simple) | ⏱️ ~10 minutes

可能相关的 PR

• fix: The Enter key lock cannot be released correctly when the custom input calls blur() #1113：都修改了 src/BaseSelect/index.tsx 中的键盘处理，涉及 Enter/Space 行为和 keyLockRef 锁定/解锁逻辑。
• Don't open select on browser hotkeys #1191：都修改了 Select 在按键时的打开行为，处理哪些按键应该打开下拉菜单。

建议审查人员

• afc163
• zombieJ

诗歌

空格键轻轻按下，
下拉菜单展开来，
不再滚动或跳跃，
一只兔子欢乐地说：
可访问性在此闪耀！ 🐰✨

🚥 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	标题准确地反映了此PR的主要变更：通过添加空格键处理来改进键盘无障碍性，打开下拉菜单。
Linked Issues check	✅ Passed	代码变更完整实现了所有链接问题的需求：在BaseSelect中添加了空格键处理，使其能打开下拉菜单并防止页面滚动。
Out of Scope Changes check	✅ Passed	所有代码变更都与链接问题和PR目标相关，专注于BaseSelect组件中的空格键键盘无障碍处理。
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 docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

Important

Action Needed: IP Allowlist Update

If your organization protects your Git platform with IP whitelisting, please add the new CodeRabbit IP address to your allowlist:

• ✨ 136.113.208.247/32 (new)
• 34.170.211.100/32
• 35.222.179.152/32

Failure to add the new IP will result in interrupted reviews.

---

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

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 99.43%. Comparing base (d1aeb03) to head (3643555).
⚠️ Report is 9 commits behind head on master.

Additional details and impacted files

@@           Coverage Diff           @@
##           master    #1200   +/-   ##
=======================================
  Coverage   99.42%   99.43%           
=======================================
  Files          31       31           
  Lines        1219     1230   +11     
  Branches      412      441   +29     
=======================================
+ Hits         1212     1223   +11     
  Misses          7        7           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[gemini-code-assist]

Code Review

This pull request introduces a valuable accessibility improvement by allowing the space key to open the Select component's dropdown, aligning with ARIA standards for comboboxes. The implementation in BaseSelect/index.tsx is clear and effective. It correctly handles opening the dropdown and preventing default browser behavior like page scrolling. The change also thoughtfully prevents the space key event from being passed to the option list when the dropdown is open. My only suggestion is to add a unit test to cover this new functionality and prevent future regressions.