fix: open dropdown on spacekey for keyboard accessibility (#1200)

* fix: open dropdown on spacekey for keyboard accessibility

* fix: add test

Author: claytonlin1110

src/BaseSelect/index.tsx

@@ -463,9 +463,11 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
     const { key } = event;
 
     const isEnterKey = key === 'Enter';
+    const isSpaceKey = key === ' ';
 
-    if (isEnterKey) {
-      // Do not submit form when type in the input
+    // 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();
       }
@@ -507,7 +509,7 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
       }
     }
 
-    if (mergedOpen && (!isEnterKey || !keyLockRef.current)) {
+    if (mergedOpen && (!isEnterKey || !keyLockRef.current) && !isSpaceKey) {
       // Lock the Enter key after it is pressed to avoid repeated triggering of the onChange event.
       if (isEnterKey) {
         keyLockRef.current = true;

tests/Accessibility.test.tsx

@@ -21,6 +21,28 @@ describe('Select.Accessibility', () => {
     expect(container.querySelector('input')!.getAttribute('aria-label')).toEqual('light');
   });
 
+  // https://github.com/ant-design/ant-design/issues/56841
+  it('spacebar opens dropdown (ARIA combobox)', () => {
+    const { container } = render(
+      <Select
+        options={[
+          { label: 'Bamboo', value: 'bamboo' },
+          { label: 'Light', value: 'light' },
+        ]}
+      />,
+    );
+
+    const selector = container.querySelector('.rc-select') as HTMLElement;
+    expectOpen(container, false);
+
+    fireEvent.focus(container.querySelector('input')!);
+    keyDown(selector, 32, { key: ' ' });
+    act(() => {
+      jest.runAllTimers();
+    });
+    expectOpen(container);
+  });
+
   // https://github.com/ant-design/ant-design/issues/31850
   it('active index should keep', async () => {
     const onActive = jest.fn();