chore: Move option aria to real element when virtual is disabled

package.json

@@ -50,7 +50,7 @@
     "rc-overflow": "^1.0.0",
     "rc-trigger": "^5.0.4",
     "rc-util": "^5.16.1",
-    "rc-virtual-list": "^3.2.0"
+    "rc-virtual-list": "^3.4.13"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.16.5",

src/OptionList.tsx

@@ -1,19 +1,19 @@
-import * as React from 'react';
-import { useEffect } from 'react';
-import type { ScrollConfig } from 'rc-virtual-list/lib/List';
+import classNames from 'classnames';
+import useMemo from 'rc-util/lib/hooks/useMemo';
 import KeyCode from 'rc-util/lib/KeyCode';
 import omit from 'rc-util/lib/omit';
 import pickAttrs from 'rc-util/lib/pickAttrs';
-import useMemo from 'rc-util/lib/hooks/useMemo';
-import classNames from 'classnames';
 import type { ListRef } from 'rc-virtual-list';
 import List from 'rc-virtual-list';
-import TransBtn from './TransBtn';
-import { isPlatformMac } from './utils/platformUtil';
+import type { ScrollConfig } from 'rc-virtual-list/lib/List';
+import * as React from 'react';
+import { useEffect } from 'react';
 import useBaseProps from './hooks/useBaseProps';
-import SelectContext from './SelectContext';
-import type { BaseOptionType, RawValueType } from './Select';
 import type { FlattenOptionData } from './interface';
+import type { BaseOptionType, RawValueType } from './Select';
+import SelectContext from './SelectContext';
+import TransBtn from './TransBtn';
+import { isPlatformMac } from './utils/platformUtil';
 
 // export interface OptionListProps<OptionsType extends object[]> {
 export type OptionListProps = Record<string, never>;
@@ -32,10 +32,7 @@ function isTitleType(content: any) {
  * Using virtual list of option display.
  * Will fallback to dom if use customize render.
  */
-const OptionList: React.ForwardRefRenderFunction<RefOptionListProps, {}> = (
-  _,
-  ref,
-) => {
+const OptionList: React.ForwardRefRenderFunction<RefOptionListProps, {}> = (_, ref) => {
   const {
     prefixCls,
     id,
@@ -245,6 +242,15 @@ const OptionList: React.ForwardRefRenderFunction<RefOptionListProps, {}> = (
 
   const getLabel = (item: Record<string, any>) => item.label;
 
+  function getItemAriaProps(item: FlattenOptionData<BaseOptionType>, index: number) {
+    const { group } = item;
+
+    return {
+      role: group ? 'presentation' : 'option',
+      id: `${id}_list_${index}`,
+    };
+  }
+
   const renderItem = (index: number) => {
     const item = memoFlattenOptions[index];
     if (!item) return null;
@@ -259,22 +265,28 @@ const OptionList: React.ForwardRefRenderFunction<RefOptionListProps, {}> = (
         aria-label={typeof mergedLabel === 'string' && !group ? mergedLabel : null}
         {...attrs}
         key={index}
-        role={group ? 'presentation' : 'option'}
-        id={`${id}_list_${index}`}
+        {...getItemAriaProps(item, index)}
         aria-selected={isSelected(value)}
       >
         {value}
       </div>
     ) : null;
   };
 
+  const a11yProps = {
+    role: 'listbox',
+    id: `${id}_list`,
+  };
+
   return (
     <>
-      <div role="listbox" id={`${id}_list`} style={{ height: 0, width: 0, overflow: 'hidden' }}>
-        {renderItem(activeIndex - 1)}
-        {renderItem(activeIndex)}
-        {renderItem(activeIndex + 1)}
-      </div>
+      {virtual && (
+        <div {...a11yProps} style={{ height: 0, width: 0, overflow: 'hidden' }}>
+          {renderItem(activeIndex - 1)}
+          {renderItem(activeIndex)}
+          {renderItem(activeIndex + 1)}
+        </div>
+      )}
       <List<FlattenOptionData<BaseOptionType>>
         itemKey="key"
         ref={listRef}
@@ -285,6 +297,7 @@ const OptionList: React.ForwardRefRenderFunction<RefOptionListProps, {}> = (
         onMouseDown={onListMouseDown}
         onScroll={onPopupScroll}
         virtual={virtual}
+        innerProps={virtual ? null : a11yProps}
       >
         {(item, itemIndex) => {
           const { group, groupOption, data, label, value } = item;
@@ -334,6 +347,7 @@ const OptionList: React.ForwardRefRenderFunction<RefOptionListProps, {}> = (
           return (
             <div
               {...pickAttrs(passedProps)}
+              {...(!virtual ? getItemAriaProps(item, itemIndex) : {})}
               aria-selected={selected}
               className={optionClassName}
               title={optionTitle}

tests/OptionList.test.tsx

@@ -1,13 +1,13 @@
 import { mount } from 'enzyme';
 import KeyCode from 'rc-util/lib/KeyCode';
-import { act } from 'react-dom/test-utils';
 import React from 'react';
+import { act } from 'react-dom/test-utils';
+import { BaseSelectContext } from '../src/hooks/useBaseProps';
 import type { RefOptionListProps } from '../src/OptionList';
 import OptionList from '../src/OptionList';
-import { injectRunAllTimers } from './utils/common';
-import { fillFieldNames, flattenOptions } from '../src/utils/valueUtil';
 import SelectContext from '../src/SelectContext';
-import { BaseSelectContext } from '../src/hooks/useBaseProps';
+import { fillFieldNames, flattenOptions } from '../src/utils/valueUtil';
+import { injectRunAllTimers } from './utils/common';
 
 jest.mock('../src/utils/platformUtil');
 
@@ -44,6 +44,7 @@ describe('OptionList', () => {
             onActiveValue: () => {},
             onSelect: () => {},
             rawValues: values || new Set(),
+            virtual: true,
             ...props,
           }}
         >
@@ -55,23 +56,35 @@ describe('OptionList', () => {
     );
   }
 
-  it('renders correctly', () => {
-    const wrapper = mount(
-      generateList({
-        options: [
-          {
-            key: 'group1',
-            options: [{ value: '1', 'aria-label': 'value-1' }],
-          },
-          {
-            key: 'group2',
-            options: [{ value: '2' }],
-          },
-        ],
-        values: new Set(['1']),
-      }),
-    );
-    expect(wrapper.render()).toMatchSnapshot();
+  describe('renders correctly', () => {
+    const sharedConfig = {
+      options: [
+        {
+          key: 'group1',
+          options: [{ value: '1', 'aria-label': 'value-1' }],
+        },
+        {
+          key: 'group2',
+          options: [{ value: '2' }],
+        },
+      ],
+      values: new Set(['1']),
+    };
+
+    it('virtual', () => {
+      const wrapper = mount(generateList(sharedConfig));
+      expect(wrapper.render()).toMatchSnapshot();
+    });
+
+    it('without virtual', () => {
+      const wrapper = mount(
+        generateList({
+          ...sharedConfig,
+          virtual: false,
+        }),
+      );
+      expect(wrapper.render()).toMatchSnapshot();
+    });
   });
 
   it('save first active item', () => {

tests/__snapshots__/OptionList.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`OptionList renders correctly 1`] = `
+exports[`OptionList renders correctly virtual 1`] = `
 <div>
   <div
     id="undefined_list"
@@ -99,3 +99,85 @@ exports[`OptionList renders correctly 1`] = `
   </div>
 </div>
 `;
+
+exports[`OptionList renders correctly without virtual 1`] = `
+<div>
+  <div
+    class="rc-virtual-list"
+    style="position: relative;"
+  >
+    <div
+      class="rc-virtual-list-holder"
+    >
+      <div>
+        <div
+          class="rc-virtual-list-holder-inner"
+          id="undefined_list"
+          role="listbox"
+          style="display: flex; flex-direction: column;"
+        >
+          <div
+            class="rc-select-item rc-select-item-group"
+          >
+            group1
+          </div>
+          <div
+            aria-label="value-1"
+            aria-selected="true"
+            class="rc-select-item rc-select-item-option rc-select-item-option-grouped rc-select-item-option-active rc-select-item-option-selected"
+            id="undefined_list_1"
+            role="option"
+            title="1"
+          >
+            <div
+              class="rc-select-item-option-content"
+            >
+              1
+            </div>
+            <span
+              aria-hidden="true"
+              class="rc-select-item-option-state"
+              style="user-select: none;"
+              unselectable="on"
+            >
+              <span
+                class="rc-select-item-option-state-icon"
+              >
+                ✓
+              </span>
+            </span>
+          </div>
+          <div
+            class="rc-select-item rc-select-item-group"
+          >
+            group2
+          </div>
+          <div
+            aria-selected="false"
+            class="rc-select-item rc-select-item-option rc-select-item-option-grouped"
+            id="undefined_list_3"
+            role="option"
+            title="2"
+          >
+            <div
+              class="rc-select-item-option-content"
+            >
+              2
+            </div>
+            <span
+              aria-hidden="true"
+              class="rc-select-item-option-state"
+              style="user-select: none;"
+              unselectable="on"
+            >
+              <span
+                class="rc-select-item-option-state-icon"
+              />
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;