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] 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"