From 16414bb53295b362690d2b089d74182ddeabc1dd Mon Sep 17 00:00:00 2001
From: Rall3n <nb.rallen@gmail.com>
Date: Thu, 13 Jul 2023 15:47:25 +0200
Subject: [PATCH 01/12] Resolve `defaultProps` deprecation warning for React
 v18+ (#5689)

* Remove `defaultProps` reference from functional components

* Prettier

* Add changeset

* Change changeset message
---
 .changeset/metal-pens-boil.md                 |  5 ++
 packages/react-select/src/components/Menu.tsx | 48 ++++++++++---------
 .../src/components/indicators.tsx             | 24 ++++++----
 3 files changed, 45 insertions(+), 32 deletions(-)
 create mode 100644 .changeset/metal-pens-boil.md

diff --git a/.changeset/metal-pens-boil.md b/.changeset/metal-pens-boil.md
new file mode 100644
index 0000000000..47b1fa5bbe
--- /dev/null
+++ b/.changeset/metal-pens-boil.md
@@ -0,0 +1,5 @@
+---
+'react-select': patch
+---
+
+Resolve `defaultProps` deprecation warning for React v18+.
diff --git a/packages/react-select/src/components/Menu.tsx b/packages/react-select/src/components/Menu.tsx
index d5cc0a79ad..7483fa045e 100644
--- a/packages/react-select/src/components/Menu.tsx
+++ b/packages/react-select/src/components/Menu.tsx
@@ -498,49 +498,53 @@ export const NoOptionsMessage = <
   Option,
   IsMulti extends boolean,
   Group extends GroupBase<Option>
->(
-  props: NoticeProps<Option, IsMulti, Group>
-) => {
-  const { children, innerProps } = props;
+>({
+  children = 'No options',
+  innerProps,
+  ...restProps
+}: NoticeProps<Option, IsMulti, Group>) => {
   return (
     <div
-      {...getStyleProps(props, 'noOptionsMessage', {
-        'menu-notice': true,
-        'menu-notice--no-options': true,
-      })}
+      {...getStyleProps(
+        { ...restProps, children, innerProps },
+        'noOptionsMessage',
+        {
+          'menu-notice': true,
+          'menu-notice--no-options': true,
+        }
+      )}
       {...innerProps}
     >
       {children}
     </div>
   );
 };
-NoOptionsMessage.defaultProps = {
-  children: 'No options',
-};
 
 export const LoadingMessage = <
   Option,
   IsMulti extends boolean,
   Group extends GroupBase<Option>
->(
-  props: NoticeProps<Option, IsMulti, Group>
-) => {
-  const { children, innerProps } = props;
+>({
+  children = 'Loading...',
+  innerProps,
+  ...restProps
+}: NoticeProps<Option, IsMulti, Group>) => {
   return (
     <div
-      {...getStyleProps(props, 'loadingMessage', {
-        'menu-notice': true,
-        'menu-notice--loading': true,
-      })}
+      {...getStyleProps(
+        { ...restProps, children, innerProps },
+        'loadingMessage',
+        {
+          'menu-notice': true,
+          'menu-notice--loading': true,
+        }
+      )}
       {...innerProps}
     >
       {children}
     </div>
   );
 };
-LoadingMessage.defaultProps = {
-  children: 'Loading...',
-};
 
 // ==============================
 // Menu Portal
diff --git a/packages/react-select/src/components/indicators.tsx b/packages/react-select/src/components/indicators.tsx
index 052cc13c90..51a2ecec28 100644
--- a/packages/react-select/src/components/indicators.tsx
+++ b/packages/react-select/src/components/indicators.tsx
@@ -287,17 +287,22 @@ export const LoadingIndicator = <
   Option,
   IsMulti extends boolean,
   Group extends GroupBase<Option>
->(
-  props: LoadingIndicatorProps<Option, IsMulti, Group>
-) => {
-  const { innerProps, isRtl } = props;
-
+>({
+  innerProps,
+  isRtl,
+  size = 4,
+  ...restProps
+}: LoadingIndicatorProps<Option, IsMulti, Group>) => {
   return (
     <div
-      {...getStyleProps(props, 'loadingIndicator', {
-        indicator: true,
-        'loading-indicator': true,
-      })}
+      {...getStyleProps(
+        { ...restProps, innerProps, isRtl, size },
+        'loadingIndicator',
+        {
+          indicator: true,
+          'loading-indicator': true,
+        }
+      )}
       {...innerProps}
     >
       <LoadingDot delay={0} offset={isRtl} />
@@ -306,4 +311,3 @@ export const LoadingIndicator = <
     </div>
   );
 };
-LoadingIndicator.defaultProps = { size: 4 };

From 011a9d9bb38dfa65ab493927c84f40814f907226 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Thu, 13 Jul 2023 09:56:58 -0400
Subject: [PATCH 02/12] Version Packages (#5702)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/metal-pens-boil.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/metal-pens-boil.md

diff --git a/.changeset/metal-pens-boil.md b/.changeset/metal-pens-boil.md
deleted file mode 100644
index 47b1fa5bbe..0000000000
--- a/.changeset/metal-pens-boil.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'react-select': patch
----
-
-Resolve `defaultProps` deprecation warning for React v18+.
diff --git a/packages/react-select/CHANGELOG.md b/packages/react-select/CHANGELOG.md
index 8dabac9e04..cd2f35663c 100644
--- a/packages/react-select/CHANGELOG.md
+++ b/packages/react-select/CHANGELOG.md
@@ -1,5 +1,11 @@
 # react-select
 
+## 5.7.4
+
+### Patch Changes
+
+- [`16414bb5`](https://github.com/JedWatson/react-select/commit/16414bb53295b362690d2b089d74182ddeabc1dd) [#5689](https://github.com/JedWatson/react-select/pull/5689) Thanks [@Rall3n](https://github.com/Rall3n)! - Resolve `defaultProps` deprecation warning for React v18+.
+
 ## 5.7.3
 
 ### Patch Changes
diff --git a/packages/react-select/package.json b/packages/react-select/package.json
index 8e05e4019e..829c4a87b4 100644
--- a/packages/react-select/package.json
+++ b/packages/react-select/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-select",
-  "version": "5.7.3",
+  "version": "5.7.4",
   "description": "A Select control built with and for ReactJS",
   "main": "dist/react-select.cjs.js",
   "module": "dist/react-select.esm.js",

From 9d1730ba4f97a51d25c7e704acd1a4c2be8f7182 Mon Sep 17 00:00:00 2001
From: Adam Szmyd <szmydadam@gmail.com>
Date: Thu, 21 Sep 2023 01:11:11 +0200
Subject: [PATCH 03/12] Make scroll lock div work on a document context it
 belongs to (#5347)

* Make scroll lock div work on a document context it belongs to

* Changeset update
---
 .changeset/nasty-turkeys-rescue.md                   |  5 +++++
 packages/react-select/src/internal/ScrollManager.tsx | 11 ++++++++---
 2 files changed, 13 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/nasty-turkeys-rescue.md

diff --git a/.changeset/nasty-turkeys-rescue.md b/.changeset/nasty-turkeys-rescue.md
new file mode 100644
index 0000000000..16dd369264
--- /dev/null
+++ b/.changeset/nasty-turkeys-rescue.md
@@ -0,0 +1,5 @@
+---
+'react-select': patch
+---
+
+Make scroll lock div work on a document context it belongs to
diff --git a/packages/react-select/src/internal/ScrollManager.tsx b/packages/react-select/src/internal/ScrollManager.tsx
index 802ab1e76f..4e1440008f 100644
--- a/packages/react-select/src/internal/ScrollManager.tsx
+++ b/packages/react-select/src/internal/ScrollManager.tsx
@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
-import { Fragment, ReactElement, RefCallback } from 'react';
+import { Fragment, ReactElement, RefCallback, MouseEvent } from 'react';
 import useScrollCapture from './useScrollCapture';
 import useScrollLock from './useScrollLock';
 
@@ -14,8 +14,13 @@ interface Props {
   readonly onTopLeave?: (event: WheelEvent | TouchEvent) => void;
 }
 
-const blurSelectInput = () =>
-  document.activeElement && (document.activeElement as HTMLElement).blur();
+const blurSelectInput = (event: MouseEvent<HTMLDivElement>) => {
+  const element = event.target as HTMLDivElement;
+  return (
+    element.ownerDocument.activeElement &&
+    (element.ownerDocument.activeElement as HTMLElement).blur()
+  );
+};
 
 export default function ScrollManager({
   children,

From b284329ea92a951725fdf1ff48e6432eda545b5c Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Thu, 21 Sep 2023 09:30:59 +1000
Subject: [PATCH 04/12] Version Packages (#5756)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/nasty-turkeys-rescue.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/nasty-turkeys-rescue.md

diff --git a/.changeset/nasty-turkeys-rescue.md b/.changeset/nasty-turkeys-rescue.md
deleted file mode 100644
index 16dd369264..0000000000
--- a/.changeset/nasty-turkeys-rescue.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'react-select': patch
----
-
-Make scroll lock div work on a document context it belongs to
diff --git a/packages/react-select/CHANGELOG.md b/packages/react-select/CHANGELOG.md
index cd2f35663c..c01d4c80da 100644
--- a/packages/react-select/CHANGELOG.md
+++ b/packages/react-select/CHANGELOG.md
@@ -1,5 +1,11 @@
 # react-select
 
+## 5.7.5
+
+### Patch Changes
+
+- [`9d1730ba`](https://github.com/JedWatson/react-select/commit/9d1730ba4f97a51d25c7e704acd1a4c2be8f7182) [#5347](https://github.com/JedWatson/react-select/pull/5347) Thanks [@aszmyd](https://github.com/aszmyd)! - Make scroll lock div work on a document context it belongs to
+
 ## 5.7.4
 
 ### Patch Changes
diff --git a/packages/react-select/package.json b/packages/react-select/package.json
index 829c4a87b4..f87891755f 100644
--- a/packages/react-select/package.json
+++ b/packages/react-select/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-select",
-  "version": "5.7.4",
+  "version": "5.7.5",
   "description": "A Select control built with and for ReactJS",
   "main": "dist/react-select.cjs.js",
   "module": "dist/react-select.esm.js",

From f6315cd5feddb2e9ea168bcad391b29990b53afb Mon Sep 17 00:00:00 2001
From: Tuomo Raitila <tu4mo@users.noreply.github.com>
Date: Mon, 2 Oct 2023 05:59:12 +0300
Subject: [PATCH 05/12] Fix for calling non-cancellable scroll events (#5672)

Co-authored-by: Luke Bennett <luke.bennett@thinkmill.com.au>
---
 .changeset/brown-lemons-film.md                        | 5 +++++
 packages/react-select/src/internal/useScrollCapture.ts | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/brown-lemons-film.md

diff --git a/.changeset/brown-lemons-film.md b/.changeset/brown-lemons-film.md
new file mode 100644
index 0000000000..59fc1fb74a
--- /dev/null
+++ b/.changeset/brown-lemons-film.md
@@ -0,0 +1,5 @@
+---
+'react-select': patch
+---
+
+Fix for calling non-cancellable scroll events
diff --git a/packages/react-select/src/internal/useScrollCapture.ts b/packages/react-select/src/internal/useScrollCapture.ts
index 6452d6564e..03b8bd9f59 100644
--- a/packages/react-select/src/internal/useScrollCapture.ts
+++ b/packages/react-select/src/internal/useScrollCapture.ts
@@ -2,7 +2,7 @@ import { useCallback, useEffect, useRef } from 'react';
 import { supportsPassiveEvents } from '../utils';
 
 const cancelScroll = (event: WheelEvent | TouchEvent) => {
-  event.preventDefault();
+  if (event.cancelable) event.preventDefault();
   event.stopPropagation();
 };
 

From d598ac67c40ee95cd0264ba8a65adc053975e8ff Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Mon, 2 Oct 2023 14:09:37 +1100
Subject: [PATCH 06/12] Version Packages (#5763)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/brown-lemons-film.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/brown-lemons-film.md

diff --git a/.changeset/brown-lemons-film.md b/.changeset/brown-lemons-film.md
deleted file mode 100644
index 59fc1fb74a..0000000000
--- a/.changeset/brown-lemons-film.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'react-select': patch
----
-
-Fix for calling non-cancellable scroll events
diff --git a/packages/react-select/CHANGELOG.md b/packages/react-select/CHANGELOG.md
index c01d4c80da..c1df62f11c 100644
--- a/packages/react-select/CHANGELOG.md
+++ b/packages/react-select/CHANGELOG.md
@@ -1,5 +1,11 @@
 # react-select
 
+## 5.7.6
+
+### Patch Changes
+
+- [`f6315cd5`](https://github.com/JedWatson/react-select/commit/f6315cd5feddb2e9ea168bcad391b29990b53afb) [#5672](https://github.com/JedWatson/react-select/pull/5672) Thanks [@tu4mo](https://github.com/tu4mo)! - Fix for calling non-cancellable scroll events
+
 ## 5.7.5
 
 ### Patch Changes
diff --git a/packages/react-select/package.json b/packages/react-select/package.json
index f87891755f..6a52557e6f 100644
--- a/packages/react-select/package.json
+++ b/packages/react-select/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-select",
-  "version": "5.7.5",
+  "version": "5.7.6",
   "description": "A Select control built with and for ReactJS",
   "main": "dist/react-select.cjs.js",
   "module": "dist/react-select.esm.js",

From 224a8f0d01a5b6200ff10280a0d7a9b613383032 Mon Sep 17 00:00:00 2001
From: "Y T. Hy" <52711139+yhy-1@users.noreply.github.com>
Date: Sun, 1 Oct 2023 23:44:32 -0400
Subject: [PATCH 07/12] fix: lack of disabled attribute on select element
 causing color contrast issue (#5666)

---
 .changeset/lemon-deers-taste.md                  | 5 +++++
 cypress/fixtures/selectors.json                  | 1 +
 cypress/integration/single-select.spec.ts        | 6 +++++-
 packages/react-select/src/components/Control.tsx | 1 +
 4 files changed, 12 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/lemon-deers-taste.md

diff --git a/.changeset/lemon-deers-taste.md b/.changeset/lemon-deers-taste.md
new file mode 100644
index 0000000000..30b9ac6404
--- /dev/null
+++ b/.changeset/lemon-deers-taste.md
@@ -0,0 +1,5 @@
+---
+'react-select': patch
+---
+
+Add aria-disabled to select's control component.
diff --git a/cypress/fixtures/selectors.json b/cypress/fixtures/selectors.json
index 9c6ecbdaba..da975f7e1c 100644
--- a/cypress/fixtures/selectors.json
+++ b/cypress/fixtures/selectors.json
@@ -10,6 +10,7 @@
   "indicatorClear": ".react-select__clear-indicator",
   "indicatorDropdown": ".react-select__dropdown-indicator",
   "menu": ".react-select__menu",
+  "control": ".react-select__control",
   "menuOption": ".react-select__option",
   "noOptionsValue": ".react-select__menu-notice--no-options",
   "placeholder": ".react-select__placeholder",
diff --git a/cypress/integration/single-select.spec.ts b/cypress/integration/single-select.spec.ts
index d4700dc154..2e7effeca5 100644
--- a/cypress/integration/single-select.spec.ts
+++ b/cypress/integration/single-select.spec.ts
@@ -107,7 +107,11 @@ describe('Single Select', () => {
           .click({ force: true })
           .find('input')
           .should('exist')
-          .should('be.disabled');
+          .should('be.disabled')
+          // control should have aria-disabled
+          .get(selector.singleBasicSelect)
+          .find(selector.control)
+          .should('have.attr', 'aria-disabled', 'true');
       });
 
       it(`Should filter options when searching in view: ${viewport}`, () => {
diff --git a/packages/react-select/src/components/Control.tsx b/packages/react-select/src/components/Control.tsx
index d8e85c3db0..882390f9a4 100644
--- a/packages/react-select/src/components/Control.tsx
+++ b/packages/react-select/src/components/Control.tsx
@@ -87,6 +87,7 @@ const Control = <
         'control--menu-is-open': menuIsOpen,
       })}
       {...innerProps}
+      aria-disabled={isDisabled || undefined}
     >
       {children}
     </div>

From b53e64754493479cd5506879392d4e3e726025c5 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Mon, 2 Oct 2023 14:56:14 +1100
Subject: [PATCH 08/12] Version Packages (#5764)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/lemon-deers-taste.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/lemon-deers-taste.md

diff --git a/.changeset/lemon-deers-taste.md b/.changeset/lemon-deers-taste.md
deleted file mode 100644
index 30b9ac6404..0000000000
--- a/.changeset/lemon-deers-taste.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'react-select': patch
----
-
-Add aria-disabled to select's control component.
diff --git a/packages/react-select/CHANGELOG.md b/packages/react-select/CHANGELOG.md
index c1df62f11c..a00c78f411 100644
--- a/packages/react-select/CHANGELOG.md
+++ b/packages/react-select/CHANGELOG.md
@@ -1,5 +1,11 @@
 # react-select
 
+## 5.7.7
+
+### Patch Changes
+
+- [`224a8f0d`](https://github.com/JedWatson/react-select/commit/224a8f0d01a5b6200ff10280a0d7a9b613383032) [#5666](https://github.com/JedWatson/react-select/pull/5666) Thanks [@yhy-1](https://github.com/yhy-1)! - Add aria-disabled to select's control component.
+
 ## 5.7.6
 
 ### Patch Changes
diff --git a/packages/react-select/package.json b/packages/react-select/package.json
index 6a52557e6f..6d4ae7bde6 100644
--- a/packages/react-select/package.json
+++ b/packages/react-select/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-select",
-  "version": "5.7.6",
+  "version": "5.7.7",
   "description": "A Select control built with and for ReactJS",
   "main": "dist/react-select.cjs.js",
   "module": "dist/react-select.esm.js",

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 09/12] 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 10/12] 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 11/12] 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 12/12] [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