From 2f94e8d228ea32dbd0faa1f7685a67b74c70420f Mon Sep 17 00:00:00 2001
From: Luke Bennett <luke.bennett@thinkmill.com.au>
Date: Tue, 17 Oct 2023 11:17:55 +1100
Subject: [PATCH 1/6] Update docs for Custom Select props (#5776)

---
 docs/pages/typescript/index.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/docs/pages/typescript/index.tsx b/docs/pages/typescript/index.tsx
index ae1f1b4f1c..01968c279e 100644
--- a/docs/pages/typescript/index.tsx
+++ b/docs/pages/typescript/index.tsx
@@ -91,7 +91,12 @@ The \`actionMeta\` parameter is optional. \`ActionMeta\` is a union that is disc
 You can use module augmentation to add custom props to the \`Select\` prop types:
 
 ~~~jsx
-declare module 'react-select/dist/declarations/src/Select' {
+import type {} from 'react-select/base';
+// This import is necessary for module augmentation.
+// It allows us to extend the 'Props' interface in the 'react-select/base' module
+// and add our custom property 'myCustomProp' to it.
+
+declare module 'react-select/base' {
   export interface Props<
     Option,
     IsMulti extends boolean,

From 884f1c42549faad7cb210169223b427ad6f0c9fd Mon Sep 17 00:00:00 2001
From: Alina Andrieieva <emilialina@list.ru>
Date: Mon, 6 Nov 2023 11:28:16 +0200
Subject: [PATCH 2/6] Accessibility - screenreader announces "blank" while
 reading the options (#5758)

* improved a11y with aria-attribules for input, select, and option

* removed console.log

* fixed focusableOptionsWithIds for async select

* Improved the ariaLiveMessages to announce only important information that is not included into native aria messages

* added tests for aria-activedescendant, fixed calculation of focusedOptionId in constructor

* added changelog

* restored some aria-live for apple device

* option focus messages changed

* moved listbox to inner div, aria-multiselectable added

* tsconfig fix

* prettier fix

* removed redundant 'types' from tsconfig

---------

Co-authored-by: Alina Andrieieva <Alina_Andrieieva@epam.com>
---
 .changeset/blue-kings-serve.md                |  14 +
 package.json                                  |   3 +-
 packages/react-select/src/Select.tsx          | 125 ++++++-
 .../src/__tests__/Select.test.tsx             | 317 +++++++++++++++---
 .../__snapshots__/Async.test.tsx.snap         |   2 +
 .../AsyncCreatable.test.tsx.snap              |   2 +
 .../__snapshots__/Creatable.test.tsx.snap     |   2 +
 .../__snapshots__/Select.test.tsx.snap        |   2 +
 .../__snapshots__/StateManaged.test.tsx.snap  |   2 +
 .../react-select/src/__tests__/constants.ts   |  18 +
 .../react-select/src/accessibility/helpers.ts |  33 ++
 .../react-select/src/accessibility/index.ts   |  31 +-
 .../src/components/LiveRegion.tsx             |  21 +-
 yarn.lock                                     |   5 +
 14 files changed, 497 insertions(+), 80 deletions(-)
 create mode 100644 .changeset/blue-kings-serve.md
 create mode 100644 packages/react-select/src/accessibility/helpers.ts

diff --git a/.changeset/blue-kings-serve.md b/.changeset/blue-kings-serve.md
new file mode 100644
index 0000000000..4376283c77
--- /dev/null
+++ b/.changeset/blue-kings-serve.md
@@ -0,0 +1,14 @@
+---
+'react-select': minor
+---
+
+1. Added 'aria-activedescendant' for input and functionality to calculate it;
+2. Added role 'option' and 'aria-selected' for option;
+3. Added role 'listbox' for menu;
+4. Added tests for 'aria-activedescendant';
+5. Changes in aria-live region:
+
+- the instructions how to use select will be announced only one time when user focuses the input for the first time.
+- instructions for menu or selected value will be announced only once after focusing them.
+- removed aria-live for focused option because currently with correct aria-attributes it will be announced by screenreader natively as well as the status of this option (active or disabled).
+- separated ariaContext into ariaFocused, ariaResults, ariaGuidance to avoid announcing redundant information and higlight only current change.
diff --git a/package.json b/package.json
index 90a96e2f70..c186787df8 100644
--- a/package.json
+++ b/package.json
@@ -58,7 +58,8 @@
     "jest-in-case": "^1.0.2",
     "prettier": "^2.2.1",
     "style-loader": "^0.23.1",
-    "typescript": "^4.1.3"
+    "typescript": "^4.1.3",
+    "user-agent-data-types": "^0.4.2"
   },
   "scripts": {
     "build": "preconstruct build",
diff --git a/packages/react-select/src/Select.tsx b/packages/react-select/src/Select.tsx
index 16daa33094..798f6126b2 100644
--- a/packages/react-select/src/Select.tsx
+++ b/packages/react-select/src/Select.tsx
@@ -16,6 +16,7 @@ import LiveRegion from './components/LiveRegion';
 import { createFilter, FilterOptionOption } from './filters';
 import { DummyInput, ScrollManager, RequiredInput } from './internal/index';
 import { AriaLiveMessages, AriaSelection } from './accessibility/index';
+import { isAppleDevice } from './accessibility/helpers';
 
 import {
   classNames,
@@ -329,12 +330,15 @@ interface State<
   inputIsHidden: boolean;
   isFocused: boolean;
   focusedOption: Option | null;
+  focusedOptionId: string | null;
+  focusableOptionsWithIds: FocusableOptionWithId<Option>[];
   focusedValue: Option | null;
   selectValue: Options<Option>;
   clearFocusValueOnUpdate: boolean;
   prevWasFocused: boolean;
   inputIsHiddenAfterUpdate: boolean | null | undefined;
   prevProps: Props<Option, IsMulti, Group> | void;
+  instancePrefix: string;
 }
 
 interface CategorizedOption<Option> {
@@ -347,6 +351,11 @@ interface CategorizedOption<Option> {
   index: number;
 }
 
+interface FocusableOptionWithId<Option> {
+  data: Option;
+  id: string;
+}
+
 interface CategorizedGroup<Option, Group extends GroupBase<Option>> {
   type: 'group';
   data: Group;
@@ -441,6 +450,31 @@ function buildFocusableOptionsFromCategorizedOptions<
   );
 }
 
+function buildFocusableOptionsWithIds<Option, Group extends GroupBase<Option>>(
+  categorizedOptions: readonly CategorizedGroupOrOption<Option, Group>[],
+  optionId: string
+) {
+  return categorizedOptions.reduce<FocusableOptionWithId<Option>[]>(
+    (optionsAccumulator, categorizedOption) => {
+      if (categorizedOption.type === 'group') {
+        optionsAccumulator.push(
+          ...categorizedOption.options.map((option) => ({
+            data: option.data,
+            id: `${optionId}-${categorizedOption.index}-${option.index}`,
+          }))
+        );
+      } else {
+        optionsAccumulator.push({
+          data: categorizedOption.data,
+          id: `${optionId}-${categorizedOption.index}`,
+        });
+      }
+      return optionsAccumulator;
+    },
+    []
+  );
+}
+
 function buildFocusableOptions<
   Option,
   IsMulti extends boolean,
@@ -499,6 +533,17 @@ function getNextFocusedOption<
     ? lastFocusedOption
     : options[0];
 }
+
+const getFocusedOptionId = <Option,>(
+  focusableOptionsWithIds: FocusableOptionWithId<Option>[],
+  focusedOption: Option
+) => {
+  const focusedOptionId = focusableOptionsWithIds.find(
+    (option) => option.data === focusedOption
+  )?.id;
+  return focusedOptionId || null;
+};
+
 const getOptionLabel = <
   Option,
   IsMulti extends boolean,
@@ -587,6 +632,8 @@ export default class Select<
   state: State<Option, IsMulti, Group> = {
     ariaSelection: null,
     focusedOption: null,
+    focusedOptionId: null,
+    focusableOptionsWithIds: [],
     focusedValue: null,
     inputIsHidden: false,
     isFocused: false,
@@ -595,6 +642,7 @@ export default class Select<
     prevWasFocused: false,
     inputIsHiddenAfterUpdate: undefined,
     prevProps: undefined,
+    instancePrefix: '',
   };
 
   // Misc. Instance Properties
@@ -605,10 +653,10 @@ export default class Select<
   commonProps: any; // TODO
   initialTouchX = 0;
   initialTouchY = 0;
-  instancePrefix = '';
   openAfterFocus = false;
   scrollToFocusedOptionOnUpdate = false;
   userIsDragging?: boolean;
+  isAppleDevice = isAppleDevice();
 
   // Refs
   // ------------------------------
@@ -635,15 +683,21 @@ export default class Select<
 
   constructor(props: Props<Option, IsMulti, Group>) {
     super(props);
-    this.instancePrefix =
+    this.state.instancePrefix =
       'react-select-' + (this.props.instanceId || ++instanceId);
     this.state.selectValue = cleanValue(props.value);
-
     // Set focusedOption if menuIsOpen is set on init (e.g. defaultMenuIsOpen)
     if (props.menuIsOpen && this.state.selectValue.length) {
+      const focusableOptionsWithIds: FocusableOptionWithId<Option>[] =
+        this.getFocusableOptionsWithIds();
       const focusableOptions = this.buildFocusableOptions();
       const optionIndex = focusableOptions.indexOf(this.state.selectValue[0]);
+      this.state.focusableOptionsWithIds = focusableOptionsWithIds;
       this.state.focusedOption = focusableOptions[optionIndex];
+      this.state.focusedOptionId = getFocusedOptionId(
+        focusableOptionsWithIds,
+        focusableOptions[optionIndex]
+      );
     }
   }
 
@@ -658,6 +712,7 @@ export default class Select<
       ariaSelection,
       isFocused,
       prevWasFocused,
+      instancePrefix,
     } = state;
     const { options, value, menuIsOpen, inputValue, isMulti } = props;
     const selectValue = cleanValue(value);
@@ -672,13 +727,28 @@ export default class Select<
       const focusableOptions = menuIsOpen
         ? buildFocusableOptions(props, selectValue)
         : [];
+
+      const focusableOptionsWithIds = menuIsOpen
+        ? buildFocusableOptionsWithIds(
+            buildCategorizedOptions(props, selectValue),
+            `${instancePrefix}-option`
+          )
+        : [];
+
       const focusedValue = clearFocusValueOnUpdate
         ? getNextFocusedValue(state, selectValue)
         : null;
       const focusedOption = getNextFocusedOption(state, focusableOptions);
+      const focusedOptionId = getFocusedOptionId(
+        focusableOptionsWithIds,
+        focusedOption
+      );
+
       newMenuOptionsState = {
         selectValue,
         focusedOption,
+        focusedOptionId,
+        focusableOptionsWithIds,
         focusedValue,
         clearFocusValueOnUpdate: false,
       };
@@ -801,6 +871,7 @@ export default class Select<
       action: 'menu-close',
       prevInputValue: this.props.inputValue,
     });
+
     this.props.onMenuClose();
   }
   onInputChange(newValue: string, actionMeta: InputActionMeta) {
@@ -844,6 +915,7 @@ export default class Select<
         inputIsHiddenAfterUpdate: false,
         focusedValue: null,
         focusedOption: focusableOptions[openAtIndex],
+        focusedOptionId: this.getFocusedOptionId(focusableOptions[openAtIndex]),
       },
       () => this.onMenuOpen()
     );
@@ -921,6 +993,7 @@ export default class Select<
     this.setState({
       focusedOption: options[nextFocus],
       focusedValue: null,
+      focusedOptionId: this.getFocusedOptionId(options[nextFocus]),
     });
   }
   onChange = (
@@ -941,7 +1014,9 @@ export default class Select<
     const { closeMenuOnSelect, isMulti, inputValue } = this.props;
     this.onInputChange('', { action: 'set-value', prevInputValue: inputValue });
     if (closeMenuOnSelect) {
-      this.setState({ inputIsHiddenAfterUpdate: !isMulti });
+      this.setState({
+        inputIsHiddenAfterUpdate: !isMulti,
+      });
       this.onMenuClose();
     }
     // when the select value should change, we should reset focusedValue
@@ -1050,6 +1125,20 @@ export default class Select<
     };
   }
 
+  getFocusedOptionId = (focusedOption: Option) => {
+    return getFocusedOptionId(
+      this.state.focusableOptionsWithIds,
+      focusedOption
+    );
+  };
+
+  getFocusableOptionsWithIds = () => {
+    return buildFocusableOptionsWithIds(
+      buildCategorizedOptions(this.props, this.state.selectValue),
+      this.getElementId('option')
+    );
+  };
+
   getValue = () => this.state.selectValue;
 
   cx = (...args: any) => classNames(this.props.classNamePrefix, ...args);
@@ -1114,7 +1203,7 @@ export default class Select<
       | 'placeholder'
       | 'live-region'
   ) => {
-    return `${this.instancePrefix}-${element}`;
+    return `${this.state.instancePrefix}-${element}`;
   };
 
   getComponents = () => {
@@ -1437,7 +1526,13 @@ export default class Select<
     if (this.blockOptionHover || this.state.focusedOption === focusedOption) {
       return;
     }
-    this.setState({ focusedOption });
+    const options = this.getFocusableOptions();
+    const focusedOptionIndex = options.indexOf(focusedOption!);
+    this.setState({
+      focusedOption,
+      focusedOptionId:
+        focusedOptionIndex > -1 ? this.getFocusedOptionId(focusedOption) : null,
+    });
   };
   shouldHideSelectedOptions = () => {
     return shouldHideSelectedOptions(this.props);
@@ -1536,7 +1631,9 @@ export default class Select<
         return;
       case 'Escape':
         if (menuIsOpen) {
-          this.setState({ inputIsHiddenAfterUpdate: false });
+          this.setState({
+            inputIsHiddenAfterUpdate: false,
+          });
           this.onInputChange('', {
             action: 'menu-close',
             prevInputValue: inputValue,
@@ -1624,9 +1721,12 @@ export default class Select<
       'aria-labelledby': this.props['aria-labelledby'],
       'aria-required': required,
       role: 'combobox',
+      'aria-activedescendant': this.isAppleDevice
+        ? undefined
+        : this.state.focusedOptionId || '',
+
       ...(menuIsOpen && {
         'aria-controls': this.getElementId('listbox'),
-        'aria-owns': this.getElementId('listbox'),
       }),
       ...(!isSearchable && {
         'aria-readonly': true,
@@ -1891,6 +1991,8 @@ export default class Select<
         onMouseMove: onHover,
         onMouseOver: onHover,
         tabIndex: -1,
+        role: 'option',
+        'aria-selected': this.isAppleDevice ? undefined : isSelected, // is not supported on Apple devices
       };
 
       return (
@@ -1970,7 +2072,6 @@ export default class Select<
             innerProps={{
               onMouseDown: this.onMenuMouseDown,
               onMouseMove: this.onMenuMouseMove,
-              id: this.getElementId('listbox'),
             }}
             isLoading={isLoading}
             placement={placement}
@@ -1988,6 +2089,11 @@ export default class Select<
                     this.getMenuListRef(instance);
                     scrollTargetRef(instance);
                   }}
+                  innerProps={{
+                    role: 'listbox',
+                    'aria-multiselectable': commonProps.isMulti,
+                    id: this.getElementId('listbox'),
+                  }}
                   isLoading={isLoading}
                   maxHeight={maxHeight}
                   focusedOption={focusedOption}
@@ -2079,6 +2185,7 @@ export default class Select<
         isFocused={isFocused}
         selectValue={selectValue}
         focusableOptions={focusableOptions}
+        isAppleDevice={this.isAppleDevice}
       />
     );
   }
diff --git a/packages/react-select/src/__tests__/Select.test.tsx b/packages/react-select/src/__tests__/Select.test.tsx
index 3bb1039c5a..740935512a 100644
--- a/packages/react-select/src/__tests__/Select.test.tsx
+++ b/packages/react-select/src/__tests__/Select.test.tsx
@@ -7,9 +7,11 @@ import {
   OPTIONS,
   OPTIONS_ACCENTED,
   OPTIONS_NUMBER_VALUE,
+  OPTIONS_GROUPED,
   OPTIONS_BOOLEAN_VALUE,
   OPTIONS_DISABLED,
   Option,
+  GroupedOption,
   OptionNumberValue,
   OptionBooleanValue,
 } from './constants';
@@ -1952,40 +1954,263 @@ test('multi select > clicking on X next to option will call onChange with all op
   );
 });
 
-/**
- * TODO: Need to get highlight a menu option and then match value with aria-activedescendant prop
- */
 cases(
-  'accessibility > aria-activedescendant',
-  ({ props = { ...BASIC_PROPS } }) => {
-    let { container } = render(<Select {...props} menuIsOpen />);
+  'accessibility > aria-activedescendant for basic options',
+  (props: BasicProps) => {
+    const renderProps = {
+      ...props,
+      instanceId: 1000,
+      value: BASIC_PROPS.options[2],
+      menuIsOpen: true,
+      hideSelectedOptions: false,
+    };
+
+    const { container, rerender } = render(<Select {...renderProps} />);
+
+    // aria-activedescendant should be set if menu is open initially and selected options are not hidden
+    expect(
+      container
+        .querySelector('input.react-select__input')!
+        .getAttribute('aria-activedescendant')
+    ).toBe('react-select-1000-option-2');
 
+    // aria-activedescendant is updated during keyboard navigation
     fireEvent.keyDown(container.querySelector('.react-select__menu')!, {
       keyCode: 40,
       key: 'ArrowDown',
     });
+
+    expect(
+      container
+        .querySelector('input.react-select__input')!
+        .getAttribute('aria-activedescendant')
+    ).toBe('react-select-1000-option-3');
+
+    fireEvent.keyDown(container.querySelector('.react-select__menu')!, {
+      keyCode: 38,
+      key: 'ArrowUp',
+    });
+
+    expect(
+      container
+        .querySelector('input.react-select__input')!
+        .getAttribute('aria-activedescendant')
+    ).toBe('react-select-1000-option-2');
+
+    fireEvent.keyDown(container.querySelector('.react-select__menu')!, {
+      keyCode: 36,
+      key: 'Home',
+    });
+
+    expect(
+      container
+        .querySelector('input.react-select__input')!
+        .getAttribute('aria-activedescendant')
+    ).toBe('react-select-1000-option-0');
+
+    fireEvent.keyDown(container.querySelector('.react-select__menu')!, {
+      keyCode: 35,
+      key: 'End',
+    });
+
+    expect(
+      container
+        .querySelector('input.react-select__input')!
+        .getAttribute('aria-activedescendant')
+    ).toBe('react-select-1000-option-16');
+
+    rerender(<Select {...renderProps} menuIsOpen={false} />);
+
+    expect(
+      container
+        .querySelector('input.react-select__input')!
+        .getAttribute('aria-activedescendant')
+    ).toBe('');
+
+    // searching should update activedescendant
+    rerender(<Select {...renderProps} isSearchable />);
+
+    const setInputValue = (val: string) => {
+      rerender(<Select {...renderProps} autoFocus inputValue={val} />);
+    };
+
+    setInputValue('four');
+
+    expect(
+      container
+        .querySelector('input.react-select__input')!
+        .getAttribute('aria-activedescendant')
+    ).toBe('react-select-1000-option-4');
+
+    setInputValue('fourt');
+
     expect(
       container
         .querySelector('input.react-select__input')!
         .getAttribute('aria-activedescendant')
-    ).toBe('1');
+    ).toBe('react-select-1000-option-14');
+
+    setInputValue('fourt1');
+
+    expect(
+      container
+        .querySelector('input.react-select__input')!
+        .getAttribute('aria-activedescendant')
+    ).toBe('');
   },
   {
     'single select > should update aria-activedescendant as per focused option':
       {
-        skip: true,
+        ...BASIC_PROPS,
       },
     'multi select > should update aria-activedescendant as per focused option':
       {
-        skip: true,
-        props: {
-          ...BASIC_PROPS,
-          value: { label: '2', value: 'two' },
-        },
+        ...BASIC_PROPS,
+        isMulti: true,
+      },
+  }
+);
+
+cases(
+  'accessibility > aria-activedescendant for grouped options',
+  (props: BasicProps) => {
+    const renderProps = {
+      ...props,
+      instanceId: 1000,
+      options: OPTIONS_GROUPED,
+      value: OPTIONS_GROUPED[0].options[2],
+      menuIsOpen: true,
+      hideSelectedOptions: false,
+    };
+
+    let { container, rerender } = render(
+      <Select<OptionNumberValue | OptionBooleanValue, false, GroupedOption>
+        {...renderProps}
+      />
+    );
+
+    // aria-activedescendant should be set if menu is open initially and selected options are not hidden
+    expect(
+      container
+        .querySelector('input.react-select__input')!
+        .getAttribute('aria-activedescendant')
+    ).toBe('react-select-1000-option-0-2');
+
+    // aria-activedescendant is updated during keyboard navigation
+    fireEvent.keyDown(container.querySelector('.react-select__menu')!, {
+      keyCode: 40,
+      key: 'ArrowDown',
+    });
+
+    expect(
+      container
+        .querySelector('input.react-select__input')!
+        .getAttribute('aria-activedescendant')
+    ).toBe('react-select-1000-option-0-3');
+
+    fireEvent.keyDown(container.querySelector('.react-select__menu')!, {
+      keyCode: 38,
+      key: 'ArrowUp',
+    });
+
+    expect(
+      container
+        .querySelector('input.react-select__input')!
+        .getAttribute('aria-activedescendant')
+    ).toBe('react-select-1000-option-0-2');
+
+    fireEvent.keyDown(container.querySelector('.react-select__menu')!, {
+      keyCode: 36,
+      key: 'Home',
+    });
+
+    expect(
+      container
+        .querySelector('input.react-select__input')!
+        .getAttribute('aria-activedescendant')
+    ).toBe('react-select-1000-option-0-0');
+
+    fireEvent.keyDown(container.querySelector('.react-select__menu')!, {
+      keyCode: 35,
+      key: 'End',
+    });
+
+    expect(
+      container
+        .querySelector('input.react-select__input')!
+        .getAttribute('aria-activedescendant')
+    ).toBe('react-select-1000-option-1-1');
+
+    rerender(<Select {...renderProps} menuIsOpen={false} />);
+
+    expect(
+      container
+        .querySelector('input.react-select__input')!
+        .getAttribute('aria-activedescendant')
+    ).toBe('');
+
+    // searching should update activedescendant
+    rerender(<Select {...renderProps} isSearchable />);
+
+    const setInputValue = (val: string) => {
+      rerender(<Select {...renderProps} autoFocus inputValue={val} />);
+    };
+
+    setInputValue('1');
+
+    expect(
+      container
+        .querySelector('input.react-select__input')!
+        .getAttribute('aria-activedescendant')
+    ).toBe('react-select-1000-option-0-1');
+
+    setInputValue('10');
+
+    expect(
+      container
+        .querySelector('input.react-select__input')!
+        .getAttribute('aria-activedescendant')
+    ).toBe('react-select-1000-option-0-10');
+
+    setInputValue('102');
+
+    expect(
+      container
+        .querySelector('input.react-select__input')!
+        .getAttribute('aria-activedescendant')
+    ).toBe('');
+  },
+  {
+    'single select > should update aria-activedescendant as per focused option':
+      {
+        ...BASIC_PROPS,
+      },
+    'multi select > should update aria-activedescendant as per focused option':
+      {
+        ...BASIC_PROPS,
+        isMulti: true,
       },
   }
 );
 
+test('accessibility > aria-activedescendant should not exist if hideSelectedOptions=true', () => {
+  const { container } = render(
+    <Select
+      {...BASIC_PROPS}
+      instanceId="1000"
+      value={BASIC_PROPS.options[2]}
+      isMulti
+      menuIsOpen
+    />
+  );
+
+  expect(
+    container
+      .querySelector('input.react-select__input')!
+      .getAttribute('aria-activedescendant')
+  ).toBe('');
+});
+
 cases(
   'accessibility > passes through aria-labelledby prop',
   ({ props = { ...BASIC_PROPS, 'aria-labelledby': 'testing' } }) => {
@@ -2083,25 +2308,25 @@ test('accessibility > to show the number of options available in A11yText when t
     rerender(<Select {...BASIC_PROPS} autoFocus menuIsOpen inputValue={val} />);
   };
 
-  const liveRegionId = '#aria-context';
+  const liveRegionResultsId = '#aria-results';
   fireEvent.focus(container.querySelector('input.react-select__input')!);
 
-  expect(container.querySelector(liveRegionId)!.textContent).toMatch(
+  expect(container.querySelector(liveRegionResultsId)!.textContent).toMatch(
     /17 results available/
   );
 
   setInputValue('0');
-  expect(container.querySelector(liveRegionId)!.textContent).toMatch(
+  expect(container.querySelector(liveRegionResultsId)!.textContent).toMatch(
     /2 results available/
   );
 
   setInputValue('10');
-  expect(container.querySelector(liveRegionId)!.textContent).toMatch(
+  expect(container.querySelector(liveRegionResultsId)!.textContent).toMatch(
     /1 result available/
   );
 
   setInputValue('100');
-  expect(container.querySelector(liveRegionId)!.textContent).toMatch(
+  expect(container.querySelector(liveRegionResultsId)!.textContent).toMatch(
     /0 results available/
   );
 });
@@ -2115,7 +2340,6 @@ test('accessibility > interacting with disabled options shows correct A11yText',
       menuIsOpen
     />
   );
-  const liveRegionId = '#aria-context';
   const liveRegionEventId = '#aria-selection';
   fireEvent.focus(container.querySelector('input.react-select__input')!);
 
@@ -2124,10 +2348,6 @@ test('accessibility > interacting with disabled options shows correct A11yText',
   fireEvent.keyDown(menu!, { keyCode: 40, key: 'ArrowDown' });
   fireEvent.keyDown(menu!, { keyCode: 40, key: 'ArrowDown' });
 
-  expect(container.querySelector(liveRegionId)!.textContent).toMatch(
-    'option 1 focused disabled, 2 of 17. 17 results available. Use Up and Down to choose options, press Escape to exit the menu, press Tab to select the option and exit the menu.'
-  );
-
   // attempt to select disabled option
   fireEvent.keyDown(container.querySelector('.react-select__menu')!, {
     keyCode: 13,
@@ -2154,40 +2374,37 @@ test('accessibility > interacting with multi values options shows correct A11yTe
     rerender(<Select {...renderProps} menuIsOpen />);
   };
 
-  const liveRegionId = '#aria-context';
+  const liveRegionGuidanceId = '#aria-guidance';
+  const liveRegionFocusedId = '#aria-focused';
   let input = container.querySelector('.react-select__value-container input')!;
 
   fireEvent.focus(container.querySelector('input.react-select__input')!);
 
-  expect(container.querySelector(liveRegionId)!.textContent).toMatch(
-    ' Select is focused ,type to refine list, press Down to open the menu,  press left to focus selected values'
+  expect(container.querySelector(liveRegionGuidanceId)!.textContent).toMatch(
+    'Select is focused ,type to refine list, press Down to open the menu,  press left to focus selected values'
   );
 
   fireEvent.keyDown(input, { keyCode: 37, key: 'ArrowLeft' });
-  expect(container.querySelector(liveRegionId)!.textContent).toMatch(
-    'value 1 focused, 2 of 2.  Use left and right to toggle between focused values, press Backspace to remove the currently focused value'
+  expect(container.querySelector(liveRegionFocusedId)!.textContent).toMatch(
+    'value 1 focused, 2 of 2.'
+  );
+  expect(container.querySelector(liveRegionGuidanceId)!.textContent).toMatch(
+    'Use left and right to toggle between focused values, press Backspace to remove the currently focused value'
   );
 
   fireEvent.keyDown(input, { keyCode: 37, key: 'ArrowLeft' });
-  expect(container.querySelector(liveRegionId)!.textContent).toMatch(
-    'value 0 focused, 1 of 2.  Use left and right to toggle between focused values, press Backspace to remove the currently focused value'
+  expect(container.querySelector(liveRegionFocusedId)!.textContent).toMatch(
+    'value 0 focused, 1 of 2.'
   );
-
-  openMenu();
-  let menu = container.querySelector('.react-select__menu')!;
-
-  expect(container.querySelector(liveRegionId)!.textContent).toMatch(
-    'option 0 selected, 1 of 17. 17 results available. Use Up and Down to choose options, press Enter to select the currently focused option, press Escape to exit the menu, press Tab to select the option and exit the menu.'
+  expect(container.querySelector(liveRegionGuidanceId)!.textContent).toMatch(
+    'Use left and right to toggle between focused values, press Backspace to remove the currently focused value'
   );
 
-  fireEvent.keyDown(menu, { keyCode: 40, key: 'ArrowDown' });
-  expect(container.querySelector(liveRegionId)!.textContent).toMatch(
-    'option 1 selected disabled, 2 of 17. 17 results available. Use Up and Down to choose options, press Escape to exit the menu, press Tab to select the option and exit the menu.'
-  );
+  openMenu();
 
-  fireEvent.keyDown(menu, { keyCode: 40, key: 'ArrowDown' });
-  expect(container.querySelector(liveRegionId)!.textContent).toMatch(
-    'option 2 focused, 3 of 17. 17 results available. Use Up and Down to choose options, press Enter to select the currently focused option, press Escape to exit the menu, press Tab to select the option and exit the menu.'
+  // user will be notified if option is disabled by screen reader because of correct aria-attributes, so this message will be announce only once after menu opens
+  expect(container.querySelector(liveRegionGuidanceId)!.textContent).toMatch(
+    'Use Up and Down to choose options, press Enter to select the currently focused option, press Escape to exit the menu, press Tab to select the option and exit the menu.'
   );
 });
 
@@ -2195,7 +2412,7 @@ test('accessibility > screenReaderStatus function prop > to pass custom text to
   const screenReaderStatus = ({ count }: { count: number }) =>
     `There are ${count} options available`;
 
-  const liveRegionId = '#aria-context';
+  const liveRegionResultsId = '#aria-results';
   let { container, rerender } = render(
     <Select
       {...BASIC_PROPS}
@@ -2218,22 +2435,22 @@ test('accessibility > screenReaderStatus function prop > to pass custom text to
 
   fireEvent.focus(container.querySelector('input.react-select__input')!);
 
-  expect(container.querySelector(liveRegionId)!.textContent).toMatch(
+  expect(container.querySelector(liveRegionResultsId)!.textContent).toMatch(
     'There are 17 options available'
   );
 
   setInputValue('0');
-  expect(container.querySelector(liveRegionId)!.textContent).toMatch(
+  expect(container.querySelector(liveRegionResultsId)!.textContent).toMatch(
     'There are 2 options available'
   );
 
   setInputValue('10');
-  expect(container.querySelector(liveRegionId)!.textContent).toMatch(
+  expect(container.querySelector(liveRegionResultsId)!.textContent).toMatch(
     'There are 1 options available'
   );
 
   setInputValue('100');
-  expect(container.querySelector(liveRegionId)!.textContent).toMatch(
+  expect(container.querySelector(liveRegionResultsId)!.textContent).toMatch(
     'There are 0 options available'
   );
 });
@@ -2282,7 +2499,7 @@ test('accessibility > announces already selected values when focused', () => {
     <Select {...BASIC_PROPS} options={OPTIONS} value={OPTIONS[0]} />
   );
   const liveRegionSelectionId = '#aria-selection';
-  const liveRegionContextId = '#aria-context';
+  const liveRegionContextId = '#aria-guidance';
 
   // the live region should not be mounted yet
   expect(container.querySelector(liveRegionSelectionId)!).toBeNull();
@@ -2290,7 +2507,7 @@ test('accessibility > announces already selected values when focused', () => {
   fireEvent.focus(container.querySelector('input.react-select__input')!);
 
   expect(container.querySelector(liveRegionContextId)!.textContent).toMatch(
-    ' Select is focused ,type to refine list, press Down to open the menu, '
+    'Select is focused ,type to refine list, press Down to open the menu, '
   );
   expect(container.querySelector(liveRegionSelectionId)!.textContent).toMatch(
     'option 0, selected.'
diff --git a/packages/react-select/src/__tests__/__snapshots__/Async.test.tsx.snap b/packages/react-select/src/__tests__/__snapshots__/Async.test.tsx.snap
index 869c353ee5..b304477288 100644
--- a/packages/react-select/src/__tests__/__snapshots__/Async.test.tsx.snap
+++ b/packages/react-select/src/__tests__/__snapshots__/Async.test.tsx.snap
@@ -174,6 +174,7 @@ exports[`defaults - snapshot 1`] = `
       aria-live="polite"
       aria-relevant="additions text"
       class="emotion-1"
+      role="log"
     />
     <div
       class=" emotion-3"
@@ -192,6 +193,7 @@ exports[`defaults - snapshot 1`] = `
           data-value=""
         >
           <input
+            aria-activedescendant=""
             aria-autocomplete="list"
             aria-describedby="react-select-2-placeholder"
             aria-expanded="false"
diff --git a/packages/react-select/src/__tests__/__snapshots__/AsyncCreatable.test.tsx.snap b/packages/react-select/src/__tests__/__snapshots__/AsyncCreatable.test.tsx.snap
index 869c353ee5..b304477288 100644
--- a/packages/react-select/src/__tests__/__snapshots__/AsyncCreatable.test.tsx.snap
+++ b/packages/react-select/src/__tests__/__snapshots__/AsyncCreatable.test.tsx.snap
@@ -174,6 +174,7 @@ exports[`defaults - snapshot 1`] = `
       aria-live="polite"
       aria-relevant="additions text"
       class="emotion-1"
+      role="log"
     />
     <div
       class=" emotion-3"
@@ -192,6 +193,7 @@ exports[`defaults - snapshot 1`] = `
           data-value=""
         >
           <input
+            aria-activedescendant=""
             aria-autocomplete="list"
             aria-describedby="react-select-2-placeholder"
             aria-expanded="false"
diff --git a/packages/react-select/src/__tests__/__snapshots__/Creatable.test.tsx.snap b/packages/react-select/src/__tests__/__snapshots__/Creatable.test.tsx.snap
index 869c353ee5..b304477288 100644
--- a/packages/react-select/src/__tests__/__snapshots__/Creatable.test.tsx.snap
+++ b/packages/react-select/src/__tests__/__snapshots__/Creatable.test.tsx.snap
@@ -174,6 +174,7 @@ exports[`defaults - snapshot 1`] = `
       aria-live="polite"
       aria-relevant="additions text"
       class="emotion-1"
+      role="log"
     />
     <div
       class=" emotion-3"
@@ -192,6 +193,7 @@ exports[`defaults - snapshot 1`] = `
           data-value=""
         >
           <input
+            aria-activedescendant=""
             aria-autocomplete="list"
             aria-describedby="react-select-2-placeholder"
             aria-expanded="false"
diff --git a/packages/react-select/src/__tests__/__snapshots__/Select.test.tsx.snap b/packages/react-select/src/__tests__/__snapshots__/Select.test.tsx.snap
index d0dc6571da..95d4fe295d 100644
--- a/packages/react-select/src/__tests__/__snapshots__/Select.test.tsx.snap
+++ b/packages/react-select/src/__tests__/__snapshots__/Select.test.tsx.snap
@@ -174,6 +174,7 @@ exports[`snapshot - defaults 1`] = `
       aria-live="polite"
       aria-relevant="additions text"
       class="emotion-1"
+      role="log"
     />
     <div
       class=" emotion-3"
@@ -192,6 +193,7 @@ exports[`snapshot - defaults 1`] = `
           data-value=""
         >
           <input
+            aria-activedescendant=""
             aria-autocomplete="list"
             aria-describedby="react-select-2-placeholder"
             aria-expanded="false"
diff --git a/packages/react-select/src/__tests__/__snapshots__/StateManaged.test.tsx.snap b/packages/react-select/src/__tests__/__snapshots__/StateManaged.test.tsx.snap
index e992b60181..66836e4a95 100644
--- a/packages/react-select/src/__tests__/__snapshots__/StateManaged.test.tsx.snap
+++ b/packages/react-select/src/__tests__/__snapshots__/StateManaged.test.tsx.snap
@@ -174,6 +174,7 @@ exports[`defaults > snapshot 1`] = `
       aria-live="polite"
       aria-relevant="additions text"
       class="emotion-1"
+      role="log"
     />
     <div
       class=" emotion-3"
@@ -192,6 +193,7 @@ exports[`defaults > snapshot 1`] = `
           data-value=""
         >
           <input
+            aria-activedescendant=""
             aria-autocomplete="list"
             aria-describedby="react-select-2-placeholder"
             aria-expanded="false"
diff --git a/packages/react-select/src/__tests__/constants.ts b/packages/react-select/src/__tests__/constants.ts
index ac23402724..7c4e1ca9f2 100644
--- a/packages/react-select/src/__tests__/constants.ts
+++ b/packages/react-select/src/__tests__/constants.ts
@@ -87,3 +87,21 @@ export const OPTIONS_ACCENTED: readonly OptionAccented[] = [
   { label: 'school', value: 'en' },
   { label: 'école', value: 'fr' },
 ];
+
+export interface GroupedOption {
+  readonly label: string;
+  readonly options:
+    | readonly OptionNumberValue[]
+    | readonly OptionBooleanValue[];
+}
+
+export const OPTIONS_GROUPED: readonly GroupedOption[] = [
+  {
+    label: 'Numbers',
+    options: OPTIONS_NUMBER_VALUE,
+  },
+  {
+    label: 'Booleans',
+    options: OPTIONS_BOOLEAN_VALUE,
+  },
+];
diff --git a/packages/react-select/src/accessibility/helpers.ts b/packages/react-select/src/accessibility/helpers.ts
new file mode 100644
index 0000000000..9331e3e16b
--- /dev/null
+++ b/packages/react-select/src/accessibility/helpers.ts
@@ -0,0 +1,33 @@
+/// <reference types="user-agent-data-types" />
+
+function testPlatform(re: RegExp) {
+  return typeof window !== 'undefined' && window.navigator != null
+    ? re.test(
+        window.navigator['userAgentData']?.platform || window.navigator.platform
+      )
+    : false;
+}
+
+export function isIPhone() {
+  return testPlatform(/^iPhone/i);
+}
+
+export function isMac() {
+  return testPlatform(/^Mac/i);
+}
+
+export function isIPad() {
+  return (
+    testPlatform(/^iPad/i) ||
+    // iPadOS 13 lies and says it's a Mac, but we can distinguish by detecting touch support.
+    (isMac() && navigator.maxTouchPoints > 1)
+  );
+}
+
+export function isIOS() {
+  return isIPhone() || isIPad();
+}
+
+export function isAppleDevice() {
+  return isMac() || isIOS();
+}
diff --git a/packages/react-select/src/accessibility/index.ts b/packages/react-select/src/accessibility/index.ts
index 637783ed48..0a29be42c0 100644
--- a/packages/react-select/src/accessibility/index.ts
+++ b/packages/react-select/src/accessibility/index.ts
@@ -33,6 +33,8 @@ export interface AriaGuidanceProps {
   isDisabled: boolean | null;
   /** Boolean value of selectProp tabSelectsValue */
   tabSelectsValue: boolean;
+  /** Boolean value indicating if user focused the input for the first time */
+  isInitialFocus: boolean;
 }
 
 export type AriaOnChangeProps<Option, IsMulti extends boolean> = AriaSelection<
@@ -69,6 +71,8 @@ export interface AriaOnFocusProps<Option, Group extends GroupBase<Option>> {
   options: OptionsOrGroups<Option, Group>;
   /** selected option(s) of the Select */
   selectValue: Options<Option>;
+  /** Boolean indicating whether user uses Apple device */
+  isAppleDevice: boolean;
 }
 
 export type AriaGuidance = (props: AriaGuidanceProps) => string;
@@ -98,25 +102,23 @@ export interface AriaLiveMessages<
 
 export const defaultAriaLiveMessages = {
   guidance: (props: AriaGuidanceProps) => {
-    const { isSearchable, isMulti, isDisabled, tabSelectsValue, context } =
+    const { isSearchable, isMulti, tabSelectsValue, context, isInitialFocus } =
       props;
     switch (context) {
       case 'menu':
-        return `Use Up and Down to choose options${
-          isDisabled
-            ? ''
-            : ', press Enter to select the currently focused option'
-        }, press Escape to exit the menu${
+        return `Use Up and Down to choose options, press Enter to select the currently focused option, press Escape to exit the menu${
           tabSelectsValue
             ? ', press Tab to select the option and exit the menu'
             : ''
         }.`;
       case 'input':
-        return `${props['aria-label'] || 'Select'} is focused ${
-          isSearchable ? ',type to refine list' : ''
-        }, press Down to open the menu, ${
-          isMulti ? ' press left to focus selected values' : ''
-        }`;
+        return isInitialFocus
+          ? `${props['aria-label'] || 'Select'} is focused ${
+              isSearchable ? ',type to refine list' : ''
+            }, press Down to open the menu, ${
+              isMulti ? ' press left to focus selected values' : ''
+            }`
+          : '';
       case 'value':
         return 'Use left and right to toggle between focused values, press Backspace to remove the currently focused value';
       default:
@@ -159,6 +161,7 @@ export const defaultAriaLiveMessages = {
       selectValue,
       isDisabled,
       isSelected,
+      isAppleDevice,
     } = props;
 
     const getArrayIndex = (arr: OptionsOrGroups<Option, Group>, item: Option) =>
@@ -168,10 +171,10 @@ export const defaultAriaLiveMessages = {
       return `value ${label} focused, ${getArrayIndex(selectValue, focused)}.`;
     }
 
-    if (context === 'menu') {
+    if (context === 'menu' && isAppleDevice) {
       const disabled = isDisabled ? ' disabled' : '';
-      const status = `${isSelected ? 'selected' : 'focused'}${disabled}`;
-      return `option ${label} ${status}, ${getArrayIndex(options, focused)}.`;
+      const status = `${isSelected ? ' selected' : ''}${disabled}`;
+      return `${label}${status}, ${getArrayIndex(options, focused)}.`;
     }
     return '';
   },
diff --git a/packages/react-select/src/components/LiveRegion.tsx b/packages/react-select/src/components/LiveRegion.tsx
index a22b133da6..463fe01fc5 100644
--- a/packages/react-select/src/components/LiveRegion.tsx
+++ b/packages/react-select/src/components/LiveRegion.tsx
@@ -25,6 +25,7 @@ export interface LiveRegionProps<
   focusableOptions: Options<Option>;
   isFocused: boolean;
   id: string;
+  isAppleDevice: boolean;
 }
 
 const LiveRegion = <
@@ -43,6 +44,7 @@ const LiveRegion = <
     selectValue,
     selectProps,
     id,
+    isAppleDevice,
   } = props;
 
   const {
@@ -56,6 +58,7 @@ const LiveRegion = <
     options,
     screenReaderStatus,
     tabSelectsValue,
+    isLoading,
   } = selectProps;
   const ariaLabel = selectProps['aria-label'];
   const ariaLive = selectProps['aria-live'];
@@ -125,6 +128,7 @@ const LiveRegion = <
         context:
           focused === focusedOption ? ('menu' as const) : ('value' as const),
         selectValue,
+        isAppleDevice,
       };
 
       focusMsg = messages.onFocus(onFocusProps);
@@ -138,11 +142,12 @@ const LiveRegion = <
     messages,
     focusableOptions,
     selectValue,
+    isAppleDevice,
   ]);
 
   const ariaResults = useMemo(() => {
     let resultsMsg = '';
-    if (menuIsOpen && options.length && messages.onFilter) {
+    if (menuIsOpen && options.length && !isLoading && messages.onFilter) {
       const resultsMessage = screenReaderStatus({
         count: focusableOptions.length,
       });
@@ -156,8 +161,11 @@ const LiveRegion = <
     messages,
     options,
     screenReaderStatus,
+    isLoading,
   ]);
 
+  const isInitialFocus = ariaSelection?.action === 'initial-input-focus';
+
   const ariaGuidance = useMemo(() => {
     let guidanceMsg = '';
     if (messages.guidance) {
@@ -170,6 +178,7 @@ const LiveRegion = <
         isMulti,
         isSearchable,
         tabSelectsValue,
+        isInitialFocus,
       });
     }
     return guidanceMsg;
@@ -184,19 +193,18 @@ const LiveRegion = <
     messages,
     selectValue,
     tabSelectsValue,
+    isInitialFocus,
   ]);
 
-  const ariaContext = `${ariaFocused} ${ariaResults} ${ariaGuidance}`;
-
   const ScreenReaderText = (
     <Fragment>
       <span id="aria-selection">{ariaSelected}</span>
-      <span id="aria-context">{ariaContext}</span>
+      <span id="aria-focused">{ariaFocused}</span>
+      <span id="aria-results">{ariaResults}</span>
+      <span id="aria-guidance">{ariaGuidance}</span>
     </Fragment>
   );
 
-  const isInitialFocus = ariaSelection?.action === 'initial-input-focus';
-
   return (
     <Fragment>
       {/* We use 'aria-describedby' linked to this component for the initial focus */}
@@ -206,6 +214,7 @@ const LiveRegion = <
         aria-live={ariaLive}
         aria-atomic="false"
         aria-relevant="additions text"
+        role="log"
       >
         {isFocused && !isInitialFocus && ScreenReaderText}
       </A11yText>
diff --git a/yarn.lock b/yarn.lock
index 2f85710693..7bc6a7d6e7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -17683,6 +17683,11 @@ use@^3.1.0:
   resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"
   integrity sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==
 
+user-agent-data-types@^0.4.2:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/user-agent-data-types/-/user-agent-data-types-0.4.2.tgz#3bbd3662022c3fb9d0c2f7449b6cdd412a3f9e0d"
+  integrity sha512-jXep3kO/dGNmDOkbDa8ccp4QArgxR4I76m3QVcJ1aOF0B9toc+YtSXtX5gLdDTZXyWlpQYQrABr6L1L2GZOghw==
+
 util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"

From 17ab36ec89e6e2b05071cdafecb44421f1e91334 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Mon, 6 Nov 2023 01:36:54 -0800
Subject: [PATCH 3/6] Version Packages (#5797)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/blue-kings-serve.md     | 14 --------------
 packages/react-select/CHANGELOG.md | 16 ++++++++++++++++
 packages/react-select/package.json |  2 +-
 3 files changed, 17 insertions(+), 15 deletions(-)
 delete mode 100644 .changeset/blue-kings-serve.md

diff --git a/.changeset/blue-kings-serve.md b/.changeset/blue-kings-serve.md
deleted file mode 100644
index 4376283c77..0000000000
--- a/.changeset/blue-kings-serve.md
+++ /dev/null
@@ -1,14 +0,0 @@
----
-'react-select': minor
----
-
-1. Added 'aria-activedescendant' for input and functionality to calculate it;
-2. Added role 'option' and 'aria-selected' for option;
-3. Added role 'listbox' for menu;
-4. Added tests for 'aria-activedescendant';
-5. Changes in aria-live region:
-
-- the instructions how to use select will be announced only one time when user focuses the input for the first time.
-- instructions for menu or selected value will be announced only once after focusing them.
-- removed aria-live for focused option because currently with correct aria-attributes it will be announced by screenreader natively as well as the status of this option (active or disabled).
-- separated ariaContext into ariaFocused, ariaResults, ariaGuidance to avoid announcing redundant information and higlight only current change.
diff --git a/packages/react-select/CHANGELOG.md b/packages/react-select/CHANGELOG.md
index a00c78f411..a0efd2108e 100644
--- a/packages/react-select/CHANGELOG.md
+++ b/packages/react-select/CHANGELOG.md
@@ -1,5 +1,21 @@
 # react-select
 
+## 5.8.0
+
+### Minor Changes
+
+- [`884f1c42`](https://github.com/JedWatson/react-select/commit/884f1c42549faad7cb210169223b427ad6f0c9fd) [#5758](https://github.com/JedWatson/react-select/pull/5758) Thanks [@Ke1sy](https://github.com/Ke1sy)! - 1. Added 'aria-activedescendant' for input and functionality to calculate it;
+
+  2. Added role 'option' and 'aria-selected' for option;
+  3. Added role 'listbox' for menu;
+  4. Added tests for 'aria-activedescendant';
+  5. Changes in aria-live region:
+
+  - the instructions how to use select will be announced only one time when user focuses the input for the first time.
+  - instructions for menu or selected value will be announced only once after focusing them.
+  - removed aria-live for focused option because currently with correct aria-attributes it will be announced by screenreader natively as well as the status of this option (active or disabled).
+  - separated ariaContext into ariaFocused, ariaResults, ariaGuidance to avoid announcing redundant information and higlight only current change.
+
 ## 5.7.7
 
 ### Patch Changes
diff --git a/packages/react-select/package.json b/packages/react-select/package.json
index 6d4ae7bde6..05869f8e41 100644
--- a/packages/react-select/package.json
+++ b/packages/react-select/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-select",
-  "version": "5.7.7",
+  "version": "5.8.0",
   "description": "A Select control built with and for ReactJS",
   "main": "dist/react-select.cjs.js",
   "module": "dist/react-select.esm.js",

From 06e34882638d1526b9f5a1238bb567a3e9460ce5 Mon Sep 17 00:00:00 2001
From: Vivi <89691274+givvemee@users.noreply.github.com>
Date: Fri, 10 Nov 2023 22:49:42 +0900
Subject: [PATCH 4/6] [fix] removed typo (#5627)

---
 docs/pages/typescript/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/pages/typescript/index.tsx b/docs/pages/typescript/index.tsx
index 01968c279e..f296b03e20 100644
--- a/docs/pages/typescript/index.tsx
+++ b/docs/pages/typescript/index.tsx
@@ -84,7 +84,7 @@ const onChange = (option: readonly Option[], actionMeta: ActionMeta<Option>) =>
 }
 ~~~
 
-The \`actionMeta\` parameter is optional. \`ActionMeta\` is a union that is discriminated on the \`action\` type. Take a look at at [types.ts](https://github.com/JedWatson/react-select/blob/master/packages/react-select/src/types.ts) in the source code to see its full definition.
+The \`actionMeta\` parameter is optional. \`ActionMeta\` is a union that is discriminated on the \`action\` type. Take a look at [types.ts](https://github.com/JedWatson/react-select/blob/master/packages/react-select/src/types.ts) in the source code to see its full definition.
 
 ## Custom Select props
 

From dd740cedb29c810a89da4445d4864cd7e63d3aaf Mon Sep 17 00:00:00 2001
From: Leon Aves <leonaves1@gmail.com>
Date: Thu, 19 Sep 2024 15:38:01 +0200
Subject: [PATCH 5/6] Fix pop-value being sent for undefined values. (#5960)

* Fix pop-value being sent for undefined values.

* Fix unit tests.

* Fix linting.

* Add changeset.
---
 .changeset/calm-snakes-collect.md             |  5 +++++
 packages/react-select/src/Select.tsx          | 10 +++++----
 .../src/__tests__/Select.test.tsx             | 21 ++++++++++++++++++-
 3 files changed, 31 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/calm-snakes-collect.md

diff --git a/.changeset/calm-snakes-collect.md b/.changeset/calm-snakes-collect.md
new file mode 100644
index 0000000000..44ded572b2
--- /dev/null
+++ b/.changeset/calm-snakes-collect.md
@@ -0,0 +1,5 @@
+---
+'react-select': patch
+---
+
+No longer send pop-value action when multi-select is empty. This correctly resolves typings with that event, where removedValue cannot be undefined.
diff --git a/packages/react-select/src/Select.tsx b/packages/react-select/src/Select.tsx
index 798f6126b2..fc37056c0b 100644
--- a/packages/react-select/src/Select.tsx
+++ b/packages/react-select/src/Select.tsx
@@ -1096,10 +1096,12 @@ export default class Select<
       newValueArray[0] || null
     );
 
-    this.onChange(newValue, {
-      action: 'pop-value',
-      removedValue: lastSelectedValue,
-    });
+    if (lastSelectedValue) {
+      this.onChange(newValue, {
+        action: 'pop-value',
+        removedValue: lastSelectedValue,
+      });
+    }
   };
 
   // ==============================
diff --git a/packages/react-select/src/__tests__/Select.test.tsx b/packages/react-select/src/__tests__/Select.test.tsx
index 740935512a..0313149095 100644
--- a/packages/react-select/src/__tests__/Select.test.tsx
+++ b/packages/react-select/src/__tests__/Select.test.tsx
@@ -1906,6 +1906,7 @@ test('should call onChange with an array on hitting backspace when backspaceRemo
       isClearable
       isMulti
       onChange={onChangeSpy}
+      value={[OPTIONS[0]]}
     />
   );
   fireEvent.keyDown(container.querySelector('.react-select__control')!, {
@@ -1915,10 +1916,28 @@ test('should call onChange with an array on hitting backspace when backspaceRemo
   expect(onChangeSpy).toHaveBeenCalledWith([], {
     action: 'pop-value',
     name: 'test-input-name',
-    removedValue: undefined,
+    removedValue: OPTIONS[0],
   });
 });
 
+test('should call not call onChange on hitting backspace when backspaceRemovesValue is true and isMulti is true and there are no values', () => {
+  let onChangeSpy = jest.fn();
+  let { container } = render(
+    <Select
+      {...BASIC_PROPS}
+      backspaceRemovesValue
+      isClearable
+      isMulti
+      onChange={onChangeSpy}
+    />
+  );
+  fireEvent.keyDown(container.querySelector('.react-select__control')!, {
+    keyCode: 8,
+    key: 'Backspace',
+  });
+  expect(onChangeSpy).not.toHaveBeenCalled();
+});
+
 test('multi select > clicking on X next to option will call onChange with all options other that the clicked option', () => {
   let onChangeSpy = jest.fn();
   let { container } = render(

From a8b8f4342cc113e921bb238de2dd69a2d345b5f8 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Thu, 19 Sep 2024 09:47:13 -0400
Subject: [PATCH 6/6] Version Packages (#5961)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/calm-snakes-collect.md  | 5 -----
 packages/react-select/CHANGELOG.md | 6 ++++++
 packages/react-select/package.json | 2 +-
 3 files changed, 7 insertions(+), 6 deletions(-)
 delete mode 100644 .changeset/calm-snakes-collect.md

diff --git a/.changeset/calm-snakes-collect.md b/.changeset/calm-snakes-collect.md
deleted file mode 100644
index 44ded572b2..0000000000
--- a/.changeset/calm-snakes-collect.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'react-select': patch
----
-
-No longer send pop-value action when multi-select is empty. This correctly resolves typings with that event, where removedValue cannot be undefined.
diff --git a/packages/react-select/CHANGELOG.md b/packages/react-select/CHANGELOG.md
index a0efd2108e..b35dec3bce 100644
--- a/packages/react-select/CHANGELOG.md
+++ b/packages/react-select/CHANGELOG.md
@@ -1,5 +1,11 @@
 # react-select
 
+## 5.8.1
+
+### Patch Changes
+
+- [`dd740ced`](https://github.com/JedWatson/react-select/commit/dd740cedb29c810a89da4445d4864cd7e63d3aaf) [#5960](https://github.com/JedWatson/react-select/pull/5960) Thanks [@leonaves](https://github.com/leonaves)! - No longer send pop-value action when multi-select is empty. This correctly resolves typings with that event, where removedValue cannot be undefined.
+
 ## 5.8.0
 
 ### Minor Changes
diff --git a/packages/react-select/package.json b/packages/react-select/package.json
index 05869f8e41..442d9e04f5 100644
--- a/packages/react-select/package.json
+++ b/packages/react-select/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-select",
-  "version": "5.8.0",
+  "version": "5.8.1",
   "description": "A Select control built with and for ReactJS",
   "main": "dist/react-select.cjs.js",
   "module": "dist/react-select.esm.js",