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/docs/pages/typescript/index.tsx b/docs/pages/typescript/index.tsx
index ae1f1b4f1c..f296b03e20 100644
--- a/docs/pages/typescript/index.tsx
+++ b/docs/pages/typescript/index.tsx
@@ -84,14 +84,19 @@ 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
 
 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,
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/CHANGELOG.md b/packages/react-select/CHANGELOG.md
index 8dabac9e04..a0efd2108e 100644
--- a/packages/react-select/CHANGELOG.md
+++ b/packages/react-select/CHANGELOG.md
@@ -1,5 +1,45 @@
 # 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
+
+- [`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
+
+- [`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
+
+- [`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
+
+- [`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..05869f8e41 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.8.0",
   "description": "A Select control built with and for ReactJS",
   "main": "dist/react-select.cjs.js",
   "module": "dist/react-select.esm.js",
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/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>
diff --git a/packages/react-select/src/components/LiveRegion.tsx b/packages/react-select/src/components/LiveRegion.tsx
index f85db69a04..ac78e79e0e 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 {
@@ -57,6 +59,7 @@ const LiveRegion = <
     options,
     screenReaderStatus,
     tabSelectsValue,
+    isLoading,
   } = selectProps;
   const ariaLabel = selectProps['aria-label'];
   const ariaLive = selectProps['aria-live'];
@@ -128,6 +131,7 @@ const LiveRegion = <
         context:
           focused === focusedOption ? ('menu' as const) : ('value' as const),
         selectValue,
+        isAppleDevice,
       };
 
       focusMsg = messages.onFocus(onFocusProps);
@@ -142,11 +146,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,
       });
@@ -160,8 +165,11 @@ const LiveRegion = <
     messages,
     options,
     screenReaderStatus,
+    isLoading,
   ]);
 
+  const isInitialFocus = ariaSelection?.action === 'initial-input-focus';
+
   const ariaGuidance = useMemo(() => {
     let guidanceMsg = '';
     if (messages.guidance) {
@@ -174,6 +182,7 @@ const LiveRegion = <
         isMulti,
         isSearchable,
         tabSelectsValue,
+        isInitialFocus,
       });
     }
     return guidanceMsg;
@@ -188,19 +197,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 */}
@@ -210,6 +218,7 @@ const LiveRegion = <
         aria-live={ariaLive}
         aria-atomic="false"
         aria-relevant="additions text"
+        role="log"
       >
         {isFocused && !isInitialFocus && ScreenReaderText}
       </A11yText>
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 };
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,
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();
 };
 
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"