From aa2d4352a0b045894971622df2425d5ab58f2104 Mon Sep 17 00:00:00 2001
From: Pareder <ruskc2beat@gmail.com>
Date: Fri, 12 Jun 2026 12:26:45 +0300
Subject: [PATCH] fix: option position announcement for virtual mode

---
 src/OptionList.tsx                           | 66 ++++++++++++-
 tests/Accessibility.test.tsx                 | 99 ++++++++++++++++++++
 tests/__snapshots__/OptionList.test.tsx.snap | 26 +++--
 tests/__snapshots__/Select.test.tsx.snap     | 12 +++
 tests/__snapshots__/Tags.test.tsx.snap       | 27 +++---
 5 files changed, 195 insertions(+), 35 deletions(-)

diff --git a/src/OptionList.tsx b/src/OptionList.tsx
index 21e693083..784602dbb 100644
--- a/src/OptionList.tsx
+++ b/src/OptionList.tsx
@@ -275,6 +275,12 @@ const OptionList: React.ForwardRefRenderFunction<RefOptionListProps, {}> = (_, r
 
   const getLabel = (item: Record<string, any>) => item.label;
 
+  // Skip group headers to match native <select> announcements with <optgroup>
+  const optionCount = memoFlattenOptions.filter((option) => !option.group).length;
+
+  const getOptionPosition = (index: number) =>
+    memoFlattenOptions.slice(0, index + 1).filter((option) => !option.group).length;
+
   function getItemAriaProps(item: FlattenOptionData<BaseOptionType>, index: number) {
     const { group } = item;
 
@@ -291,12 +297,13 @@ const OptionList: React.ForwardRefRenderFunction<RefOptionListProps, {}> = (_, r
     }
     const itemData = item.data || {};
     const { value, disabled } = itemData;
-    const { group } = item;
     const attrs = pickAttrs(itemData, true);
     const mergedLabel = getLabel(item);
     return item ? (
       <div
-        aria-label={typeof mergedLabel === 'string' && !group ? mergedLabel : null}
+        aria-label={typeof mergedLabel === 'string' ? mergedLabel : null}
+        aria-setsize={optionCount}
+        aria-posinset={getOptionPosition(index)}
         {...attrs}
         key={index}
         {...getItemAriaProps(item, index)}
@@ -308,6 +315,57 @@ const OptionList: React.ForwardRefRenderFunction<RefOptionListProps, {}> = (_, r
     ) : null;
   };
 
+  const getGroupItem = (index: number) => {
+    for (let i = index; i >= 0; i -= 1) {
+      const current = memoFlattenOptions[i];
+      if (current?.group) {
+        return current;
+      }
+    }
+    return null;
+  };
+
+  // Nest options inside `role="group"` wrappers
+  const renderHiddenItems = () => {
+    const segments: {
+      group: FlattenOptionData<BaseOptionType> | null;
+      indexes: number[];
+    }[] = [];
+
+    [activeIndex - 1, activeIndex, activeIndex + 1].forEach((index) => {
+      const item = memoFlattenOptions[index];
+      if (!item || item.group) {
+        return;
+      }
+
+      const groupItem = item.groupOption ? getGroupItem(index) : null;
+      const lastSegment = segments[segments.length - 1];
+
+      if (lastSegment && lastSegment.group === groupItem) {
+        lastSegment.indexes.push(index);
+      } else {
+        segments.push({ group: groupItem, indexes: [index] });
+      }
+    });
+
+    return segments.map(({ group, indexes }) => {
+      if (!group) {
+        return indexes.map(renderItem);
+      }
+
+      const groupLabel = getLabel(group);
+      return (
+        <div
+          key={group.key}
+          role="group"
+          aria-label={typeof groupLabel === 'string' ? groupLabel : null}
+        >
+          {indexes.map(renderItem)}
+        </div>
+      );
+    });
+  };
+
   const a11yProps = {
     role: 'listbox',
     id: `${id}_list`,
@@ -317,9 +375,7 @@ const OptionList: React.ForwardRefRenderFunction<RefOptionListProps, {}> = (_, r
     <>
       {virtual && (
         <div {...a11yProps} style={{ height: 0, width: 0, overflow: 'hidden' }}>
-          {renderItem(activeIndex - 1)}
-          {renderItem(activeIndex)}
-          {renderItem(activeIndex + 1)}
+          {renderHiddenItems()}
         </div>
       )}
       <List<FlattenOptionData<BaseOptionType>>
diff --git a/tests/Accessibility.test.tsx b/tests/Accessibility.test.tsx
index 3688c96c3..76ef23827 100644
--- a/tests/Accessibility.test.tsx
+++ b/tests/Accessibility.test.tsx
@@ -203,6 +203,105 @@ describe('Select.Accessibility', () => {
       });
     });
 
+    it('should have correct aria-posinset and aria-setsize in virtual mode', () => {
+      const { container } = render(
+        <Select
+          id="virtual-select"
+          open
+          options={[{ value: '1' }, { value: '2' }, { value: '3' }, { value: '4' }, { value: '5' }]}
+        />,
+      );
+
+      // The hidden accessibility container is the listbox itself in virtual mode
+      const getHiddenOptions = () =>
+        Array.from(document.querySelectorAll('#virtual-select_list div[role="option"]'));
+
+      // Active index is 0, so the hidden container renders options 0 and 1
+      let hiddenOptions = getHiddenOptions();
+      expect(hiddenOptions.map((option) => option.getAttribute('aria-posinset'))).toEqual([
+        '1',
+        '2',
+      ]);
+      hiddenOptions.forEach((option) => {
+        expect(option).toHaveAttribute('aria-setsize', '5');
+      });
+
+      // Move active option to the middle of the list
+      keyDown(container.querySelector('input')!, KeyCode.DOWN);
+      keyDown(container.querySelector('input')!, KeyCode.DOWN);
+
+      // Active index is 2, so the hidden container renders options 1, 2 and 3
+      hiddenOptions = getHiddenOptions();
+      expect(hiddenOptions.map((option) => option.getAttribute('aria-posinset'))).toEqual([
+        '2',
+        '3',
+        '4',
+      ]);
+      hiddenOptions.forEach((option) => {
+        expect(option).toHaveAttribute('aria-setsize', '5');
+      });
+    });
+
+    it('aria-posinset and aria-setsize should skip group headers like native optgroup', () => {
+      const { container } = render(
+        <Select
+          id="virtual-select"
+          open
+          options={[
+            {
+              label: 'First group',
+              options: [{ value: '1' }, { value: '2' }, { value: '3' }],
+            },
+            {
+              label: 'Second group',
+              options: [{ value: '4' }, { value: '5' }, { value: '6' }],
+            },
+          ]}
+        />,
+      );
+
+      const hiddenContainer = document.querySelector('#virtual-select_list');
+      const getHiddenOptions = () =>
+        Array.from(hiddenContainer.querySelectorAll('div[role="option"]'));
+      const getGroupWrappers = () =>
+        Array.from(hiddenContainer.querySelectorAll('div[role="group"]'));
+
+      // Active option is the first real option (flatten index 1), so the
+      // hidden container renders the first two options inside their group
+      let groupWrappers = getGroupWrappers();
+      expect(groupWrappers).toHaveLength(1);
+      expect(groupWrappers[0]).toHaveAttribute('aria-label', 'First group');
+
+      let hiddenOptions = getHiddenOptions();
+      expect(hiddenOptions.map((option) => option.getAttribute('aria-posinset'))).toEqual([
+        '1',
+        '2',
+      ]);
+      hiddenOptions.forEach((option) => {
+        expect(option).toHaveAttribute('aria-setsize', '6');
+        expect(option.parentElement).toBe(groupWrappers[0]);
+      });
+
+      // Move into the second group: positions keep counting across groups
+      keyDown(container.querySelector('input')!, KeyCode.DOWN);
+      keyDown(container.querySelector('input')!, KeyCode.DOWN);
+      keyDown(container.querySelector('input')!, KeyCode.DOWN);
+
+      groupWrappers = getGroupWrappers();
+      expect(groupWrappers).toHaveLength(1);
+      expect(groupWrappers[0]).toHaveAttribute('aria-label', 'Second group');
+
+      hiddenOptions = getHiddenOptions();
+      expect(hiddenOptions.map((option) => option.getAttribute('aria-posinset'))).toEqual([
+        '4',
+        '5',
+      ]);
+      hiddenOptions.forEach((option) => {
+        expect(option).toHaveAttribute('aria-setsize', '6');
+        expect(option.parentElement).toBe(groupWrappers[0]);
+      });
+    });
+
     it('should have correct aria and role attributes in virtual false', () => {
       render(
         <Select
diff --git a/tests/__snapshots__/OptionList.test.tsx.snap b/tests/__snapshots__/OptionList.test.tsx.snap
index 43ce59cc3..653307e54 100644
--- a/tests/__snapshots__/OptionList.test.tsx.snap
+++ b/tests/__snapshots__/OptionList.test.tsx.snap
@@ -8,23 +8,19 @@ exports[`OptionList renders correctly virtual 1`] = `
     style="height: 0px; width: 0px; overflow: hidden;"
   >
     <div
-      aria-selected="false"
-      id="undefined_list_0"
-      role="presentation"
-    />
-    <div
-      aria-label="value-1"
-      aria-selected="true"
-      id="undefined_list_1"
-      role="option"
+      role="group"
     >
-      1
+      <div
+        aria-label="value-1"
+        aria-posinset="1"
+        aria-selected="true"
+        aria-setsize="2"
+        id="undefined_list_1"
+        role="option"
+      >
+        1
+      </div>
     </div>
-    <div
-      aria-selected="false"
-      id="undefined_list_2"
-      role="presentation"
-    />
   </div>
   <div
     class="rc-virtual-list"
diff --git a/tests/__snapshots__/Select.test.tsx.snap b/tests/__snapshots__/Select.test.tsx.snap
index 7d7c0edc6..476e476ab 100644
--- a/tests/__snapshots__/Select.test.tsx.snap
+++ b/tests/__snapshots__/Select.test.tsx.snap
@@ -13,7 +13,9 @@ exports[`Select.Basic does not filter when filterOption value is false 1`] = `
     >
       <div
         aria-label="1"
+        aria-posinset="1"
         aria-selected="false"
+        aria-setsize="2"
         id="test-id_list_0"
         role="option"
       >
@@ -21,7 +23,9 @@ exports[`Select.Basic does not filter when filterOption value is false 1`] = `
       </div>
       <div
         aria-label="2"
+        aria-posinset="2"
         aria-selected="false"
+        aria-setsize="2"
         id="test-id_list_1"
         role="option"
       >
@@ -409,7 +413,9 @@ exports[`Select.Basic should contain falsy children 1`] = `
     >
       <div
         aria-label="1"
+        aria-posinset="1"
         aria-selected="true"
+        aria-setsize="2"
         id="test-id_list_0"
         role="option"
       >
@@ -417,7 +423,9 @@ exports[`Select.Basic should contain falsy children 1`] = `
       </div>
       <div
         aria-label="2"
+        aria-posinset="2"
         aria-selected="false"
+        aria-setsize="2"
         id="test-id_list_1"
         role="option"
       >
@@ -508,7 +516,9 @@ exports[`Select.Basic should render custom dropdown correctly 1`] = `
       >
         <div
           aria-label="1"
+          aria-posinset="1"
           aria-selected="false"
+          aria-setsize="2"
           id="test-id_list_0"
           role="option"
         >
@@ -516,7 +526,9 @@ exports[`Select.Basic should render custom dropdown correctly 1`] = `
         </div>
         <div
           aria-label="2"
+          aria-posinset="2"
           aria-selected="false"
+          aria-setsize="2"
           id="test-id_list_1"
           role="option"
         >
diff --git a/tests/__snapshots__/Tags.test.tsx.snap b/tests/__snapshots__/Tags.test.tsx.snap
index c19b95bb5..72cbedf12 100644
--- a/tests/__snapshots__/Tags.test.tsx.snap
+++ b/tests/__snapshots__/Tags.test.tsx.snap
@@ -87,23 +87,20 @@ exports[`Select.Tags OptGroup renders correctly 1`] = `
         style="height: 0px; width: 0px; overflow: hidden;"
       >
         <div
-          aria-selected="false"
-          id="test-id_list_0"
-          role="presentation"
-        />
-        <div
-          aria-label="Jack"
-          aria-selected="true"
-          id="test-id_list_1"
-          role="option"
+          aria-label="Manager"
+          role="group"
         >
-          jack
+          <div
+            aria-label="Jack"
+            aria-posinset="1"
+            aria-selected="true"
+            aria-setsize="3"
+            id="test-id_list_1"
+            role="option"
+          >
+            jack
+          </div>
         </div>
-        <div
-          aria-selected="false"
-          id="test-id_list_2"
-          role="presentation"
-        />
       </div>
       <div
         class="rc-virtual-list"