fix: open dropdown on spacekey for keyboard accessibility#1200
fix: open dropdown on spacekey for keyboard accessibility#1200claytonlin1110 wants to merge 2 commits intoreact-component:masterfrom
Conversation
|
@claytonlin1110 is attempting to deploy a commit to the React Component Team on Vercel. A member of the Team first needs to authorize it. |
Summary of ChangesHello @claytonlin1110, I'm Gemini Code Assist1! 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 Highlights
🧠 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
Activity
Using Gemini Code AssistThe 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
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 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
|
Walkthrough在 BaseSelect 中为 Space 键添加了打开下拉的处理，并在非 combobox 模式下阻止其默认行为；相应地调整了 Enter/Space 的按键处理路径；新增测试验证 Space 可打开下拉；更新了 package.json 相关变更。 Changes
Sequence Diagram(s)(无 — 本次改动未引入需跨多个组件的全新顺序流程可视化) Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
Suggested reviewers
诗歌
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
🧪 Generate unit tests (beta)
Important Action Needed: IP Allowlist UpdateIf your organization protects your Git platform with IP whitelisting, please add the new CodeRabbit IP address to your allowlist:
Reviews will stop working after February 8, 2026 if the new IP is not added to your allowlist. 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. Comment |
Codecov Report✅ All modified and coverable lines are covered by tests. 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. 🚀 New features to boost your workflow:
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
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.
|
@afc163 would you please review this? |
|
Could you add a test case？ |
There was a problem hiding this comment.
Pull request overview
Updates BaseSelect keyboard handling to improve accessibility by opening the dropdown on Space (in addition to Enter) and preventing unwanted page scrolling.
Changes:
- Treat Space the same as Enter to open the dropdown when closed (with
preventDefault()in non-combobox mode). - Prevent forwarding Space keydown events to the option list while the dropdown is open.
Comments suppressed due to low confidence (1)
src/BaseSelect/index.tsx:479
- Add/adjust unit tests for the new Space key behavior. This change affects keyboard interaction (open dropdown when closed; prevent default to avoid page scroll; do not forward Space to OptionList when open), but there’s currently no test coverage for Space keydown. Consider adding cases alongside existing keydown/open assertions (e.g., in Select/Accessibility test suites) to verify dropdown open state and that preventDefault is called in non-combobox mode.
// Enter or Space opens dropdown (ARIA combobox: spacebar should open)
if (isEnterKey || isSpaceKey) {
// Do not submit form when type in the input; prevent Space from scrolling page
if (mode !== 'combobox') {
event.preventDefault();
}
// We only manage open state here, close logic should handle by list component
if (!mergedOpen) {
triggerOpen(true);
}
}
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Added test just now. |
| const { key } = event; | ||
|
|
||
| const isEnterKey = key === 'Enter'; | ||
| const isSpaceKey = key === ' '; |
There was a problem hiding this comment.
Is the space key in the event a space string?
3 participants
🔗 Related Issues
💡 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:preventDefault()(non-combobox mode) so the page does not scroll.Summary by CodeRabbit