From a72749e6ac25552749aeca8b4574aacd644c39ad Mon Sep 17 00:00:00 2001
From: Matt Charlton <mcharlton@atlassian.com>
Date: Fri, 25 Jun 2021 15:19:32 +1000
Subject: [PATCH 01/24] fix VO,NVDA focus announcements

---
 docs/examples/BasicMulti.tsx                  |   1 +
 docs/examples/BasicSingle.tsx                 |   6 +-
 docs/pages/home/index.tsx                     | 147 ------------------
 packages/react-select/src/Select.tsx          |  22 ++-
 .../react-select/src/accessibility/index.ts   |  12 +-
 .../src/components/LiveRegion.tsx             |  53 ++++++-
 .../src/components/containers.tsx             |   1 +
 7 files changed, 83 insertions(+), 159 deletions(-)

diff --git a/docs/examples/BasicMulti.tsx b/docs/examples/BasicMulti.tsx
index 9cc30d6d43..0d6a8b126d 100644
--- a/docs/examples/BasicMulti.tsx
+++ b/docs/examples/BasicMulti.tsx
@@ -11,5 +11,6 @@ export default () => (
     options={colourOptions}
     className="basic-multi-select"
     classNamePrefix="select"
+    aria-live="assertive"
   />
 );
diff --git a/docs/examples/BasicSingle.tsx b/docs/examples/BasicSingle.tsx
index 37aa1d8b67..261f7510fa 100644
--- a/docs/examples/BasicSingle.tsx
+++ b/docs/examples/BasicSingle.tsx
@@ -1,6 +1,6 @@
 import React, { Component, Fragment } from 'react';
 
-import Select from 'react-select';
+import Select from '../../packages/react-select/src/';
 import { colourOptions } from '../data';
 import { Note } from '../styled-components';
 
@@ -42,7 +42,7 @@ export default class SingleSelect extends Component<{}, State> {
         <Select
           className="basic-single"
           classNamePrefix="select"
-          defaultValue={colourOptions[0]}
+          // defaultValue={colourOptions[0]}
           isDisabled={isDisabled}
           isLoading={isLoading}
           isClearable={isClearable}
@@ -50,6 +50,8 @@ export default class SingleSelect extends Component<{}, State> {
           isSearchable={isSearchable}
           name="color"
           options={colourOptions}
+          placeholder="Pick a color"
+          aria-live="assertive"
         />
         <Note Tag="label">
           <Checkbox
diff --git a/docs/pages/home/index.tsx b/docs/pages/home/index.tsx
index 24013114c7..8a5df28d54 100644
--- a/docs/pages/home/index.tsx
+++ b/docs/pages/home/index.tsx
@@ -48,152 +48,5 @@ export default function Home() {
     </ExampleWrapper>
   )}
 
-  ## Getting Started
-
-  Start by installing \`react-select\`
-
-  ~~~bash
-  yarn add react-select
-  ~~~
-
-  or
-
-  ~~~bash
-  npm i --save react-select
-  ~~~
-
-  Import the default export and render in your component:
-
-  ~~~jsx
-  import React, { Component } from 'react'
-  import Select from 'react-select'
-
-  const options = [
-    { value: 'chocolate', label: 'Chocolate' },
-    { value: 'strawberry', label: 'Strawberry' },
-    { value: 'vanilla', label: 'Vanilla' }
-  ]
-
-  const MyComponent = () => (
-    <Select options={options} />
-  )
-  ~~~
-
-  ${(
-    <ExampleWrapper
-      label="Grouped"
-      urlPath="docs/examples/BasicGrouped.tsx"
-      raw={require('!!raw-loader!../../examples/BasicGrouped.tsx')}
-    >
-      <BasicGrouped />
-    </ExampleWrapper>
-  )}
-
-  ## Animated Components
-
-  React-Select comes with a makeAnimated function that create animated wrappers around components passed in as arguments.
-  If no arguments are passed, built-in components are wrapped instead.
-
-  ~~~jsx
-  import makeAnimated from 'react-select/animated';
-  ~~~
-
-  Remove the values below to see them in action.
-
-  ${(
-    <ExampleWrapper
-      label="Animation"
-      urlPath="docs/examples/AnimatedMulti.tsx"
-      raw={require('!!raw-loader!../../examples/AnimatedMulti.tsx')}
-    >
-      <AnimatedMulti />
-    </ExampleWrapper>
-  )}
-
-  ## Custom Styles
-
-  Style individual components with custom css using the \`styles\` prop.
-
-  ${(
-    <ExampleWrapper
-      label="Single"
-      urlPath="docs/examples/StyledSingle.tsx"
-      raw={require('!!raw-loader!../../examples/StyledSingle.tsx')}
-    >
-      <StyledSingle />
-    </ExampleWrapper>
-  )}
-
-  ${(
-    <ExampleWrapper
-      label="Multi Select"
-      urlPath="docs/examples/StyledMulti.tsx"
-      raw={require('!!raw-loader!../../examples/StyledMulti.tsx')}
-    >
-      <StyledMulti />
-    </ExampleWrapper>
-  )}
-
-  You can see a full explanation of how to do this on the [styles](/styles) page.
-
-  # Async
-  Use the Async component to load options from a remote source as the user types.
-
-  ~~~jsx
-  import AsyncSelect from 'react-select/async';
-  ~~~
-
-  ${(
-    <ExampleWrapper
-      label="Callbacks"
-      urlPath="docs/examples/AsyncCallbacks.tsx"
-      raw={require('!!raw-loader!../../examples/AsyncCallbacks.tsx')}
-    >
-      <AsyncCallbacks />
-    </ExampleWrapper>
-  )}
-
-  ${(
-    <ExampleWrapper
-      label="Promises"
-      urlPath="docs/examples/AsyncPromises.tsx"
-      raw={require('!!raw-loader!../../examples/AsyncPromises.tsx')}
-    >
-      <AsyncPromises />
-    </ExampleWrapper>
-  )}
-
-  You can see a full explanation of how to do this on the [async](/async) page.
-
-  # Creatable
-  The Creatable component enables users to create new options along with choosing existing options.
-
-  ~~~jsx
-  import Creatable from 'react-select/creatable';
-  ~~~
-
-  ${(
-    <ExampleWrapper
-      label="Creatable Example"
-      urlPath="docs/home/examples/CreatableSingle.tsx"
-      raw={require('!!raw-loader!../../examples/CreatableSingle.tsx')}
-    >
-      <CreatableSingle />
-    </ExampleWrapper>
-  )}
-
-  You can see a full explanation of how to do this on the [creatable](/creatable) page.
-
-  # Fixed Options
-
-  ${(
-    <ExampleWrapper
-      label="Fixed Options Example"
-      urlPath="docs/home/examples/FixedOptions.tsx"
-      raw={require('!!raw-loader!../../examples/FixedOptions.tsx')}
-    >
-      <FixedOptions />
-    </ExampleWrapper>
-  )}
 `;
 }
diff --git a/packages/react-select/src/Select.tsx b/packages/react-select/src/Select.tsx
index 30e63fb994..a6e914f6b5 100644
--- a/packages/react-select/src/Select.tsx
+++ b/packages/react-select/src/Select.tsx
@@ -628,7 +628,19 @@ export default class Select<
     this.instancePrefix =
       'react-select-' + (this.props.instanceId || ++instanceId);
     this.state.selectValue = cleanValue(props.value);
+
+    // If `value` or `defaultValue` props are not empty then announce them
+    // when the Select is focussed
+    if (this.state.selectValue.length) {
+      this.state.ariaSelection = {
+        value: this.state.selectValue as OnChangeValue<Option, IsMulti>,
+        action: 'select-option',
+        option: this.state.selectValue,
+        name: this.props.name,
+      };
+    }
   }
+
   static getDerivedStateFromProps(
     props: Props<OptionBase, boolean, GroupBase<OptionBase>>,
     state: State<OptionBase, boolean, GroupBase<OptionBase>>
@@ -1027,7 +1039,9 @@ export default class Select<
     const custom = this.props.styles[key];
     return custom ? custom(base, props as any) : base;
   };
-  getElementId = (element: 'group' | 'input' | 'listbox' | 'option') => {
+  getElementId = (
+    element: 'group' | 'input' | 'listbox' | 'option' | 'placeholder'
+  ) => {
     return `${this.instancePrefix}-${element}`;
   };
 
@@ -1524,6 +1538,9 @@ export default class Select<
       ...(!isSearchable && {
         'aria-readonly': true,
       }),
+      ...(!this.hasValue() && {
+        'aria-describedby': this.getElementId('placeholder'),
+      }),
     };
 
     if (!isSearchable) {
@@ -1535,9 +1552,9 @@ export default class Select<
           onBlur={this.onInputBlur}
           onChange={noop}
           onFocus={this.onInputFocus}
+          inputMode="none"
           disabled={isDisabled}
           tabIndex={tabIndex}
-          inputMode="none"
           form={form}
           value=""
           {...ariaAttributes}
@@ -1593,6 +1610,7 @@ export default class Select<
           key="placeholder"
           isDisabled={isDisabled}
           isFocused={isFocused}
+          innerProps={{ id: this.getElementId('placeholder') }}
         >
           {placeholder}
         </Placeholder>
diff --git a/packages/react-select/src/accessibility/index.ts b/packages/react-select/src/accessibility/index.ts
index 1803266435..9757875331 100644
--- a/packages/react-select/src/accessibility/index.ts
+++ b/packages/react-select/src/accessibility/index.ts
@@ -13,10 +13,13 @@ export type GuidanceContext = 'menu' | 'input' | 'value';
 
 export type AriaLive = 'polite' | 'off' | 'assertive';
 
-export type AriaSelection<Option extends OptionBase, IsMulti extends boolean> =
-  ActionMeta<Option> & {
-    value: OnChangeValue<Option, IsMulti>;
-  };
+export type AriaSelection<
+  Option extends OptionBase,
+  IsMulti extends boolean
+> = Omit<ActionMeta<Option>, 'option'> & {
+  value: OnChangeValue<Option, IsMulti>;
+  option?: Option | Options<Option>;
+};
 
 export interface AriaGuidanceProps {
   /** String value of selectProp aria-label */
@@ -132,6 +135,7 @@ export const defaultAriaLiveMessages = {
       case 'deselect-option':
       case 'pop-value':
       case 'remove-value':
+      case 'clear':
         return `option ${label}, deselected.`;
       case 'select-option':
         return isDisabled
diff --git a/packages/react-select/src/components/LiveRegion.tsx b/packages/react-select/src/components/LiveRegion.tsx
index 97891c48d7..ba98fc539d 100644
--- a/packages/react-select/src/components/LiveRegion.tsx
+++ b/packages/react-select/src/components/LiveRegion.tsx
@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import React, { ReactNode, useMemo } from 'react';
+import React, { ReactNode, useEffect, useMemo, useRef, useState } from 'react';
 import { jsx } from '@emotion/react';
 import A11yText from '../internal/A11yText';
 import { defaultAriaLiveMessages, AriaSelection } from '../accessibility';
@@ -77,11 +77,33 @@ const LiveRegion = <
   const ariaSelected = useMemo(() => {
     let message = '';
     if (ariaSelection && messages.onChange) {
-      const { option, removedValue, value } = ariaSelection;
+      const { option, removedValue, removedValues, value } = ariaSelection;
       // select-option when !isMulti does not return option so we assume selected option is value
       const asOption = (val: OnChangeValue<Option, IsMulti>): Option | null =>
         !Array.isArray(val) ? (val as Option) : null;
-      const selected = removedValue || option || asOption(value);
+
+      const valueFromOption = (
+        opt?: Option | Options<Option>
+      ): Option | undefined => {
+        if (!opt) return;
+        return Array.isArray(opt)
+          ? (opt.reduce(
+              (acc, optionItem) => {
+                if (!optionItem) return { label: '', value: '' };
+                const { value: optionVal, label } = optionItem as Option;
+                acc.label = acc.label + (label || optionVal) + ', ';
+                return acc;
+              },
+              { label: '', value: '' }
+            ) as Option)
+          : (opt as Option);
+      };
+
+      const selected =
+        removedValue ||
+        valueFromOption(removedValues) ||
+        valueFromOption(option) ||
+        asOption(value);
 
       const onChangeProps = {
         isDisabled: selected && isOptionDisabled(selected, selectValue),
@@ -89,6 +111,8 @@ const LiveRegion = <
         ...ariaSelection,
       };
 
+      console.log('onChangeProps', onChangeProps);
+
       message = messages.onChange(onChangeProps);
     }
     return message;
@@ -176,13 +200,34 @@ const LiveRegion = <
 
   const ariaContext = `${ariaFocused} ${ariaResults} ${ariaGuidance}`;
 
+  // This is to fix NVDA not announcing the live region when the Select is focussed.
+  // It just delays the rendering of the live region a small amount so NVDA sees the
+  // contents of the live region get added.
+  const [reveal, setReveal] = useState(false);
+  const timeoutRef = useRef<number | undefined>();
+  useEffect(() => {
+    if (!timeoutRef.current && isFocused) {
+      // TS kept wanting this to be a NodeJS.Timeout type
+      timeoutRef.current = (setTimeout(
+        () => setReveal(true),
+        50
+      ) as unknown) as number;
+    }
+    return () => {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = undefined;
+      setReveal(false);
+    };
+  }, [isFocused]);
+
   return (
     <A11yText
       aria-live={ariaLive}
       aria-atomic="false"
       aria-relevant="additions text"
+      style={{ display: isFocused ? 'block' : 'none' }}
     >
-      {isFocused && (
+      {reveal && (
         <React.Fragment>
           <span id="aria-selection">{ariaSelected}</span>
           <span id="aria-context">{ariaContext}</span>
diff --git a/packages/react-select/src/components/containers.tsx b/packages/react-select/src/components/containers.tsx
index 323375ba51..474464a22d 100644
--- a/packages/react-select/src/components/containers.tsx
+++ b/packages/react-select/src/components/containers.tsx
@@ -58,6 +58,7 @@ export const SelectContainer = <
         className
       )}
       {...innerProps}
+      role="widget"
     >
       {children}
     </div>

From c916d08545cb65248b3036adb3e0ced977a59d89 Mon Sep 17 00:00:00 2001
From: Matt Charlton <mcharlton@atlassian.com>
Date: Fri, 25 Jun 2021 15:22:08 +1000
Subject: [PATCH 02/24] edit comments

---
 packages/react-select/src/components/LiveRegion.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/react-select/src/components/LiveRegion.tsx b/packages/react-select/src/components/LiveRegion.tsx
index ba98fc539d..7c735e4ddb 100644
--- a/packages/react-select/src/components/LiveRegion.tsx
+++ b/packages/react-select/src/components/LiveRegion.tsx
@@ -202,7 +202,7 @@ const LiveRegion = <
 
   // This is to fix NVDA not announcing the live region when the Select is focussed.
   // It just delays the rendering of the live region a small amount so NVDA sees the
-  // contents of the live region get added.
+  // contents of the live region get mutated.
   const [reveal, setReveal] = useState(false);
   const timeoutRef = useRef<number | undefined>();
   useEffect(() => {
@@ -225,6 +225,8 @@ const LiveRegion = <
       aria-live={ariaLive}
       aria-atomic="false"
       aria-relevant="additions text"
+      // This is to fix VoiceOver not announcing when focussing after Select
+      // has already been focussed once
       style={{ display: isFocused ? 'block' : 'none' }}
     >
       {reveal && (

From 072ae7601cb090a1b47f11cb7ce2a51b22d91680 Mon Sep 17 00:00:00 2001
From: Matt Charlton <mcharlton@atlassian.com>
Date: Tue, 29 Jun 2021 11:29:04 +1000
Subject: [PATCH 03/24] remove console.log

---
 packages/react-select/src/components/LiveRegion.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/react-select/src/components/LiveRegion.tsx b/packages/react-select/src/components/LiveRegion.tsx
index 7c735e4ddb..04da245d5d 100644
--- a/packages/react-select/src/components/LiveRegion.tsx
+++ b/packages/react-select/src/components/LiveRegion.tsx
@@ -111,8 +111,6 @@ const LiveRegion = <
         ...ariaSelection,
       };
 
-      console.log('onChangeProps', onChangeProps);
-
       message = messages.onChange(onChangeProps);
     }
     return message;

From 2ee823ec51b02071e81417cf1b1e928ebee0c5d7 Mon Sep 17 00:00:00 2001
From: Matt Charlton <mcharlton@atlassian.com>
Date: Thu, 1 Jul 2021 13:17:40 +1000
Subject: [PATCH 04/24] fix removed values announced when refocused

---
 packages/react-select/src/Select.tsx          | 61 +++++++++++++++++--
 .../react-select/src/accessibility/index.ts   |  2 +-
 .../src/components/LiveRegion.tsx             | 38 +++++++-----
 3 files changed, 82 insertions(+), 19 deletions(-)

diff --git a/packages/react-select/src/Select.tsx b/packages/react-select/src/Select.tsx
index a6e914f6b5..50b396c822 100644
--- a/packages/react-select/src/Select.tsx
+++ b/packages/react-select/src/Select.tsx
@@ -320,6 +320,7 @@ interface State<
   focusedValue: Option | null;
   selectValue: Options<Option>;
   clearFocusValueOnUpdate: boolean;
+  clearIndicatorEngaged: boolean;
   inputIsHiddenAfterUpdate: boolean | null | undefined;
   prevProps: Props<Option, IsMulti, Group> | void;
 }
@@ -585,6 +586,7 @@ export default class Select<
     clearFocusValueOnUpdate: false,
     inputIsHiddenAfterUpdate: undefined,
     prevProps: undefined,
+    clearIndicatorEngaged: false,
   };
 
   // Misc. Instance Properties
@@ -630,7 +632,7 @@ export default class Select<
     this.state.selectValue = cleanValue(props.value);
 
     // If `value` or `defaultValue` props are not empty then announce them
-    // when the Select is focussed
+    // when the Select is focused
     if (this.state.selectValue.length) {
       this.state.ariaSelection = {
         value: this.state.selectValue as OnChangeValue<Option, IsMulti>,
@@ -698,9 +700,17 @@ export default class Select<
       this.focusInput();
     }
   }
-  componentDidUpdate(prevProps: Props<Option, IsMulti, Group>) {
-    const { isDisabled, menuIsOpen } = this.props;
-    const { isFocused } = this.state;
+  componentDidUpdate(
+    prevProps: Props<Option, IsMulti, Group>,
+    prevState: State<Option, IsMulti, Group>
+  ) {
+    const { isDisabled, menuIsOpen, name } = this.props;
+    const {
+      ariaSelection,
+      isFocused,
+      selectValue,
+      clearIndicatorEngaged,
+    } = this.state;
 
     if (
       // ensure focus is restored correctly when the control becomes enabled
@@ -726,6 +736,47 @@ export default class Select<
       scrollIntoView(this.menuListRef, this.focusedOptionRef);
       this.scrollToFocusedOptionOnUpdate = false;
     }
+
+    const setAriaSelectionToNull = () => this.setState({ ariaSelection: null });
+    const setAriaSelectionToSelectedValues = () =>
+      this.setState({
+        ariaSelection: {
+          value: selectValue as OnChangeValue<Option, IsMulti>,
+          action: 'select-option',
+          option: selectValue,
+          name,
+        },
+      });
+
+    const optionRemoved = [
+      'deselect-option',
+      'pop-value',
+      'remove-value',
+    ].includes(ariaSelection?.action || '');
+
+    const allOptionsCleared =
+      !selectValue.length && ariaSelection?.action === 'clear';
+
+    const selectWasRefocused = !prevState.isFocused && isFocused;
+
+    const selectWasRefocusedWithClearIndicatorDisengaged =
+      selectWasRefocused &&
+      !prevState.clearIndicatorEngaged &&
+      !clearIndicatorEngaged;
+
+    // if the last action was to remove options then we reset the aria selection
+    // message so it doesn't announce the removal when the select is focused again
+    if (selectWasRefocusedWithClearIndicatorDisengaged && allOptionsCleared) {
+      setAriaSelectionToNull();
+    } else if (selectWasRefocused && optionRemoved) {
+      if (selectValue.length) {
+        setAriaSelectionToSelectedValues();
+      } else {
+        setAriaSelectionToNull();
+      }
+    } else if (selectWasRefocused && selectValue.length) {
+      setAriaSelectionToSelectedValues();
+    }
   }
   componentWillUnmount() {
     this.stopListeningComposition();
@@ -1194,6 +1245,7 @@ export default class Select<
     this.clearValue();
     event.stopPropagation();
     this.openAfterFocus = false;
+    this.setState({ clearIndicatorEngaged: true });
     if (event.type === 'touchend') {
       this.focusInput();
     } else {
@@ -1335,6 +1387,7 @@ export default class Select<
     this.setState({
       inputIsHiddenAfterUpdate: false,
       isFocused: true,
+      clearIndicatorEngaged: false,
     });
     if (this.openAfterFocus || this.props.openMenuOnFocus) {
       this.openMenu('first');
diff --git a/packages/react-select/src/accessibility/index.ts b/packages/react-select/src/accessibility/index.ts
index 9757875331..61f7312fbf 100644
--- a/packages/react-select/src/accessibility/index.ts
+++ b/packages/react-select/src/accessibility/index.ts
@@ -177,7 +177,7 @@ export const defaultAriaLiveMessages = {
   onFilter: (props: AriaOnFilterProps) => {
     const { inputValue, resultsMessage } = props;
     return `${resultsMessage}${
-      inputValue ? ' for search term ' + inputValue : ''
+      inputValue ? ' for search term "' + inputValue + '"' : ''
     }.`;
   },
 };
diff --git a/packages/react-select/src/components/LiveRegion.tsx b/packages/react-select/src/components/LiveRegion.tsx
index 04da245d5d..20017608f3 100644
--- a/packages/react-select/src/components/LiveRegion.tsx
+++ b/packages/react-select/src/components/LiveRegion.tsx
@@ -82,27 +82,37 @@ const LiveRegion = <
       const asOption = (val: OnChangeValue<Option, IsMulti>): Option | null =>
         !Array.isArray(val) ? (val as Option) : null;
 
-      const valueFromOption = (
+      // we can get an array of options, just a single option or a falsy option,
+      // need to handle returning an Option shaped object or undefined
+      const optionFromPossibleArray = (
         opt?: Option | Options<Option>
       ): Option | undefined => {
+        // if falsy return early
         if (!opt) return;
-        return Array.isArray(opt)
-          ? (opt.reduce(
-              (acc, optionItem) => {
-                if (!optionItem) return { label: '', value: '' };
-                const { value: optionVal, label } = optionItem as Option;
-                acc.label = acc.label + (label || optionVal) + ', ';
-                return acc;
-              },
-              { label: '', value: '' }
-            ) as Option)
-          : (opt as Option);
+        if (Array.isArray(opt)) {
+          // if the array has no items then return early
+          if (!opt.length) return;
+          // take the array of options and reduce to one single option-like object with
+          // the label/s concatenated for the screen reader
+          return opt.reduce(
+            (acc, optionItem: Option) => {
+              const { value: optionVal, label } = optionItem;
+              const sep = acc.label ? ', ' : '';
+              acc.label = acc.label + sep + (label || optionVal);
+              return acc;
+            },
+            // we only need the label for the returned object
+            { label: '' }
+          ) as Option;
+        }
+        // if just a single option then return it
+        return opt as Option;
       };
 
       const selected =
         removedValue ||
-        valueFromOption(removedValues) ||
-        valueFromOption(option) ||
+        optionFromPossibleArray(removedValues) ||
+        optionFromPossibleArray(option) ||
         asOption(value);
 
       const onChangeProps = {

From a1d457aae5e4d5e77690c58cf3adc02b574e541e Mon Sep 17 00:00:00 2001
From: Matt Charlton <mcharlton@atlassian.com>
Date: Thu, 1 Jul 2021 16:11:40 +1000
Subject: [PATCH 05/24] update snapshots

---
 packages/react-select/src/__tests__/StateManaged.test.tsx    | 5 ++++-
 .../src/__tests__/__snapshots__/Async.test.tsx.snap          | 3 +++
 .../src/__tests__/__snapshots__/AsyncCreatable.test.tsx.snap | 3 +++
 .../src/__tests__/__snapshots__/Creatable.test.tsx.snap      | 3 +++
 .../src/__tests__/__snapshots__/Select.test.tsx.snap         | 3 +++
 .../src/__tests__/__snapshots__/StateManaged.test.tsx.snap   | 3 +++
 packages/react-select/src/components/containers.tsx          | 4 +++-
 7 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/packages/react-select/src/__tests__/StateManaged.test.tsx b/packages/react-select/src/__tests__/StateManaged.test.tsx
index e61d7b074c..a211466e16 100644
--- a/packages/react-select/src/__tests__/StateManaged.test.tsx
+++ b/packages/react-select/src/__tests__/StateManaged.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, fireEvent, EventType } from '@testing-library/react';
+import { act, render, fireEvent, EventType } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import cases from 'jest-in-case';
@@ -56,6 +56,9 @@ const BASIC_PROPS: BasicProps = {
 
 test('defaults > snapshot', () => {
   const { container } = render(<Select />);
+  act(() => {
+    jest.runOnlyPendingTimers();
+  });
   expect(container).toMatchSnapshot();
 });
 
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 269fefe8d3..2acdb97327 100644
--- a/packages/react-select/src/__tests__/__snapshots__/Async.test.tsx.snap
+++ b/packages/react-select/src/__tests__/__snapshots__/Async.test.tsx.snap
@@ -171,12 +171,14 @@ exports[`defaults - snapshot 1`] = `
 <div>
   <div
     class=" emotion-0"
+    role="application"
   >
     <span
       aria-atomic="false"
       aria-live="polite"
       aria-relevant="additions text"
       class="emotion-1"
+      style="display: none;"
     />
     <div
       class=" emotion-2"
@@ -186,6 +188,7 @@ exports[`defaults - snapshot 1`] = `
       >
         <div
           class=" emotion-4"
+          id="react-select-2-placeholder"
         >
           Select...
         </div>
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 269fefe8d3..2acdb97327 100644
--- a/packages/react-select/src/__tests__/__snapshots__/AsyncCreatable.test.tsx.snap
+++ b/packages/react-select/src/__tests__/__snapshots__/AsyncCreatable.test.tsx.snap
@@ -171,12 +171,14 @@ exports[`defaults - snapshot 1`] = `
 <div>
   <div
     class=" emotion-0"
+    role="application"
   >
     <span
       aria-atomic="false"
       aria-live="polite"
       aria-relevant="additions text"
       class="emotion-1"
+      style="display: none;"
     />
     <div
       class=" emotion-2"
@@ -186,6 +188,7 @@ exports[`defaults - snapshot 1`] = `
       >
         <div
           class=" emotion-4"
+          id="react-select-2-placeholder"
         >
           Select...
         </div>
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 269fefe8d3..2acdb97327 100644
--- a/packages/react-select/src/__tests__/__snapshots__/Creatable.test.tsx.snap
+++ b/packages/react-select/src/__tests__/__snapshots__/Creatable.test.tsx.snap
@@ -171,12 +171,14 @@ exports[`defaults - snapshot 1`] = `
 <div>
   <div
     class=" emotion-0"
+    role="application"
   >
     <span
       aria-atomic="false"
       aria-live="polite"
       aria-relevant="additions text"
       class="emotion-1"
+      style="display: none;"
     />
     <div
       class=" emotion-2"
@@ -186,6 +188,7 @@ exports[`defaults - snapshot 1`] = `
       >
         <div
           class=" emotion-4"
+          id="react-select-2-placeholder"
         >
           Select...
         </div>
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 2247a2953b..dc5e91317e 100644
--- a/packages/react-select/src/__tests__/__snapshots__/Select.test.tsx.snap
+++ b/packages/react-select/src/__tests__/__snapshots__/Select.test.tsx.snap
@@ -171,12 +171,14 @@ exports[`snapshot - defaults 1`] = `
 <div>
   <div
     class=" emotion-0"
+    role="application"
   >
     <span
       aria-atomic="false"
       aria-live="polite"
       aria-relevant="additions text"
       class="emotion-1"
+      style="display: none;"
     />
     <div
       class=" emotion-2"
@@ -186,6 +188,7 @@ exports[`snapshot - defaults 1`] = `
       >
         <div
           class=" emotion-4"
+          id="react-select-2-placeholder"
         >
           Select...
         </div>
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 4b9a0517d5..fc8d706b90 100644
--- a/packages/react-select/src/__tests__/__snapshots__/StateManaged.test.tsx.snap
+++ b/packages/react-select/src/__tests__/__snapshots__/StateManaged.test.tsx.snap
@@ -171,12 +171,14 @@ exports[`defaults > snapshot 1`] = `
 <div>
   <div
     class=" emotion-0"
+    role="application"
   >
     <span
       aria-atomic="false"
       aria-live="polite"
       aria-relevant="additions text"
       class="emotion-1"
+      style="display: none;"
     />
     <div
       class=" emotion-2"
@@ -186,6 +188,7 @@ exports[`defaults > snapshot 1`] = `
       >
         <div
           class=" emotion-4"
+          id="react-select-2-placeholder"
         >
           Select...
         </div>
diff --git a/packages/react-select/src/components/containers.tsx b/packages/react-select/src/components/containers.tsx
index 474464a22d..61186caa28 100644
--- a/packages/react-select/src/components/containers.tsx
+++ b/packages/react-select/src/components/containers.tsx
@@ -58,7 +58,9 @@ export const SelectContainer = <
         className
       )}
       {...innerProps}
-      role="widget"
+      // this should tell JAWS not treat the component as a custom widget
+      // and not intercept keyboard events
+      role="application"
     >
       {children}
     </div>

From 58bdf8f8fcc7dc81cdb4ce78d7b3ffc07beb2dd9 Mon Sep 17 00:00:00 2001
From: Matt Charlton <mcharlton@atlassian.com>
Date: Fri, 2 Jul 2021 09:14:51 +1000
Subject: [PATCH 06/24] update snapshots

---
 .../react-select/src/__tests__/__snapshots__/Async.test.tsx.snap | 1 +
 .../src/__tests__/__snapshots__/AsyncCreatable.test.tsx.snap     | 1 +
 .../src/__tests__/__snapshots__/Creatable.test.tsx.snap          | 1 +
 .../src/__tests__/__snapshots__/Select.test.tsx.snap             | 1 +
 .../src/__tests__/__snapshots__/StateManaged.test.tsx.snap       | 1 +
 5 files changed, 5 insertions(+)

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 2acdb97327..9ecd89d485 100644
--- a/packages/react-select/src/__tests__/__snapshots__/Async.test.tsx.snap
+++ b/packages/react-select/src/__tests__/__snapshots__/Async.test.tsx.snap
@@ -202,6 +202,7 @@ exports[`defaults - snapshot 1`] = `
             aria-expanded="false"
             aria-haspopup="true"
             aria-owns="react-select-2-listbox"
+            aria-describedby="react-select-2-placeholder"
             autocapitalize="none"
             autocomplete="off"
             autocorrect="off"
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 2acdb97327..9ecd89d485 100644
--- a/packages/react-select/src/__tests__/__snapshots__/AsyncCreatable.test.tsx.snap
+++ b/packages/react-select/src/__tests__/__snapshots__/AsyncCreatable.test.tsx.snap
@@ -202,6 +202,7 @@ exports[`defaults - snapshot 1`] = `
             aria-expanded="false"
             aria-haspopup="true"
             aria-owns="react-select-2-listbox"
+            aria-describedby="react-select-2-placeholder"
             autocapitalize="none"
             autocomplete="off"
             autocorrect="off"
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 2acdb97327..9ecd89d485 100644
--- a/packages/react-select/src/__tests__/__snapshots__/Creatable.test.tsx.snap
+++ b/packages/react-select/src/__tests__/__snapshots__/Creatable.test.tsx.snap
@@ -202,6 +202,7 @@ exports[`defaults - snapshot 1`] = `
             aria-expanded="false"
             aria-haspopup="true"
             aria-owns="react-select-2-listbox"
+            aria-describedby="react-select-2-placeholder"
             autocapitalize="none"
             autocomplete="off"
             autocorrect="off"
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 dc5e91317e..05c79234d5 100644
--- a/packages/react-select/src/__tests__/__snapshots__/Select.test.tsx.snap
+++ b/packages/react-select/src/__tests__/__snapshots__/Select.test.tsx.snap
@@ -202,6 +202,7 @@ exports[`snapshot - defaults 1`] = `
             aria-expanded="false"
             aria-haspopup="true"
             aria-owns="react-select-2-listbox"
+            aria-describedby="react-select-2-placeholder"
             autocapitalize="none"
             autocomplete="off"
             autocorrect="off"
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 fc8d706b90..ecbcadd28b 100644
--- a/packages/react-select/src/__tests__/__snapshots__/StateManaged.test.tsx.snap
+++ b/packages/react-select/src/__tests__/__snapshots__/StateManaged.test.tsx.snap
@@ -202,6 +202,7 @@ exports[`defaults > snapshot 1`] = `
             aria-expanded="false"
             aria-haspopup="true"
             aria-owns="react-select-2-listbox"
+            aria-describedby="react-select-2-placeholder"
             autocapitalize="none"
             autocomplete="off"
             autocorrect="off"

From bfd999ec323e805e99f630478553fc85520275df Mon Sep 17 00:00:00 2001
From: Matt Charlton <mcharlton@atlassian.com>
Date: Fri, 2 Jul 2021 09:40:01 +1000
Subject: [PATCH 07/24] fix existing tests for new settimeout

---
 .../src/__tests__/Select.test.tsx             | 1304 ++++++++---------
 1 file changed, 633 insertions(+), 671 deletions(-)

diff --git a/packages/react-select/src/__tests__/Select.test.tsx b/packages/react-select/src/__tests__/Select.test.tsx
index 72d0360e2b..c1fdf6653f 100644
--- a/packages/react-select/src/__tests__/Select.test.tsx
+++ b/packages/react-select/src/__tests__/Select.test.tsx
@@ -1,5 +1,5 @@
 import React, { KeyboardEvent } from 'react';
-import { render, fireEvent, EventType } from '@testing-library/react';
+import { act, render, fireEvent, EventType } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import cases from 'jest-in-case';
 
@@ -162,33 +162,31 @@ cases(
     expect(value!.textContent).toBe(expectedOptions);
   },
   {
-    'single select > should format label of options according to text returned by formatOptionLabel':
-      {
-        props: {
-          ...BASIC_PROPS,
-          formatOptionLabel: (
-            { label, value }: Option,
-            { context }: FormatOptionLabelMeta<Option>
-          ) => `${label} ${value} ${context}`,
-          value: OPTIONS[0],
-        },
-        valueComponentSelector: '.react-select__single-value',
-        expectedOptions: '0 zero value',
-      },
-    'multi select > should format label of options according to text returned by formatOptionLabel':
-      {
-        props: {
-          ...BASIC_PROPS,
-          formatOptionLabel: (
-            { label, value }: Option,
-            { context }: FormatOptionLabelMeta<Option>
-          ) => `${label} ${value} ${context}`,
-          isMulti: true,
-          value: OPTIONS[0],
-        },
-        valueComponentSelector: '.react-select__multi-value',
-        expectedOptions: '0 zero value',
+    'single select > should format label of options according to text returned by formatOptionLabel': {
+      props: {
+        ...BASIC_PROPS,
+        formatOptionLabel: (
+          { label, value }: Option,
+          { context }: FormatOptionLabelMeta<Option>
+        ) => `${label} ${value} ${context}`,
+        value: OPTIONS[0],
+      },
+      valueComponentSelector: '.react-select__single-value',
+      expectedOptions: '0 zero value',
+    },
+    'multi select > should format label of options according to text returned by formatOptionLabel': {
+      props: {
+        ...BASIC_PROPS,
+        formatOptionLabel: (
+          { label, value }: Option,
+          { context }: FormatOptionLabelMeta<Option>
+        ) => `${label} ${value} ${context}`,
+        isMulti: true,
+        value: OPTIONS[0],
       },
+      valueComponentSelector: '.react-select__multi-value',
+      expectedOptions: '0 zero value',
+    },
   }
 );
 
@@ -230,15 +228,13 @@ cases(
     expect(container.querySelector('.react-select__menu')).toBeFalsy();
   },
   {
-    'single select > should show menu if menuIsOpen is true and hide menu if menuIsOpen prop is false':
-      {},
-    'multi select > should show menu if menuIsOpen is true and hide menu if menuIsOpen prop is false':
-      {
-        props: {
-          ...BASIC_PROPS,
-          isMulti: true,
-        },
+    'single select > should show menu if menuIsOpen is true and hide menu if menuIsOpen prop is false': {},
+    'multi select > should show menu if menuIsOpen is true and hide menu if menuIsOpen prop is false': {
+      props: {
+        ...BASIC_PROPS,
+        isMulti: true,
       },
+    },
   }
 );
 
@@ -294,19 +290,18 @@ cases(
       searchString: 'o',
       expectResultsLength: 5,
     },
-    'multi select > should filter all options other that options in value of select':
-      {
-        props: {
-          ...BASIC_PROPS,
-          filterOption: (value: FilterOptionOption<Option>, search: string) =>
-            value.value.indexOf(search) > -1,
-          isMulti: true,
-          menuIsOpen: true,
-          value: OPTIONS[0],
-        },
-        searchString: 'o',
-        expectResultsLength: 4,
+    'multi select > should filter all options other that options in value of select': {
+      props: {
+        ...BASIC_PROPS,
+        filterOption: (value: FilterOptionOption<Option>, search: string) =>
+          value.value.indexOf(search) > -1,
+        isMulti: true,
+        menuIsOpen: true,
+        value: OPTIONS[0],
       },
+      searchString: 'o',
+      expectResultsLength: 4,
+    },
   }
 );
 
@@ -385,34 +380,32 @@ cases(
     );
   },
   {
-    'single Select > should show NoOptionsMessage returned from noOptionsMessage function prop':
-      {
-        props: {
-          ...BASIC_PROPS,
-          filterOption: (value: FilterOptionOption<Option>, search: string) =>
-            value.value.indexOf(search) > -1,
-          menuIsOpen: true,
-          noOptionsMessage: () =>
-            'this is custom no option message for single select',
-        },
-        expectNoOptionsMessage:
+    'single Select > should show NoOptionsMessage returned from noOptionsMessage function prop': {
+      props: {
+        ...BASIC_PROPS,
+        filterOption: (value: FilterOptionOption<Option>, search: string) =>
+          value.value.indexOf(search) > -1,
+        menuIsOpen: true,
+        noOptionsMessage: () =>
           'this is custom no option message for single select',
-        searchString: 'some text not in options',
-      },
-    'multi select > should show NoOptionsMessage returned from noOptionsMessage function prop':
-      {
-        props: {
-          ...BASIC_PROPS,
-          filterOption: (value: FilterOptionOption<Option>, search: string) =>
-            value.value.indexOf(search) > -1,
-          menuIsOpen: true,
-          noOptionsMessage: () =>
-            'this is custom no option message for multi select',
-        },
-        expectNoOptionsMessage:
+      },
+      expectNoOptionsMessage:
+        'this is custom no option message for single select',
+      searchString: 'some text not in options',
+    },
+    'multi select > should show NoOptionsMessage returned from noOptionsMessage function prop': {
+      props: {
+        ...BASIC_PROPS,
+        filterOption: (value: FilterOptionOption<Option>, search: string) =>
+          value.value.indexOf(search) > -1,
+        menuIsOpen: true,
+        noOptionsMessage: () =>
           'this is custom no option message for multi select',
-        searchString: 'some text not in options',
       },
+      expectNoOptionsMessage:
+        'this is custom no option message for multi select',
+      searchString: 'some text not in options',
+    },
   }
 );
 
@@ -441,14 +434,13 @@ cases(
       },
       expectedValue: [{ label: '2', value: 'two' }],
     },
-    'single select > with option values as number > should set it as initial value':
-      {
-        props: {
-          ...BASIC_PROPS,
-          value: OPTIONS_NUMBER_VALUE[2],
-        },
-        expectedValue: [{ label: '2', value: 2 }],
+    'single select > with option values as number > should set it as initial value': {
+      props: {
+        ...BASIC_PROPS,
+        value: OPTIONS_NUMBER_VALUE[2],
       },
+      expectedValue: [{ label: '2', value: 2 }],
+    },
     'multi select > should set it as initial value': {
       props: {
         ...BASIC_PROPS,
@@ -457,15 +449,14 @@ cases(
       },
       expectedValue: [{ label: '1', value: 'one' }],
     },
-    'multi select > with option values as number > should set it as initial value':
-      {
-        props: {
-          ...BASIC_PROPS,
-          isMulti: true,
-          value: OPTIONS_NUMBER_VALUE[1],
-        },
-        expectedValue: [{ label: '1', value: 1 }],
+    'multi select > with option values as number > should set it as initial value': {
+      props: {
+        ...BASIC_PROPS,
+        isMulti: true,
+        value: OPTIONS_NUMBER_VALUE[1],
       },
+      expectedValue: [{ label: '1', value: 1 }],
+    },
   }
 );
 
@@ -501,17 +492,16 @@ cases(
       expectedInitialValue: 'one',
       expectedUpdatedValue: 'three',
     },
-    'single select > value of options is number > should update the value when prop is updated':
-      {
-        props: {
-          ...BASIC_PROPS,
-          options: OPTIONS_NUMBER_VALUE,
-          value: OPTIONS_NUMBER_VALUE[2],
-        },
-        updateValueTo: OPTIONS_NUMBER_VALUE[3],
-        expectedInitialValue: '2',
-        expectedUpdatedValue: '3',
+    'single select > value of options is number > should update the value when prop is updated': {
+      props: {
+        ...BASIC_PROPS,
+        options: OPTIONS_NUMBER_VALUE,
+        value: OPTIONS_NUMBER_VALUE[2],
       },
+      updateValueTo: OPTIONS_NUMBER_VALUE[3],
+      expectedInitialValue: '2',
+      expectedUpdatedValue: '3',
+    },
     'multi select > should update the value when prop is updated': {
       props: {
         ...BASIC_PROPS,
@@ -522,19 +512,18 @@ cases(
       expectedInitialValue: 'one',
       expectedUpdatedValue: 'three',
     },
-    'multi select > value of options is number > should update the value when prop is updated':
-      {
-        props: {
-          ...BASIC_PROPS,
-          delimiter: ',',
-          isMulti: true,
-          options: OPTIONS_NUMBER_VALUE,
-          value: OPTIONS_NUMBER_VALUE[2],
-        },
-        updateValueTo: [OPTIONS_NUMBER_VALUE[3], OPTIONS_NUMBER_VALUE[2]],
-        expectedInitialValue: '2',
-        expectedUpdatedValue: '3,2',
+    'multi select > value of options is number > should update the value when prop is updated': {
+      props: {
+        ...BASIC_PROPS,
+        delimiter: ',',
+        isMulti: true,
+        options: OPTIONS_NUMBER_VALUE,
+        value: OPTIONS_NUMBER_VALUE[2],
       },
+      updateValueTo: [OPTIONS_NUMBER_VALUE[3], OPTIONS_NUMBER_VALUE[2]],
+      expectedInitialValue: '2',
+      expectedUpdatedValue: '3,2',
+    },
   }
 );
 
@@ -572,137 +561,125 @@ cases(
     });
   },
   {
-    'single select > option is clicked > should call onChange() prop with selected option':
-      {
-        event: ['click' as const] as const,
-        optionsSelected: { label: '2', value: 'two' },
-        expectedSelectedOption: { label: '2', value: 'two' },
-      },
-    'single select > option with number value > option is clicked > should call onChange() prop with selected option':
-      {
-        props: {
-          ...BASIC_PROPS,
-          menuIsOpen: true,
-          options: OPTIONS_NUMBER_VALUE,
-        },
-        event: ['click' as const] as const,
-        optionsSelected: { label: '0', value: 0 },
-        expectedSelectedOption: { label: '0', value: 0 },
-      },
-    'single select > option with boolean value > option is clicked > should call onChange() prop with selected option':
-      {
-        props: {
-          ...BASIC_PROPS,
-          menuIsOpen: true,
-          options: OPTIONS_BOOLEAN_VALUE,
-        },
-        event: ['click' as const] as const,
-        optionsSelected: { label: 'true', value: true },
-        expectedSelectedOption: { label: 'true', value: true },
-      },
-    'single select > tab key is pressed while focusing option > should call onChange() prop with selected option':
-      {
-        event: ['keyDown' as const, { keyCode: 9, key: 'Tab' }] as const,
-        optionsSelected: { label: '1', value: 'one' },
-        focusedOption: { label: '1', value: 'one' },
-        expectedSelectedOption: { label: '1', value: 'one' },
-      },
-    'single select > enter key is pressed while focusing option > should call onChange() prop with selected option':
-      {
-        event: ['keyDown' as const, { keyCode: 13, key: 'Enter' }] as const,
-        optionsSelected: { label: '3', value: 'three' },
-        focusedOption: { label: '3', value: 'three' },
-        expectedSelectedOption: { label: '3', value: 'three' },
-      },
-    'single select > space key is pressed while focusing option > should call onChange() prop with selected option':
-      {
-        event: ['keyDown' as const, { keyCode: 32, key: ' ' }] as const,
-        optionsSelected: { label: '1', value: 'one' },
-        focusedOption: { label: '1', value: 'one' },
-        expectedSelectedOption: { label: '1', value: 'one' },
-      },
-    'multi select > option is clicked > should call onChange() prop with selected option':
-      {
-        props: {
-          ...BASIC_PROPS,
-          isMulti: true,
-          menuIsOpen: true,
-          options: OPTIONS,
-        },
-        event: ['click' as const] as const,
-        optionsSelected: { label: '2', value: 'two' },
-        expectedSelectedOption: [{ label: '2', value: 'two' }],
-        expectedActionMetaOption: { label: '2', value: 'two' },
-      },
-    'multi select > option with number value > option is clicked > should call onChange() prop with selected option':
-      {
-        props: {
-          ...BASIC_PROPS,
-          isMulti: true,
-          menuIsOpen: true,
-          options: OPTIONS_NUMBER_VALUE,
-        },
-        event: ['click' as const] as const,
-        optionsSelected: { label: '0', value: 0 },
-        expectedSelectedOption: [{ label: '0', value: 0 }],
-        expectedActionMetaOption: { label: '0', value: 0 },
-      },
-    'multi select > option with boolean value > option is clicked > should call onChange() prop with selected option':
-      {
-        props: {
-          ...BASIC_PROPS,
-          isMulti: true,
-          menuIsOpen: true,
-          options: OPTIONS_BOOLEAN_VALUE,
-        },
-        event: ['click' as const] as const,
-        optionsSelected: { label: 'true', value: true },
-        expectedSelectedOption: [{ label: 'true', value: true }],
-        expectedActionMetaOption: { label: 'true', value: true },
-      },
-    'multi select > tab key is pressed while focusing option > should call onChange() prop with selected option':
-      {
-        props: {
-          ...BASIC_PROPS,
-          isMulti: true,
-          menuIsOpen: true,
-          options: OPTIONS,
-        },
-        event: ['keyDown' as const, { keyCode: 9, key: 'Tab' }] as const,
+    'single select > option is clicked > should call onChange() prop with selected option': {
+      event: ['click' as const] as const,
+      optionsSelected: { label: '2', value: 'two' },
+      expectedSelectedOption: { label: '2', value: 'two' },
+    },
+    'single select > option with number value > option is clicked > should call onChange() prop with selected option': {
+      props: {
+        ...BASIC_PROPS,
         menuIsOpen: true,
-        optionsSelected: { label: '1', value: 'one' },
-        focusedOption: { label: '1', value: 'one' },
-        expectedSelectedOption: [{ label: '1', value: 'one' }],
-        expectedActionMetaOption: { label: '1', value: 'one' },
-      },
-    'multi select > enter key is pressed while focusing option > should call onChange() prop with selected option':
-      {
-        props: {
-          ...BASIC_PROPS,
-          isMulti: true,
-          menuIsOpen: true,
-          options: OPTIONS,
-        },
-        event: ['keyDown' as const, { keyCode: 13, key: 'Enter' }] as const,
-        optionsSelected: { label: '3', value: 'three' },
-        focusedOption: { label: '3', value: 'three' },
-        expectedSelectedOption: [{ label: '3', value: 'three' }],
-        expectedActionMetaOption: { label: '3', value: 'three' },
-      },
-    'multi select > space key is pressed while focusing option > should call onChange() prop with selected option':
-      {
-        props: {
-          ...BASIC_PROPS,
-          isMulti: true,
-          menuIsOpen: true,
-          options: OPTIONS,
-        },
-        event: ['keyDown' as const, { keyCode: 32, key: ' ' }] as const,
-        optionsSelected: { label: '1', value: 'one' },
-        focusedOption: { label: '1', value: 'one' },
-        expectedSelectedOption: [{ label: '1', value: 'one' }],
-        expectedActionMetaOption: { label: '1', value: 'one' },
+        options: OPTIONS_NUMBER_VALUE,
+      },
+      event: ['click' as const] as const,
+      optionsSelected: { label: '0', value: 0 },
+      expectedSelectedOption: { label: '0', value: 0 },
+    },
+    'single select > option with boolean value > option is clicked > should call onChange() prop with selected option': {
+      props: {
+        ...BASIC_PROPS,
+        menuIsOpen: true,
+        options: OPTIONS_BOOLEAN_VALUE,
+      },
+      event: ['click' as const] as const,
+      optionsSelected: { label: 'true', value: true },
+      expectedSelectedOption: { label: 'true', value: true },
+    },
+    'single select > tab key is pressed while focusing option > should call onChange() prop with selected option': {
+      event: ['keyDown' as const, { keyCode: 9, key: 'Tab' }] as const,
+      optionsSelected: { label: '1', value: 'one' },
+      focusedOption: { label: '1', value: 'one' },
+      expectedSelectedOption: { label: '1', value: 'one' },
+    },
+    'single select > enter key is pressed while focusing option > should call onChange() prop with selected option': {
+      event: ['keyDown' as const, { keyCode: 13, key: 'Enter' }] as const,
+      optionsSelected: { label: '3', value: 'three' },
+      focusedOption: { label: '3', value: 'three' },
+      expectedSelectedOption: { label: '3', value: 'three' },
+    },
+    'single select > space key is pressed while focusing option > should call onChange() prop with selected option': {
+      event: ['keyDown' as const, { keyCode: 32, key: ' ' }] as const,
+      optionsSelected: { label: '1', value: 'one' },
+      focusedOption: { label: '1', value: 'one' },
+      expectedSelectedOption: { label: '1', value: 'one' },
+    },
+    'multi select > option is clicked > should call onChange() prop with selected option': {
+      props: {
+        ...BASIC_PROPS,
+        isMulti: true,
+        menuIsOpen: true,
+        options: OPTIONS,
+      },
+      event: ['click' as const] as const,
+      optionsSelected: { label: '2', value: 'two' },
+      expectedSelectedOption: [{ label: '2', value: 'two' }],
+      expectedActionMetaOption: { label: '2', value: 'two' },
+    },
+    'multi select > option with number value > option is clicked > should call onChange() prop with selected option': {
+      props: {
+        ...BASIC_PROPS,
+        isMulti: true,
+        menuIsOpen: true,
+        options: OPTIONS_NUMBER_VALUE,
+      },
+      event: ['click' as const] as const,
+      optionsSelected: { label: '0', value: 0 },
+      expectedSelectedOption: [{ label: '0', value: 0 }],
+      expectedActionMetaOption: { label: '0', value: 0 },
+    },
+    'multi select > option with boolean value > option is clicked > should call onChange() prop with selected option': {
+      props: {
+        ...BASIC_PROPS,
+        isMulti: true,
+        menuIsOpen: true,
+        options: OPTIONS_BOOLEAN_VALUE,
+      },
+      event: ['click' as const] as const,
+      optionsSelected: { label: 'true', value: true },
+      expectedSelectedOption: [{ label: 'true', value: true }],
+      expectedActionMetaOption: { label: 'true', value: true },
+    },
+    'multi select > tab key is pressed while focusing option > should call onChange() prop with selected option': {
+      props: {
+        ...BASIC_PROPS,
+        isMulti: true,
+        menuIsOpen: true,
+        options: OPTIONS,
       },
+      event: ['keyDown' as const, { keyCode: 9, key: 'Tab' }] as const,
+      menuIsOpen: true,
+      optionsSelected: { label: '1', value: 'one' },
+      focusedOption: { label: '1', value: 'one' },
+      expectedSelectedOption: [{ label: '1', value: 'one' }],
+      expectedActionMetaOption: { label: '1', value: 'one' },
+    },
+    'multi select > enter key is pressed while focusing option > should call onChange() prop with selected option': {
+      props: {
+        ...BASIC_PROPS,
+        isMulti: true,
+        menuIsOpen: true,
+        options: OPTIONS,
+      },
+      event: ['keyDown' as const, { keyCode: 13, key: 'Enter' }] as const,
+      optionsSelected: { label: '3', value: 'three' },
+      focusedOption: { label: '3', value: 'three' },
+      expectedSelectedOption: [{ label: '3', value: 'three' }],
+      expectedActionMetaOption: { label: '3', value: 'three' },
+    },
+    'multi select > space key is pressed while focusing option > should call onChange() prop with selected option': {
+      props: {
+        ...BASIC_PROPS,
+        isMulti: true,
+        menuIsOpen: true,
+        options: OPTIONS,
+      },
+      event: ['keyDown' as const, { keyCode: 32, key: ' ' }] as const,
+      optionsSelected: { label: '1', value: 'one' },
+      focusedOption: { label: '1', value: 'one' },
+      expectedSelectedOption: [{ label: '1', value: 'one' }],
+      expectedActionMetaOption: { label: '1', value: 'one' },
+    },
   }
 );
 
@@ -774,82 +751,76 @@ cases<CallsOnOnDeselectChangeOpts>(
     });
   },
   {
-    'option is clicked > should call onChange() prop with correct selected options and meta':
-      {
-        props: {
-          ...BASIC_PROPS,
-          options: OPTIONS,
-          value: [{ label: '2', value: 'two' }],
-        },
-        event: ['click'],
-        optionsSelected: { label: '2', value: 'two' },
-        expectedSelectedOption: [],
-        expectedMetaOption: { label: '2', value: 'two' },
-      },
-    'option with number value > option is clicked > should call onChange() prop with selected option':
-      {
-        props: {
-          ...BASIC_PROPS,
-          options: OPTIONS_NUMBER_VALUE,
-          value: [{ label: '0', value: 0 }],
-        },
-        event: ['click'],
-        optionsSelected: { label: '0', value: 0 },
-        expectedSelectedOption: [],
-        expectedMetaOption: { label: '0', value: 0 },
-      },
-    'option with boolean value > option is clicked > should call onChange() prop with selected option':
-      {
-        props: {
-          ...BASIC_PROPS,
-          options: OPTIONS_BOOLEAN_VALUE,
-          value: [{ label: 'true', value: true }],
-        },
-        event: ['click'],
-        optionsSelected: { label: 'true', value: true },
-        expectedSelectedOption: [],
-        expectedMetaOption: { label: 'true', value: true },
-      },
-    'tab key is pressed while focusing option > should call onChange() prop with selected option':
-      {
-        props: {
-          ...BASIC_PROPS,
-          options: OPTIONS,
-          value: [{ label: '1', value: 'one' }],
-        },
-        event: ['keyDown', { keyCode: 9, key: 'Tab' }],
-        menuIsOpen: true,
-        optionsSelected: { label: '1', value: 'one' },
-        focusedOption: { label: '1', value: 'one' },
-        expectedSelectedOption: [],
-        expectedMetaOption: { label: '1', value: 'one' },
-      },
-    'enter key is pressed while focusing option > should call onChange() prop with selected option':
-      {
-        props: {
-          ...BASIC_PROPS,
-          options: OPTIONS,
-          value: { label: '3', value: 'three' },
-        },
-        event: ['keyDown', { keyCode: 13, key: 'Enter' }],
-        optionsSelected: { label: '3', value: 'three' },
-        focusedOption: { label: '3', value: 'three' },
-        expectedSelectedOption: [],
-        expectedMetaOption: { label: '3', value: 'three' },
-      },
-    'space key is pressed while focusing option > should call onChange() prop with selected option':
-      {
-        props: {
-          ...BASIC_PROPS,
-          options: OPTIONS,
-          value: [{ label: '1', value: 'one' }],
-        },
-        event: ['keyDown', { keyCode: 32, key: ' ' }],
-        optionsSelected: { label: '1', value: 'one' },
-        focusedOption: { label: '1', value: 'one' },
-        expectedSelectedOption: [],
-        expectedMetaOption: { label: '1', value: 'one' },
+    'option is clicked > should call onChange() prop with correct selected options and meta': {
+      props: {
+        ...BASIC_PROPS,
+        options: OPTIONS,
+        value: [{ label: '2', value: 'two' }],
+      },
+      event: ['click'],
+      optionsSelected: { label: '2', value: 'two' },
+      expectedSelectedOption: [],
+      expectedMetaOption: { label: '2', value: 'two' },
+    },
+    'option with number value > option is clicked > should call onChange() prop with selected option': {
+      props: {
+        ...BASIC_PROPS,
+        options: OPTIONS_NUMBER_VALUE,
+        value: [{ label: '0', value: 0 }],
+      },
+      event: ['click'],
+      optionsSelected: { label: '0', value: 0 },
+      expectedSelectedOption: [],
+      expectedMetaOption: { label: '0', value: 0 },
+    },
+    'option with boolean value > option is clicked > should call onChange() prop with selected option': {
+      props: {
+        ...BASIC_PROPS,
+        options: OPTIONS_BOOLEAN_VALUE,
+        value: [{ label: 'true', value: true }],
+      },
+      event: ['click'],
+      optionsSelected: { label: 'true', value: true },
+      expectedSelectedOption: [],
+      expectedMetaOption: { label: 'true', value: true },
+    },
+    'tab key is pressed while focusing option > should call onChange() prop with selected option': {
+      props: {
+        ...BASIC_PROPS,
+        options: OPTIONS,
+        value: [{ label: '1', value: 'one' }],
+      },
+      event: ['keyDown', { keyCode: 9, key: 'Tab' }],
+      menuIsOpen: true,
+      optionsSelected: { label: '1', value: 'one' },
+      focusedOption: { label: '1', value: 'one' },
+      expectedSelectedOption: [],
+      expectedMetaOption: { label: '1', value: 'one' },
+    },
+    'enter key is pressed while focusing option > should call onChange() prop with selected option': {
+      props: {
+        ...BASIC_PROPS,
+        options: OPTIONS,
+        value: { label: '3', value: 'three' },
+      },
+      event: ['keyDown', { keyCode: 13, key: 'Enter' }],
+      optionsSelected: { label: '3', value: 'three' },
+      focusedOption: { label: '3', value: 'three' },
+      expectedSelectedOption: [],
+      expectedMetaOption: { label: '3', value: 'three' },
+    },
+    'space key is pressed while focusing option > should call onChange() prop with selected option': {
+      props: {
+        ...BASIC_PROPS,
+        options: OPTIONS,
+        value: [{ label: '1', value: 'one' }],
       },
+      event: ['keyDown', { keyCode: 32, key: ' ' }],
+      optionsSelected: { label: '1', value: 'one' },
+      focusedOption: { label: '1', value: 'one' },
+      expectedSelectedOption: [],
+      expectedMetaOption: { label: '1', value: 'one' },
+    },
   }
 );
 
@@ -994,16 +965,15 @@ cases(
     ).toEqual(nextFocusOption.label);
   },
   {
-    'single select > ArrowDown key on first option should focus second option':
-      {
-        props: {
-          ...BASIC_PROPS,
-          menuIsOpen: true,
-        },
-        keyEvent: [{ keyCode: 40, key: 'ArrowDown' }],
-        selectedOption: OPTIONS[0],
-        nextFocusOption: OPTIONS[1],
+    'single select > ArrowDown key on first option should focus second option': {
+      props: {
+        ...BASIC_PROPS,
+        menuIsOpen: true,
       },
+      keyEvent: [{ keyCode: 40, key: 'ArrowDown' }],
+      selectedOption: OPTIONS[0],
+      nextFocusOption: OPTIONS[1],
+    },
     'single select > ArrowDown key on last option should focus first option': {
       props: {
         ...BASIC_PROPS,
@@ -1024,17 +994,16 @@ cases(
       selectedOption: OPTIONS[0],
       nextFocusOption: OPTIONS[OPTIONS.length - 1],
     },
-    'single select > ArrowUp key on last option should focus second last option':
-      {
-        props: {
-          ...BASIC_PROPS,
-          menuIsOpen: true,
-          options: OPTIONS,
-        },
-        keyEvent: [{ keyCode: 38, key: 'ArrowUp' }],
-        selectedOption: OPTIONS[OPTIONS.length - 1],
-        nextFocusOption: OPTIONS[OPTIONS.length - 2],
+    'single select > ArrowUp key on last option should focus second last option': {
+      props: {
+        ...BASIC_PROPS,
+        menuIsOpen: true,
+        options: OPTIONS,
       },
+      keyEvent: [{ keyCode: 38, key: 'ArrowUp' }],
+      selectedOption: OPTIONS[OPTIONS.length - 1],
+      nextFocusOption: OPTIONS[OPTIONS.length - 2],
+    },
     'single select > disabled options should be focusable': {
       props: {
         ...BASIC_PROPS,
@@ -1045,74 +1014,68 @@ cases(
       selectedOption: OPTIONS_DISABLED[0],
       nextFocusOption: OPTIONS_DISABLED[1],
     },
-    'single select > PageDown key takes us to next page with default page size of 5':
-      {
-        props: {
-          ...BASIC_PROPS,
-          menuIsOpen: true,
-          options: OPTIONS,
-        },
-        keyEvent: [{ keyCode: 34, key: 'PageDown' }],
-        selectedOption: OPTIONS[0],
-        nextFocusOption: OPTIONS[5],
-      },
-    'single select > PageDown key takes us to next page with custom pageSize 7':
-      {
-        props: {
-          ...BASIC_PROPS,
-          menuIsOpen: true,
-          pageSize: 7,
-          options: OPTIONS,
-        },
-        keyEvent: [{ keyCode: 34, key: 'PageDown' }],
-        selectedOption: OPTIONS[0],
-        nextFocusOption: OPTIONS[7],
-      },
-    'single select > PageDown key takes to the last option is options below is less then page size':
-      {
-        props: {
-          ...BASIC_PROPS,
-          menuIsOpen: true,
-          options: OPTIONS,
-        },
-        keyEvent: [{ keyCode: 34, key: 'PageDown' }],
-        selectedOption: OPTIONS[OPTIONS.length - 3],
-        nextFocusOption: OPTIONS[OPTIONS.length - 1],
-      },
-    'single select > PageUp key takes us to previous page with default page size of 5':
-      {
-        props: {
-          ...BASIC_PROPS,
-          menuIsOpen: true,
-          options: OPTIONS,
-        },
-        keyEvent: [{ keyCode: 33, key: 'PageUp' }],
-        selectedOption: OPTIONS[6],
-        nextFocusOption: OPTIONS[1],
-      },
-    'single select > PageUp key takes us to previous page with custom pageSize of 7':
-      {
-        props: {
-          ...BASIC_PROPS,
-          menuIsOpen: true,
-          pageSize: 7,
-          options: OPTIONS,
-        },
-        keyEvent: [{ keyCode: 33, key: 'PageUp' }],
-        selectedOption: OPTIONS[9],
-        nextFocusOption: OPTIONS[2],
-      },
-    'single select > PageUp key takes us to first option - (previous options < pageSize)':
-      {
-        props: {
-          ...BASIC_PROPS,
-          menuIsOpen: true,
-          options: OPTIONS,
-        },
-        keyEvent: [{ keyCode: 33, key: 'PageUp' }],
-        selectedOption: OPTIONS[1],
-        nextFocusOption: OPTIONS[0],
+    'single select > PageDown key takes us to next page with default page size of 5': {
+      props: {
+        ...BASIC_PROPS,
+        menuIsOpen: true,
+        options: OPTIONS,
+      },
+      keyEvent: [{ keyCode: 34, key: 'PageDown' }],
+      selectedOption: OPTIONS[0],
+      nextFocusOption: OPTIONS[5],
+    },
+    'single select > PageDown key takes us to next page with custom pageSize 7': {
+      props: {
+        ...BASIC_PROPS,
+        menuIsOpen: true,
+        pageSize: 7,
+        options: OPTIONS,
+      },
+      keyEvent: [{ keyCode: 34, key: 'PageDown' }],
+      selectedOption: OPTIONS[0],
+      nextFocusOption: OPTIONS[7],
+    },
+    'single select > PageDown key takes to the last option is options below is less then page size': {
+      props: {
+        ...BASIC_PROPS,
+        menuIsOpen: true,
+        options: OPTIONS,
+      },
+      keyEvent: [{ keyCode: 34, key: 'PageDown' }],
+      selectedOption: OPTIONS[OPTIONS.length - 3],
+      nextFocusOption: OPTIONS[OPTIONS.length - 1],
+    },
+    'single select > PageUp key takes us to previous page with default page size of 5': {
+      props: {
+        ...BASIC_PROPS,
+        menuIsOpen: true,
+        options: OPTIONS,
+      },
+      keyEvent: [{ keyCode: 33, key: 'PageUp' }],
+      selectedOption: OPTIONS[6],
+      nextFocusOption: OPTIONS[1],
+    },
+    'single select > PageUp key takes us to previous page with custom pageSize of 7': {
+      props: {
+        ...BASIC_PROPS,
+        menuIsOpen: true,
+        pageSize: 7,
+        options: OPTIONS,
       },
+      keyEvent: [{ keyCode: 33, key: 'PageUp' }],
+      selectedOption: OPTIONS[9],
+      nextFocusOption: OPTIONS[2],
+    },
+    'single select > PageUp key takes us to first option - (previous options < pageSize)': {
+      props: {
+        ...BASIC_PROPS,
+        menuIsOpen: true,
+        options: OPTIONS,
+      },
+      keyEvent: [{ keyCode: 33, key: 'PageUp' }],
+      selectedOption: OPTIONS[1],
+      nextFocusOption: OPTIONS[0],
+    },
     'single select > Home key takes up to the first option': {
       props: {
         ...BASIC_PROPS,
@@ -1166,92 +1129,85 @@ cases(
       selectedOption: OPTIONS[0],
       nextFocusOption: OPTIONS[OPTIONS.length - 1],
     },
-    'multi select > ArrowUp key on last option should focus second last option':
-      {
-        props: {
-          ...BASIC_PROPS,
-          isMulti: true,
-          menuIsOpen: true,
-          options: OPTIONS,
-        },
-        keyEvent: [{ keyCode: 38, key: 'ArrowUp' }],
-        selectedOption: OPTIONS[OPTIONS.length - 1],
-        nextFocusOption: OPTIONS[OPTIONS.length - 2],
-      },
-    'multi select > PageDown key takes us to next page with default page size of 5':
-      {
-        props: {
-          ...BASIC_PROPS,
-          isMulti: true,
-          menuIsOpen: true,
-          options: OPTIONS,
-        },
-        keyEvent: [{ keyCode: 34, key: 'PageDown' }],
-        selectedOption: OPTIONS[0],
-        nextFocusOption: OPTIONS[5],
-      },
-    'multi select > PageDown key takes us to next page with custom pageSize of 8':
-      {
-        props: {
-          ...BASIC_PROPS,
-          isMulti: true,
-          menuIsOpen: true,
-          pageSize: 8,
-          options: OPTIONS,
-        },
-        keyEvent: [{ keyCode: 34, key: 'PageDown' }],
-        selectedOption: OPTIONS[0],
-        nextFocusOption: OPTIONS[8],
-      },
-    'multi select > PageDown key takes to the last option is options below is less then page size':
-      {
-        props: {
-          ...BASIC_PROPS,
-          isMulti: true,
-          menuIsOpen: true,
-          options: OPTIONS,
-        },
-        keyEvent: [{ keyCode: 34, key: 'PageDown' }],
-        selectedOption: OPTIONS[OPTIONS.length - 3],
-        nextFocusOption: OPTIONS[OPTIONS.length - 1],
-      },
-    'multi select > PageUp key takes us to previous page with default page size of 5':
-      {
-        props: {
-          ...BASIC_PROPS,
-          isMulti: true,
-          menuIsOpen: true,
-          options: OPTIONS,
-        },
-        keyEvent: [{ keyCode: 33, key: 'PageUp' }],
-        selectedOption: OPTIONS[6],
-        nextFocusOption: OPTIONS[1],
-      },
-    'multi select > PageUp key takes us to previous page with default page size of 9':
-      {
-        props: {
-          ...BASIC_PROPS,
-          isMulti: true,
-          menuIsOpen: true,
-          pageSize: 9,
-          options: OPTIONS,
-        },
-        keyEvent: [{ keyCode: 33, key: 'PageUp' }],
-        selectedOption: OPTIONS[10],
-        nextFocusOption: OPTIONS[1],
-      },
-    'multi select > PageUp key takes us to first option - previous options < pageSize':
-      {
-        props: {
-          ...BASIC_PROPS,
-          isMulti: true,
-          menuIsOpen: true,
-          options: OPTIONS,
-        },
-        keyEvent: [{ keyCode: 33, key: 'PageUp' }],
-        selectedOption: OPTIONS[1],
-        nextFocusOption: OPTIONS[0],
+    'multi select > ArrowUp key on last option should focus second last option': {
+      props: {
+        ...BASIC_PROPS,
+        isMulti: true,
+        menuIsOpen: true,
+        options: OPTIONS,
+      },
+      keyEvent: [{ keyCode: 38, key: 'ArrowUp' }],
+      selectedOption: OPTIONS[OPTIONS.length - 1],
+      nextFocusOption: OPTIONS[OPTIONS.length - 2],
+    },
+    'multi select > PageDown key takes us to next page with default page size of 5': {
+      props: {
+        ...BASIC_PROPS,
+        isMulti: true,
+        menuIsOpen: true,
+        options: OPTIONS,
+      },
+      keyEvent: [{ keyCode: 34, key: 'PageDown' }],
+      selectedOption: OPTIONS[0],
+      nextFocusOption: OPTIONS[5],
+    },
+    'multi select > PageDown key takes us to next page with custom pageSize of 8': {
+      props: {
+        ...BASIC_PROPS,
+        isMulti: true,
+        menuIsOpen: true,
+        pageSize: 8,
+        options: OPTIONS,
+      },
+      keyEvent: [{ keyCode: 34, key: 'PageDown' }],
+      selectedOption: OPTIONS[0],
+      nextFocusOption: OPTIONS[8],
+    },
+    'multi select > PageDown key takes to the last option is options below is less then page size': {
+      props: {
+        ...BASIC_PROPS,
+        isMulti: true,
+        menuIsOpen: true,
+        options: OPTIONS,
+      },
+      keyEvent: [{ keyCode: 34, key: 'PageDown' }],
+      selectedOption: OPTIONS[OPTIONS.length - 3],
+      nextFocusOption: OPTIONS[OPTIONS.length - 1],
+    },
+    'multi select > PageUp key takes us to previous page with default page size of 5': {
+      props: {
+        ...BASIC_PROPS,
+        isMulti: true,
+        menuIsOpen: true,
+        options: OPTIONS,
       },
+      keyEvent: [{ keyCode: 33, key: 'PageUp' }],
+      selectedOption: OPTIONS[6],
+      nextFocusOption: OPTIONS[1],
+    },
+    'multi select > PageUp key takes us to previous page with default page size of 9': {
+      props: {
+        ...BASIC_PROPS,
+        isMulti: true,
+        menuIsOpen: true,
+        pageSize: 9,
+        options: OPTIONS,
+      },
+      keyEvent: [{ keyCode: 33, key: 'PageUp' }],
+      selectedOption: OPTIONS[10],
+      nextFocusOption: OPTIONS[1],
+    },
+    'multi select > PageUp key takes us to first option - previous options < pageSize': {
+      props: {
+        ...BASIC_PROPS,
+        isMulti: true,
+        menuIsOpen: true,
+        options: OPTIONS,
+      },
+      keyEvent: [{ keyCode: 33, key: 'PageUp' }],
+      selectedOption: OPTIONS[1],
+      nextFocusOption: OPTIONS[0],
+    },
     'multi select > Home key takes up to the first option': {
       props: {
         ...BASIC_PROPS,
@@ -1293,25 +1249,23 @@ cases(
     expect(spy).toHaveBeenCalledWith('', { action: 'menu-close' });
   },
   {
-    'single select > should call onInputChange prop with empty string as inputValue':
-      {
-        props: {
-          ...BASIC_PROPS,
-          inputValue: 'test',
-          menuIsOpen: true,
-          value: OPTIONS[0],
-        },
+    'single select > should call onInputChange prop with empty string as inputValue': {
+      props: {
+        ...BASIC_PROPS,
+        inputValue: 'test',
+        menuIsOpen: true,
+        value: OPTIONS[0],
       },
-    'multi select > should call onInputChange prop with empty string as inputValue':
-      {
-        props: {
-          ...BASIC_PROPS,
-          inputValue: 'test',
-          isMulti: true,
-          menuIsOpen: true,
-          value: OPTIONS[0],
-        },
+    },
+    'multi select > should call onInputChange prop with empty string as inputValue': {
+      props: {
+        ...BASIC_PROPS,
+        inputValue: 'test',
+        isMulti: true,
+        menuIsOpen: true,
+        value: OPTIONS[0],
       },
+    },
   }
 );
 
@@ -1332,15 +1286,13 @@ cases(
     expect(onMenuOpenSpy).toHaveBeenCalled();
   },
   {
-    'single select > should call onMenuOpen prop when select is opened and onMenuClose prop when select is closed':
-      {},
-    'multi select > should call onMenuOpen prop when select is opened and onMenuClose prop when select is closed':
-      {
-        props: {
-          ...BASIC_PROPS,
-          isMulti: true,
-        },
+    'single select > should call onMenuOpen prop when select is opened and onMenuClose prop when select is closed': {},
+    'multi select > should call onMenuOpen prop when select is opened and onMenuClose prop when select is closed': {
+      props: {
+        ...BASIC_PROPS,
+        isMulti: true,
       },
+    },
   }
 );
 
@@ -1359,15 +1311,13 @@ cases(
     expect(onMenuCloseSpy).toHaveBeenCalled();
   },
   {
-    'single select > should call onMenuOpen prop when select is opened and onMenuClose prop when select is closed':
-      {},
-    'multi select > should call onMenuOpen prop when select is opened and onMenuClose prop when select is closed':
-      {
-        props: {
-          ...BASIC_PROPS,
-          isMulti: true,
-        },
+    'single select > should call onMenuOpen prop when select is opened and onMenuClose prop when select is closed': {},
+    'multi select > should call onMenuOpen prop when select is opened and onMenuClose prop when select is closed': {
+      props: {
+        ...BASIC_PROPS,
+        isMulti: true,
       },
+    },
   }
 );
 
@@ -1408,14 +1358,13 @@ cases<ClickingEnterOpts>(
     expect(event.defaultPrevented).toBe(expectedValue);
   },
   {
-    'while menuIsOpen && focusedOption && !isComposing  > should invoke event.preventDefault':
-      {
-        props: {
-          ...BASIC_PROPS,
-          menuIsOpen: true,
-        },
-        expectedValue: true,
+    'while menuIsOpen && focusedOption && !isComposing  > should invoke event.preventDefault': {
+      props: {
+        ...BASIC_PROPS,
+        menuIsOpen: true,
       },
+      expectedValue: true,
+    },
     'while !menuIsOpen > should not invoke event.preventDefault': {
       props: {
         ...BASIC_PROPS,
@@ -1459,18 +1408,16 @@ cases(
     expect(onMenuCloseSpy).not.toHaveBeenCalled();
   },
   {
-    'single select > secondary click is ignored > should not call onMenuOpen and onMenuClose prop':
-      {
-        skip: true,
-      },
-    'multi select > secondary click is ignored > should not call onMenuOpen and onMenuClose prop':
-      {
-        props: {
-          ...BASIC_PROPS,
-          isMulti: true,
-        },
-        skip: true,
+    'single select > secondary click is ignored > should not call onMenuOpen and onMenuClose prop': {
+      skip: true,
+    },
+    'multi select > secondary click is ignored > should not call onMenuOpen and onMenuClose prop': {
+      props: {
+        ...BASIC_PROPS,
+        isMulti: true,
       },
+      skip: true,
+    },
   }
 );
 
@@ -1515,24 +1462,22 @@ cases(
       },
       expectedValue: 'three',
     },
-    'single select > options with number values > should set value of input as value prop':
-      {
-        props: {
-          ...BASIC_PROPS,
-          options: OPTIONS_NUMBER_VALUE,
-          value: OPTIONS_NUMBER_VALUE[3],
-        },
-        expectedValue: '3',
-      },
-    'single select > options with boolean values > should set value of input as value prop':
-      {
-        props: {
-          ...BASIC_PROPS,
-          options: OPTIONS_BOOLEAN_VALUE,
-          value: OPTIONS_BOOLEAN_VALUE[1],
-        },
-        expectedValue: 'false',
+    'single select > options with number values > should set value of input as value prop': {
+      props: {
+        ...BASIC_PROPS,
+        options: OPTIONS_NUMBER_VALUE,
+        value: OPTIONS_NUMBER_VALUE[3],
+      },
+      expectedValue: '3',
+    },
+    'single select > options with boolean values > should set value of input as value prop': {
+      props: {
+        ...BASIC_PROPS,
+        options: OPTIONS_BOOLEAN_VALUE,
+        value: OPTIONS_BOOLEAN_VALUE[1],
       },
+      expectedValue: 'false',
+    },
     'multi select > should set value of input as value prop': {
       props: {
         ...BASIC_PROPS,
@@ -1541,58 +1486,53 @@ cases(
       },
       expectedValue: 'three',
     },
-    'multi select > with delimiter prop > should set value of input as value prop':
-      {
-        props: {
-          ...BASIC_PROPS,
-          delimiter: ', ',
-          isMulti: true,
-          value: [OPTIONS[3], OPTIONS[5]],
-        },
-        expectedValue: 'three, five',
-      },
-    'multi select > options with number values > should set value of input as value prop':
-      {
-        props: {
-          ...BASIC_PROPS,
-          isMulti: true,
-          options: OPTIONS_NUMBER_VALUE,
-          value: OPTIONS_NUMBER_VALUE[3],
-        },
-        expectedValue: '3',
-      },
-    'multi select > with delimiter prop > options with number values > should set value of input as value prop':
-      {
-        props: {
-          ...BASIC_PROPS,
-          delimiter: ', ',
-          isMulti: true,
-          options: OPTIONS_NUMBER_VALUE,
-          value: [OPTIONS_NUMBER_VALUE[3], OPTIONS_NUMBER_VALUE[1]],
-        },
-        expectedValue: '3, 1',
-      },
-    'multi select > options with boolean values > should set value of input as value prop':
-      {
-        props: {
-          ...BASIC_PROPS,
-          isMulti: true,
-          options: OPTIONS_BOOLEAN_VALUE,
-          value: OPTIONS_BOOLEAN_VALUE[1],
-        },
-        expectedValue: 'false',
-      },
-    'multi select > with delimiter prop > options with boolean values > should set value of input as value prop':
-      {
-        props: {
-          ...BASIC_PROPS,
-          delimiter: ', ',
-          isMulti: true,
-          options: OPTIONS_BOOLEAN_VALUE,
-          value: [OPTIONS_BOOLEAN_VALUE[1], OPTIONS_BOOLEAN_VALUE[0]],
-        },
-        expectedValue: 'false, true',
+    'multi select > with delimiter prop > should set value of input as value prop': {
+      props: {
+        ...BASIC_PROPS,
+        delimiter: ', ',
+        isMulti: true,
+        value: [OPTIONS[3], OPTIONS[5]],
+      },
+      expectedValue: 'three, five',
+    },
+    'multi select > options with number values > should set value of input as value prop': {
+      props: {
+        ...BASIC_PROPS,
+        isMulti: true,
+        options: OPTIONS_NUMBER_VALUE,
+        value: OPTIONS_NUMBER_VALUE[3],
+      },
+      expectedValue: '3',
+    },
+    'multi select > with delimiter prop > options with number values > should set value of input as value prop': {
+      props: {
+        ...BASIC_PROPS,
+        delimiter: ', ',
+        isMulti: true,
+        options: OPTIONS_NUMBER_VALUE,
+        value: [OPTIONS_NUMBER_VALUE[3], OPTIONS_NUMBER_VALUE[1]],
       },
+      expectedValue: '3, 1',
+    },
+    'multi select > options with boolean values > should set value of input as value prop': {
+      props: {
+        ...BASIC_PROPS,
+        isMulti: true,
+        options: OPTIONS_BOOLEAN_VALUE,
+        value: OPTIONS_BOOLEAN_VALUE[1],
+      },
+      expectedValue: 'false',
+    },
+    'multi select > with delimiter prop > options with boolean values > should set value of input as value prop': {
+      props: {
+        ...BASIC_PROPS,
+        delimiter: ', ',
+        isMulti: true,
+        options: OPTIONS_BOOLEAN_VALUE,
+        value: [OPTIONS_BOOLEAN_VALUE[1], OPTIONS_BOOLEAN_VALUE[0]],
+      },
+      expectedValue: 'false, true',
+    },
   }
 );
 
@@ -1622,29 +1562,27 @@ cases(
     });
   },
   {
-    'single select > should add isDisabled as true prop only to options that are disabled':
-      {
-        props: {
-          ...BASIC_PROPS,
-          menuIsOpen: true,
-          isOptionDisabled: (option: Option) =>
-            ['zero', 'two', 'five', 'ten'].indexOf(option.value) > -1,
-        },
-        expectedEnabledOption: ['1', '3', '11'],
-        expectedDisabledOption: ['0', '2', '5'],
-      },
-    'multi select > should add isDisabled as true prop only to options that are disabled':
-      {
-        props: {
-          ...BASIC_PROPS,
-          isMulti: true,
-          menuIsOpen: true,
-          isOptionDisabled: (option: Option) =>
-            ['zero', 'two', 'five', 'ten'].indexOf(option.value) > -1,
-        },
-        expectedEnabledOption: ['1', '3', '11'],
-        expectedDisabledOption: ['0', '2', '5'],
+    'single select > should add isDisabled as true prop only to options that are disabled': {
+      props: {
+        ...BASIC_PROPS,
+        menuIsOpen: true,
+        isOptionDisabled: (option: Option) =>
+          ['zero', 'two', 'five', 'ten'].indexOf(option.value) > -1,
+      },
+      expectedEnabledOption: ['1', '3', '11'],
+      expectedDisabledOption: ['0', '2', '5'],
+    },
+    'multi select > should add isDisabled as true prop only to options that are disabled': {
+      props: {
+        ...BASIC_PROPS,
+        isMulti: true,
+        menuIsOpen: true,
+        isOptionDisabled: (option: Option) =>
+          ['zero', 'two', 'five', 'ten'].indexOf(option.value) > -1,
       },
+      expectedEnabledOption: ['1', '3', '11'],
+      expectedDisabledOption: ['0', '2', '5'],
+    },
   }
 );
 
@@ -1968,18 +1906,16 @@ cases(
     ).toBe('1');
   },
   {
-    'single select > should update aria-activedescendant as per focused option':
-      {
-        skip: true,
-      },
-    'multi select > should update aria-activedescendant as per focused option':
-      {
-        skip: true,
-        props: {
-          ...BASIC_PROPS,
-          value: { label: '2', value: 'two' },
-        },
+    'single select > should update aria-activedescendant as per focused option': {
+      skip: true,
+    },
+    'multi select > should update aria-activedescendant as per focused option': {
+      skip: true,
+      props: {
+        ...BASIC_PROPS,
+        value: { label: '2', value: 'two' },
       },
+    },
   }
 );
 
@@ -2072,6 +2008,7 @@ cases(
 );
 
 test('accessibility > to show the number of options available in A11yText when the menu is Open', () => {
+  jest.useFakeTimers();
   let { container, rerender } = render(
     <Select {...BASIC_PROPS} inputValue={''} autoFocus menuIsOpen />
   );
@@ -2083,6 +2020,10 @@ test('accessibility > to show the number of options available in A11yText when t
   const liveRegionId = '#aria-context';
   fireEvent.focus(container.querySelector('input.react-select__input')!);
 
+  act(() => {
+    jest.runAllTimers();
+  });
+
   expect(container.querySelector(liveRegionId)!.textContent).toMatch(
     /17 results available/
   );
@@ -2104,6 +2045,7 @@ test('accessibility > to show the number of options available in A11yText when t
 });
 
 test('accessibility > interacting with disabled options shows correct A11yText', () => {
+  jest.useFakeTimers();
   let { container } = render(
     <Select
       {...BASIC_PROPS}
@@ -2121,6 +2063,10 @@ test('accessibility > interacting with disabled options shows correct A11yText',
   fireEvent.keyDown(menu!, { keyCode: 40, key: 'ArrowDown' });
   fireEvent.keyDown(menu!, { keyCode: 40, key: 'ArrowDown' });
 
+  act(() => {
+    jest.runAllTimers();
+  });
+
   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.'
   );
@@ -2137,6 +2083,7 @@ test('accessibility > interacting with disabled options shows correct A11yText',
 });
 
 test('accessibility > interacting with multi values options shows correct A11yText', () => {
+  jest.useFakeTimers();
   let renderProps = {
     ...BASIC_PROPS,
     options: OPTIONS_DISABLED,
@@ -2155,6 +2102,11 @@ test('accessibility > interacting with multi values options shows correct A11yTe
   let input = container.querySelector('.react-select__value-container input')!;
 
   fireEvent.focus(container.querySelector('input.react-select__input')!);
+
+  act(() => {
+    jest.runAllTimers();
+  });
+
   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'
   );
@@ -2188,6 +2140,7 @@ test('accessibility > interacting with multi values options shows correct A11yTe
 });
 
 test('accessibility > screenReaderStatus function prop > to pass custom text to A11yText', () => {
+  jest.useFakeTimers();
   const screenReaderStatus = ({ count }: { count: number }) =>
     `There are ${count} options available`;
 
@@ -2214,6 +2167,10 @@ test('accessibility > screenReaderStatus function prop > to pass custom text to
 
   fireEvent.focus(container.querySelector('input.react-select__input')!);
 
+  act(() => {
+    jest.runAllTimers();
+  });
+
   expect(container.querySelector(liveRegionId)!.textContent).toMatch(
     'There are 17 options available'
   );
@@ -2235,16 +2192,20 @@ test('accessibility > screenReaderStatus function prop > to pass custom text to
 });
 
 test('accessibility > A11yTexts can be provided through ariaLiveMessages prop', () => {
-  const ariaLiveMessages: AriaLiveMessages<Option, boolean, GroupBase<Option>> =
-    {
-      onChange: (props) => {
-        const { action, isDisabled, label } = props;
-        if (action === 'select-option' && !isDisabled) {
-          return `CUSTOM: option ${label} is selected.`;
-        }
-        return '';
-      },
-    };
+  jest.useFakeTimers();
+  const ariaLiveMessages: AriaLiveMessages<
+    Option,
+    boolean,
+    GroupBase<Option>
+  > = {
+    onChange: (props) => {
+      const { action, isDisabled, label } = props;
+      if (action === 'select-option' && !isDisabled) {
+        return `CUSTOM: option ${label} is selected.`;
+      }
+      return '';
+    },
+  };
 
   let { container } = render(
     <Select
@@ -2256,6 +2217,7 @@ test('accessibility > A11yTexts can be provided through ariaLiveMessages prop',
     />
   );
   const liveRegionEventId = '#aria-selection';
+
   fireEvent.focus(container.querySelector('input.react-select__input')!);
 
   let menu = container.querySelector('.react-select__menu')!;
@@ -2265,6 +2227,10 @@ test('accessibility > A11yTexts can be provided through ariaLiveMessages prop',
     key: 'Enter',
   });
 
+  act(() => {
+    jest.runAllTimers();
+  });
+
   expect(container.querySelector(liveRegionEventId)!.textContent).toMatch(
     'CUSTOM: option 0 is selected.'
   );
@@ -2316,21 +2282,19 @@ cases(
     expect(onFocusSpy).toHaveBeenCalledTimes(1);
   },
   {
-    'single select > should call auto focus only once when select is autoFocus':
-      {
-        props: {
-          ...BASIC_PROPS,
-          autoFocus: true,
-        },
+    'single select > should call auto focus only once when select is autoFocus': {
+      props: {
+        ...BASIC_PROPS,
+        autoFocus: true,
       },
-    'multi select > should call auto focus only once when select is autoFocus':
-      {
-        props: {
-          ...BASIC_PROPS,
-          autoFocus: true,
-          isMulti: true,
-        },
+    },
+    'multi select > should call auto focus only once when select is autoFocus': {
+      props: {
+        ...BASIC_PROPS,
+        autoFocus: true,
+        isMulti: true,
       },
+    },
   }
 );
 
@@ -2464,20 +2428,18 @@ cases(
     ).toBeInTheDocument();
   },
   {
-    'single select > should display placeholder once the value is removed from select':
-      {
-        props: {
-          ...BASIC_PROPS,
-          value: OPTIONS[0],
-        },
+    'single select > should display placeholder once the value is removed from select': {
+      props: {
+        ...BASIC_PROPS,
+        value: OPTIONS[0],
       },
-    'multi select > should display placeholder once the value is removed from select':
-      {
-        props: {
-          ...BASIC_PROPS,
-          value: OPTIONS[0],
-        },
+    },
+    'multi select > should display placeholder once the value is removed from select': {
+      props: {
+        ...BASIC_PROPS,
+        value: OPTIONS[0],
       },
+    },
   }
 );
 

From 660c18eeaf5c328a8811bddbe08cadd4ba3ad61f Mon Sep 17 00:00:00 2001
From: Matt Charlton <mcharlton@atlassian.com>
Date: Fri, 2 Jul 2021 12:11:59 +1000
Subject: [PATCH 08/24] add tests

---
 .../src/__tests__/Select.test.tsx             |  85 +++++
 .../src/__tests__/StateManaged.test.tsx       | 336 ++++++++----------
 2 files changed, 243 insertions(+), 178 deletions(-)

diff --git a/packages/react-select/src/__tests__/Select.test.tsx b/packages/react-select/src/__tests__/Select.test.tsx
index c1fdf6653f..148c6b267c 100644
--- a/packages/react-select/src/__tests__/Select.test.tsx
+++ b/packages/react-select/src/__tests__/Select.test.tsx
@@ -2218,6 +2218,8 @@ test('accessibility > A11yTexts can be provided through ariaLiveMessages prop',
   );
   const liveRegionEventId = '#aria-selection';
 
+  expect(container.querySelector(liveRegionEventId)!).toBeNull();
+
   fireEvent.focus(container.querySelector('input.react-select__input')!);
 
   let menu = container.querySelector('.react-select__menu')!;
@@ -2236,6 +2238,89 @@ test('accessibility > A11yTexts can be provided through ariaLiveMessages prop',
   );
 });
 
+test('accessibility > announces already selected values when focused', () => {
+  jest.useFakeTimers();
+
+  let { container } = render(
+    <Select {...BASIC_PROPS} options={OPTIONS} value={OPTIONS[0]} />
+  );
+  const liveRegionSelectionId = '#aria-selection';
+  const liveRegionContextId = '#aria-context';
+
+  // the live region should not be mounted yet
+  expect(container.querySelector(liveRegionSelectionId)!).toBeNull();
+
+  fireEvent.focus(container.querySelector('input.react-select__input')!);
+
+  act(() => {
+    // wait for live region setTimeout
+    jest.runAllTimers();
+  });
+
+  expect(container.querySelector(liveRegionContextId)!.textContent).toMatch(
+    ' Select is focused ,type to refine list, press Down to open the menu, '
+  );
+  expect(container.querySelector(liveRegionSelectionId)!.textContent).toMatch(
+    'option 0, selected.'
+  );
+});
+
+test('accessibility > announces cleared values and does not announce them when refocusing Select', () => {
+  jest.useFakeTimers();
+
+  let { container, rerender } = render(
+    <Select {...BASIC_PROPS} options={OPTIONS} value={OPTIONS[0]} isClearable />
+  );
+  const liveRegionSelectionId = '#aria-selection';
+  const liveRegionContextId = '#aria-context';
+
+  /**
+   * announce deselected value
+   */
+  fireEvent.focus(container.querySelector('input.react-select__input')!);
+  fireEvent.mouseDown(
+    container.querySelector('.react-select__clear-indicator')!
+  );
+  act(() => {
+    // wait for live region setTimeout
+    jest.runAllTimers();
+  });
+  expect(container.querySelector(liveRegionSelectionId)!.textContent).toMatch(
+    'option 0, deselected.'
+  );
+
+  /**
+   * simulate tabbing back and forth
+   */
+  // blur the Select
+  fireEvent.blur(container.querySelector('input.react-select__input')!);
+  act(() => {
+    // wait for live region setTimeout
+    jest.runAllTimers();
+  });
+  expect(container.querySelector('[class$=A11yText]')!).toHaveAttribute(
+    'style',
+    'display: none;'
+  );
+  // the live region should not be mounted anymore
+  expect(container.querySelector(liveRegionSelectionId)!).toBeNull();
+
+  // there should no longer be a value selected
+  rerender(<Select {...BASIC_PROPS} options={OPTIONS} isClearable />);
+  // then focus the Select again
+  fireEvent.focus(container.querySelector('input.react-select__input')!);
+  act(() => {
+    // wait for live region setTimeout
+    jest.runAllTimers();
+  });
+
+  // should not announce the deselscted option
+  expect(container.querySelector(liveRegionContextId)!.textContent).toMatch(
+    ' Select is focused ,type to refine list, press Down to open the menu, '
+  );
+  expect(container.querySelector(liveRegionSelectionId)!.textContent).toBe('');
+});
+
 test('closeMenuOnSelect prop > when passed as false it should not call onMenuClose on selecting option', () => {
   let onMenuCloseSpy = jest.fn();
   let { container } = render(
diff --git a/packages/react-select/src/__tests__/StateManaged.test.tsx b/packages/react-select/src/__tests__/StateManaged.test.tsx
index a211466e16..a10a566d09 100644
--- a/packages/react-select/src/__tests__/StateManaged.test.tsx
+++ b/packages/react-select/src/__tests__/StateManaged.test.tsx
@@ -55,9 +55,10 @@ const BASIC_PROPS: BasicProps = {
 };
 
 test('defaults > snapshot', () => {
+  jest.useFakeTimers();
   const { container } = render(<Select />);
   act(() => {
-    jest.runOnlyPendingTimers();
+    jest.runAllTimers();
   });
   expect(container).toMatchSnapshot();
 });
@@ -141,16 +142,14 @@ cases<MenuToOpenByDefaultOpts>(
     expect(container.querySelector(menuClass)).toBeTruthy();
   },
   {
-    'single select > should keep Menu open by default if true is passed for menuIsOpen prop':
-      {},
-    'multi select > should keep Menu open by default if true is passed for menuIsOpen prop':
-      {
-        props: {
-          ...BASIC_PROPS,
-          isMulti: true,
-          menuIsOpen: true,
-        },
+    'single select > should keep Menu open by default if true is passed for menuIsOpen prop': {},
+    'multi select > should keep Menu open by default if true is passed for menuIsOpen prop': {
+      props: {
+        ...BASIC_PROPS,
+        isMulti: true,
+        menuIsOpen: true,
       },
+    },
   }
 );
 
@@ -238,16 +237,15 @@ cases(
     ).toBe(expectSelectedOption);
   },
   {
-    'single select > clicking on an option > should select the clicked option':
-      {
-        props: {
-          ...BASIC_PROPS,
-          menuIsOpen: true,
-        },
-        event: ['click' as const, { button: 0 }] as const,
-        selectOption: OPTIONS[2],
-        expectSelectedOption: 'two',
+    'single select > clicking on an option > should select the clicked option': {
+      props: {
+        ...BASIC_PROPS,
+        menuIsOpen: true,
       },
+      event: ['click' as const, { button: 0 }] as const,
+      selectOption: OPTIONS[2],
+      expectSelectedOption: 'two',
+    },
     'multi select > clicking on an option > should select the clicked option': {
       props: {
         ...BASIC_PROPS,
@@ -300,72 +298,63 @@ cases<KeyboardInteractionOpts>(
       eventsToSimulate: [],
       expectedSelectedOption: OPTIONS[0].value,
     },
-    'single select > (open select -> 3 x ArrowDown -> Enter) > should select the forth option in the select':
-      {
-        eventsToSimulate: [
-          ['keyDown', { keyCode: 40, key: 'ArrowDown' }],
-          ['keyDown', { keyCode: 40, key: 'ArrowDown' }],
-          ['keyDown', { keyCode: 40, key: 'ArrowDown' }],
-        ],
-        expectedSelectedOption: OPTIONS[3].value,
-      },
-    'single select > (open select -> 2 x ArrowDown -> 2 x ArrowUp -> Enter) > should select the first option in the select':
-      {
-        eventsToSimulate: [
-          ['keyDown', { keyCode: 40, key: 'ArrowDown' }],
-          ['keyDown', { keyCode: 40, key: 'ArrowDown' }],
-          ['keyDown', { keyCode: 38, key: 'ArrowUp' }],
-          ['keyDown', { keyCode: 38, key: 'ArrowUp' }],
-        ],
-        expectedSelectedOption: OPTIONS[0].value,
-      },
-    'single select > (open select -> 1 x ArrowUp -> Enter) > should select the last option in the select':
-      {
-        eventsToSimulate: [['keyDown', { keyCode: 38, key: 'ArrowUp' }]],
-        expectedSelectedOption: OPTIONS[OPTIONS.length - 1].value,
-      },
-    'single select > (open select -> 1 x PageDown -> Enter) > should select the first option on next page - default pageSize 5':
-      {
-        eventsToSimulate: [['keyDown', { keyCode: 34, key: 'PageDown' }]],
-        expectedSelectedOption: OPTIONS[5].value,
-      },
-    'single select > (open select -> 1 x PageDown -> 1 x ArrowDown -> 1 x PageUp -> Enter) > should select the second option - default pageSize 5':
-      {
-        eventsToSimulate: [
-          ['keyDown', { keyCode: 34, key: 'PageDown' }],
-          ['keyDown', { keyCode: 40, key: 'ArrowDown' }],
-          ['keyDown', { keyCode: 33, key: 'PageUp' }],
-        ],
-        expectedSelectedOption: OPTIONS[1].value,
-      },
-    'single select > (open select -> End -> Enter) > should select the last option':
-      {
-        eventsToSimulate: [['keyDown', { keyCode: 35, key: 'End' }]],
-        expectedSelectedOption: OPTIONS[OPTIONS.length - 1].value,
-      },
-    'single select > (open select -> 3 x PageDown -> Home -> Enter) > should select the last option':
-      {
-        eventsToSimulate: [
-          ['keyDown', { keyCode: 34, key: 'PageDown' }],
-          ['keyDown', { keyCode: 34, key: 'PageDown' }],
-          ['keyDown', { keyCode: 34, key: 'PageDown' }],
-          ['keyDown', { keyCode: 36, key: 'Home' }],
-        ],
-        expectedSelectedOption: OPTIONS[0].value,
-      },
-    'single select > cycle options > ( open select -> End -> ArrowDown -> Enter) > should select the first option':
-      {
-        eventsToSimulate: [
-          ['keyDown', { keyCode: 35, key: 'End' }],
-          ['keyDown', { keyCode: 40, key: 'ArrowDown' }],
-        ],
-        expectedSelectedOption: OPTIONS[0].value,
-      },
-    'single select > cycle options > (open select -> ArrowUp -> Enter) > should select the last option':
-      {
-        eventsToSimulate: [['keyDown', { keyCode: 38, key: 'ArrowUp' }]],
-        expectedSelectedOption: OPTIONS[OPTIONS.length - 1].value,
-      },
+    'single select > (open select -> 3 x ArrowDown -> Enter) > should select the forth option in the select': {
+      eventsToSimulate: [
+        ['keyDown', { keyCode: 40, key: 'ArrowDown' }],
+        ['keyDown', { keyCode: 40, key: 'ArrowDown' }],
+        ['keyDown', { keyCode: 40, key: 'ArrowDown' }],
+      ],
+      expectedSelectedOption: OPTIONS[3].value,
+    },
+    'single select > (open select -> 2 x ArrowDown -> 2 x ArrowUp -> Enter) > should select the first option in the select': {
+      eventsToSimulate: [
+        ['keyDown', { keyCode: 40, key: 'ArrowDown' }],
+        ['keyDown', { keyCode: 40, key: 'ArrowDown' }],
+        ['keyDown', { keyCode: 38, key: 'ArrowUp' }],
+        ['keyDown', { keyCode: 38, key: 'ArrowUp' }],
+      ],
+      expectedSelectedOption: OPTIONS[0].value,
+    },
+    'single select > (open select -> 1 x ArrowUp -> Enter) > should select the last option in the select': {
+      eventsToSimulate: [['keyDown', { keyCode: 38, key: 'ArrowUp' }]],
+      expectedSelectedOption: OPTIONS[OPTIONS.length - 1].value,
+    },
+    'single select > (open select -> 1 x PageDown -> Enter) > should select the first option on next page - default pageSize 5': {
+      eventsToSimulate: [['keyDown', { keyCode: 34, key: 'PageDown' }]],
+      expectedSelectedOption: OPTIONS[5].value,
+    },
+    'single select > (open select -> 1 x PageDown -> 1 x ArrowDown -> 1 x PageUp -> Enter) > should select the second option - default pageSize 5': {
+      eventsToSimulate: [
+        ['keyDown', { keyCode: 34, key: 'PageDown' }],
+        ['keyDown', { keyCode: 40, key: 'ArrowDown' }],
+        ['keyDown', { keyCode: 33, key: 'PageUp' }],
+      ],
+      expectedSelectedOption: OPTIONS[1].value,
+    },
+    'single select > (open select -> End -> Enter) > should select the last option': {
+      eventsToSimulate: [['keyDown', { keyCode: 35, key: 'End' }]],
+      expectedSelectedOption: OPTIONS[OPTIONS.length - 1].value,
+    },
+    'single select > (open select -> 3 x PageDown -> Home -> Enter) > should select the last option': {
+      eventsToSimulate: [
+        ['keyDown', { keyCode: 34, key: 'PageDown' }],
+        ['keyDown', { keyCode: 34, key: 'PageDown' }],
+        ['keyDown', { keyCode: 34, key: 'PageDown' }],
+        ['keyDown', { keyCode: 36, key: 'Home' }],
+      ],
+      expectedSelectedOption: OPTIONS[0].value,
+    },
+    'single select > cycle options > ( open select -> End -> ArrowDown -> Enter) > should select the first option': {
+      eventsToSimulate: [
+        ['keyDown', { keyCode: 35, key: 'End' }],
+        ['keyDown', { keyCode: 40, key: 'ArrowDown' }],
+      ],
+      expectedSelectedOption: OPTIONS[0].value,
+    },
+    'single select > cycle options > (open select -> ArrowUp -> Enter) > should select the last option': {
+      eventsToSimulate: [['keyDown', { keyCode: 38, key: 'ArrowUp' }]],
+      expectedSelectedOption: OPTIONS[OPTIONS.length - 1].value,
+    },
     'multi select > open select and hit enter > should select first option': {
       props: {
         ...BASIC_PROPS,
@@ -374,107 +363,98 @@ cases<KeyboardInteractionOpts>(
       eventsToSimulate: [],
       expectedSelectedOption: OPTIONS[0].value,
     },
-    'multi select > (open select -> 3 x ArrowDown -> Enter) > should select the forth option in the select':
-      {
-        props: {
-          ...BASIC_PROPS,
-          isMulti: true,
-        },
-        eventsToSimulate: [
-          ['keyDown', { keyCode: 40, key: 'ArrowDown' }],
-          ['keyDown', { keyCode: 40, key: 'ArrowDown' }],
-          ['keyDown', { keyCode: 40, key: 'ArrowDown' }],
-        ],
-        expectedSelectedOption: OPTIONS[3].value,
+    'multi select > (open select -> 3 x ArrowDown -> Enter) > should select the forth option in the select': {
+      props: {
+        ...BASIC_PROPS,
+        isMulti: true,
       },
-    'multi select > (open select -> 2 x ArrowDown -> 2 x ArrowUp -> Enter) > should select the first option in the select':
-      {
-        props: {
-          ...BASIC_PROPS,
-          isMulti: true,
-        },
-        eventsToSimulate: [
-          ['keyDown', { keyCode: 40, key: 'ArrowDown' }],
-          ['keyDown', { keyCode: 40, key: 'ArrowDown' }],
-          ['keyDown', { keyCode: 38, key: 'ArrowUp' }],
-          ['keyDown', { keyCode: 38, key: 'ArrowUp' }],
-        ],
-        expectedSelectedOption: OPTIONS[0].value,
+      eventsToSimulate: [
+        ['keyDown', { keyCode: 40, key: 'ArrowDown' }],
+        ['keyDown', { keyCode: 40, key: 'ArrowDown' }],
+        ['keyDown', { keyCode: 40, key: 'ArrowDown' }],
+      ],
+      expectedSelectedOption: OPTIONS[3].value,
+    },
+    'multi select > (open select -> 2 x ArrowDown -> 2 x ArrowUp -> Enter) > should select the first option in the select': {
+      props: {
+        ...BASIC_PROPS,
+        isMulti: true,
       },
-    'multi select > (open select -> 1 x ArrowUp -> Enter) > should select the last option in the select':
-      {
-        props: {
-          ...BASIC_PROPS,
-          isMulti: true,
-        },
-        eventsToSimulate: [['keyDown', { keyCode: 38, key: 'ArrowUp' }]],
-        expectedSelectedOption: OPTIONS[OPTIONS.length - 1].value,
+      eventsToSimulate: [
+        ['keyDown', { keyCode: 40, key: 'ArrowDown' }],
+        ['keyDown', { keyCode: 40, key: 'ArrowDown' }],
+        ['keyDown', { keyCode: 38, key: 'ArrowUp' }],
+        ['keyDown', { keyCode: 38, key: 'ArrowUp' }],
+      ],
+      expectedSelectedOption: OPTIONS[0].value,
+    },
+    'multi select > (open select -> 1 x ArrowUp -> Enter) > should select the last option in the select': {
+      props: {
+        ...BASIC_PROPS,
+        isMulti: true,
       },
-    'multi select > (open select -> 1 x PageDown -> Enter) > should select the first option on next page - default pageSize 5':
-      {
-        props: {
-          ...BASIC_PROPS,
-          isMulti: true,
-        },
-        eventsToSimulate: [['keyDown', { keyCode: 34, key: 'PageDown' }]],
-        expectedSelectedOption: OPTIONS[5].value,
+      eventsToSimulate: [['keyDown', { keyCode: 38, key: 'ArrowUp' }]],
+      expectedSelectedOption: OPTIONS[OPTIONS.length - 1].value,
+    },
+    'multi select > (open select -> 1 x PageDown -> Enter) > should select the first option on next page - default pageSize 5': {
+      props: {
+        ...BASIC_PROPS,
+        isMulti: true,
       },
-    'multi select > (open select -> 1 x PageDown -> 1 x ArrowDown -> 1 x PageUp -> Enter) > should select the second option - default pageSize 5':
-      {
-        props: {
-          ...BASIC_PROPS,
-          isMulti: true,
-        },
-        eventsToSimulate: [
-          ['keyDown', { keyCode: 34, key: 'PageDown' }],
-          ['keyDown', { keyCode: 40, key: 'ArrowDown' }],
-          ['keyDown', { keyCode: 33, key: 'PageUp' }],
-        ],
-        expectedSelectedOption: OPTIONS[1].value,
+      eventsToSimulate: [['keyDown', { keyCode: 34, key: 'PageDown' }]],
+      expectedSelectedOption: OPTIONS[5].value,
+    },
+    'multi select > (open select -> 1 x PageDown -> 1 x ArrowDown -> 1 x PageUp -> Enter) > should select the second option - default pageSize 5': {
+      props: {
+        ...BASIC_PROPS,
+        isMulti: true,
       },
-    'multi select > (open select -> End -> Enter) > should select the last option':
-      {
-        props: {
-          ...BASIC_PROPS,
-          isMulti: true,
-        },
-        eventsToSimulate: [['keyDown', { keyCode: 35, key: 'End' }]],
-        expectedSelectedOption: OPTIONS[OPTIONS.length - 1].value,
+      eventsToSimulate: [
+        ['keyDown', { keyCode: 34, key: 'PageDown' }],
+        ['keyDown', { keyCode: 40, key: 'ArrowDown' }],
+        ['keyDown', { keyCode: 33, key: 'PageUp' }],
+      ],
+      expectedSelectedOption: OPTIONS[1].value,
+    },
+    'multi select > (open select -> End -> Enter) > should select the last option': {
+      props: {
+        ...BASIC_PROPS,
+        isMulti: true,
       },
-    'multi select > (open select -> 3 x PageDown -> Home -> Enter) > should select the last option':
-      {
-        props: {
-          ...BASIC_PROPS,
-          isMulti: true,
-        },
-        eventsToSimulate: [
-          ['keyDown', { keyCode: 34, key: 'PageDown' }],
-          ['keyDown', { keyCode: 34, key: 'PageDown' }],
-          ['keyDown', { keyCode: 34, key: 'PageDown' }],
-          ['keyDown', { keyCode: 36, key: 'Home' }],
-        ],
-        expectedSelectedOption: OPTIONS[0].value,
+      eventsToSimulate: [['keyDown', { keyCode: 35, key: 'End' }]],
+      expectedSelectedOption: OPTIONS[OPTIONS.length - 1].value,
+    },
+    'multi select > (open select -> 3 x PageDown -> Home -> Enter) > should select the last option': {
+      props: {
+        ...BASIC_PROPS,
+        isMulti: true,
       },
-    'multi select > cycle options > ( open select -> End -> ArrowDown -> Enter) > should select the first option':
-      {
-        props: {
-          ...BASIC_PROPS,
-          isMulti: true,
-        },
-        eventsToSimulate: [
-          ['keyDown', { keyCode: 35, key: 'End' }],
-          ['keyDown', { keyCode: 40, key: 'ArrowDown' }],
-        ],
-        expectedSelectedOption: OPTIONS[0].value,
+      eventsToSimulate: [
+        ['keyDown', { keyCode: 34, key: 'PageDown' }],
+        ['keyDown', { keyCode: 34, key: 'PageDown' }],
+        ['keyDown', { keyCode: 34, key: 'PageDown' }],
+        ['keyDown', { keyCode: 36, key: 'Home' }],
+      ],
+      expectedSelectedOption: OPTIONS[0].value,
+    },
+    'multi select > cycle options > ( open select -> End -> ArrowDown -> Enter) > should select the first option': {
+      props: {
+        ...BASIC_PROPS,
+        isMulti: true,
       },
-    'multi select > cycle options > (open select -> ArrowUp -> Enter) > should select the last option':
-      {
-        props: {
-          ...BASIC_PROPS,
-          isMulti: true,
-        },
-        eventsToSimulate: [['keyDown', { keyCode: 38, key: 'ArrowUp' }]],
-        expectedSelectedOption: OPTIONS[OPTIONS.length - 1].value,
+      eventsToSimulate: [
+        ['keyDown', { keyCode: 35, key: 'End' }],
+        ['keyDown', { keyCode: 40, key: 'ArrowDown' }],
+      ],
+      expectedSelectedOption: OPTIONS[0].value,
+    },
+    'multi select > cycle options > (open select -> ArrowUp -> Enter) > should select the last option': {
+      props: {
+        ...BASIC_PROPS,
+        isMulti: true,
       },
+      eventsToSimulate: [['keyDown', { keyCode: 38, key: 'ArrowUp' }]],
+      expectedSelectedOption: OPTIONS[OPTIONS.length - 1].value,
+    },
   }
 );

From 7179f0ead2b25683ec7e4eac0cf19a658d1c02ae Mon Sep 17 00:00:00 2001
From: Matt Charlton <mcharlton@atlassian.com>
Date: Fri, 2 Jul 2021 12:13:41 +1000
Subject: [PATCH 09/24] put defaultvalue back in example

---
 docs/examples/BasicSingle.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/examples/BasicSingle.tsx b/docs/examples/BasicSingle.tsx
index 261f7510fa..3a4e453bc5 100644
--- a/docs/examples/BasicSingle.tsx
+++ b/docs/examples/BasicSingle.tsx
@@ -42,7 +42,7 @@ export default class SingleSelect extends Component<{}, State> {
         <Select
           className="basic-single"
           classNamePrefix="select"
-          // defaultValue={colourOptions[0]}
+          defaultValue={colourOptions[0]}
           isDisabled={isDisabled}
           isLoading={isLoading}
           isClearable={isClearable}

From 5ad8a4152e2cabf6e6f1f660d6d42333fea056ef Mon Sep 17 00:00:00 2001
From: Matt Charlton <mcharlton@atlassian.com>
Date: Fri, 2 Jul 2021 13:06:55 +1000
Subject: [PATCH 10/24] revert changes to docs files

---
 docs/examples/BasicMulti.tsx  |   1 -
 docs/examples/BasicSingle.tsx |   4 +-
 docs/pages/home/index.tsx     | 147 ++++++++++++++++++++++++++++++++++
 3 files changed, 148 insertions(+), 4 deletions(-)

diff --git a/docs/examples/BasicMulti.tsx b/docs/examples/BasicMulti.tsx
index 0d6a8b126d..9cc30d6d43 100644
--- a/docs/examples/BasicMulti.tsx
+++ b/docs/examples/BasicMulti.tsx
@@ -11,6 +11,5 @@ export default () => (
     options={colourOptions}
     className="basic-multi-select"
     classNamePrefix="select"
-    aria-live="assertive"
   />
 );
diff --git a/docs/examples/BasicSingle.tsx b/docs/examples/BasicSingle.tsx
index 3a4e453bc5..37aa1d8b67 100644
--- a/docs/examples/BasicSingle.tsx
+++ b/docs/examples/BasicSingle.tsx
@@ -1,6 +1,6 @@
 import React, { Component, Fragment } from 'react';
 
-import Select from '../../packages/react-select/src/';
+import Select from 'react-select';
 import { colourOptions } from '../data';
 import { Note } from '../styled-components';
 
@@ -50,8 +50,6 @@ export default class SingleSelect extends Component<{}, State> {
           isSearchable={isSearchable}
           name="color"
           options={colourOptions}
-          placeholder="Pick a color"
-          aria-live="assertive"
         />
         <Note Tag="label">
           <Checkbox
diff --git a/docs/pages/home/index.tsx b/docs/pages/home/index.tsx
index 8a5df28d54..24013114c7 100644
--- a/docs/pages/home/index.tsx
+++ b/docs/pages/home/index.tsx
@@ -48,5 +48,152 @@ export default function Home() {
     </ExampleWrapper>
   )}
 
+  ## Getting Started
+
+  Start by installing \`react-select\`
+
+  ~~~bash
+  yarn add react-select
+  ~~~
+
+  or
+
+  ~~~bash
+  npm i --save react-select
+  ~~~
+
+  Import the default export and render in your component:
+
+  ~~~jsx
+  import React, { Component } from 'react'
+  import Select from 'react-select'
+
+  const options = [
+    { value: 'chocolate', label: 'Chocolate' },
+    { value: 'strawberry', label: 'Strawberry' },
+    { value: 'vanilla', label: 'Vanilla' }
+  ]
+
+  const MyComponent = () => (
+    <Select options={options} />
+  )
+  ~~~
+
+  ${(
+    <ExampleWrapper
+      label="Grouped"
+      urlPath="docs/examples/BasicGrouped.tsx"
+      raw={require('!!raw-loader!../../examples/BasicGrouped.tsx')}
+    >
+      <BasicGrouped />
+    </ExampleWrapper>
+  )}
+
+  ## Animated Components
+
+  React-Select comes with a makeAnimated function that create animated wrappers around components passed in as arguments.
+  If no arguments are passed, built-in components are wrapped instead.
+
+  ~~~jsx
+  import makeAnimated from 'react-select/animated';
+  ~~~
+
+  Remove the values below to see them in action.
+
+  ${(
+    <ExampleWrapper
+      label="Animation"
+      urlPath="docs/examples/AnimatedMulti.tsx"
+      raw={require('!!raw-loader!../../examples/AnimatedMulti.tsx')}
+    >
+      <AnimatedMulti />
+    </ExampleWrapper>
+  )}
+
+  ## Custom Styles
+
+  Style individual components with custom css using the \`styles\` prop.
+
+  ${(
+    <ExampleWrapper
+      label="Single"
+      urlPath="docs/examples/StyledSingle.tsx"
+      raw={require('!!raw-loader!../../examples/StyledSingle.tsx')}
+    >
+      <StyledSingle />
+    </ExampleWrapper>
+  )}
+
+  ${(
+    <ExampleWrapper
+      label="Multi Select"
+      urlPath="docs/examples/StyledMulti.tsx"
+      raw={require('!!raw-loader!../../examples/StyledMulti.tsx')}
+    >
+      <StyledMulti />
+    </ExampleWrapper>
+  )}
+
+  You can see a full explanation of how to do this on the [styles](/styles) page.
+
+  # Async
+  Use the Async component to load options from a remote source as the user types.
+
+  ~~~jsx
+  import AsyncSelect from 'react-select/async';
+  ~~~
+
+  ${(
+    <ExampleWrapper
+      label="Callbacks"
+      urlPath="docs/examples/AsyncCallbacks.tsx"
+      raw={require('!!raw-loader!../../examples/AsyncCallbacks.tsx')}
+    >
+      <AsyncCallbacks />
+    </ExampleWrapper>
+  )}
+
+  ${(
+    <ExampleWrapper
+      label="Promises"
+      urlPath="docs/examples/AsyncPromises.tsx"
+      raw={require('!!raw-loader!../../examples/AsyncPromises.tsx')}
+    >
+      <AsyncPromises />
+    </ExampleWrapper>
+  )}
+
+  You can see a full explanation of how to do this on the [async](/async) page.
+
+  # Creatable
+  The Creatable component enables users to create new options along with choosing existing options.
+
+  ~~~jsx
+  import Creatable from 'react-select/creatable';
+  ~~~
+
+  ${(
+    <ExampleWrapper
+      label="Creatable Example"
+      urlPath="docs/home/examples/CreatableSingle.tsx"
+      raw={require('!!raw-loader!../../examples/CreatableSingle.tsx')}
+    >
+      <CreatableSingle />
+    </ExampleWrapper>
+  )}
+
+  You can see a full explanation of how to do this on the [creatable](/creatable) page.
+
+  # Fixed Options
+
+  ${(
+    <ExampleWrapper
+      label="Fixed Options Example"
+      urlPath="docs/home/examples/FixedOptions.tsx"
+      raw={require('!!raw-loader!../../examples/FixedOptions.tsx')}
+    >
+      <FixedOptions />
+    </ExampleWrapper>
+  )}
 `;
 }

From 918aabdbc462a9a2d727c5d6c484cb120a8e0178 Mon Sep 17 00:00:00 2001
From: Matt Charlton <mcharlton@atlassian.com>
Date: Fri, 2 Jul 2021 15:52:29 +1000
Subject: [PATCH 11/24] leave JAWS change out

---
 packages/react-select/src/components/containers.tsx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/react-select/src/components/containers.tsx b/packages/react-select/src/components/containers.tsx
index 61186caa28..323375ba51 100644
--- a/packages/react-select/src/components/containers.tsx
+++ b/packages/react-select/src/components/containers.tsx
@@ -58,9 +58,6 @@ export const SelectContainer = <
         className
       )}
       {...innerProps}
-      // this should tell JAWS not treat the component as a custom widget
-      // and not intercept keyboard events
-      role="application"
     >
       {children}
     </div>

From 917deec08a222c453ce77da82b9d2bee7978a87c Mon Sep 17 00:00:00 2001
From: Matt Charlton <mcharlton@atlassian.com>
Date: Fri, 2 Jul 2021 15:56:14 +1000
Subject: [PATCH 12/24] put inputMode back

---
 packages/react-select/src/Select.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-select/src/Select.tsx b/packages/react-select/src/Select.tsx
index 50b396c822..7c64c42e92 100644
--- a/packages/react-select/src/Select.tsx
+++ b/packages/react-select/src/Select.tsx
@@ -1605,9 +1605,9 @@ export default class Select<
           onBlur={this.onInputBlur}
           onChange={noop}
           onFocus={this.onInputFocus}
-          inputMode="none"
           disabled={isDisabled}
           tabIndex={tabIndex}
+          inputMode="none"
           form={form}
           value=""
           {...ariaAttributes}

From 8b758c35845e19c3c10bca0ce158fbf0711a92ca Mon Sep 17 00:00:00 2001
From: Matt Charlton <mcharlton@atlassian.com>
Date: Fri, 2 Jul 2021 15:59:07 +1000
Subject: [PATCH 13/24] update snapshots

---
 .../react-select/src/__tests__/__snapshots__/Async.test.tsx.snap | 1 -
 .../src/__tests__/__snapshots__/AsyncCreatable.test.tsx.snap     | 1 -
 .../src/__tests__/__snapshots__/Creatable.test.tsx.snap          | 1 -
 .../src/__tests__/__snapshots__/Select.test.tsx.snap             | 1 -
 .../src/__tests__/__snapshots__/StateManaged.test.tsx.snap       | 1 -
 5 files changed, 5 deletions(-)

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 9ecd89d485..4eae286f06 100644
--- a/packages/react-select/src/__tests__/__snapshots__/Async.test.tsx.snap
+++ b/packages/react-select/src/__tests__/__snapshots__/Async.test.tsx.snap
@@ -171,7 +171,6 @@ exports[`defaults - snapshot 1`] = `
 <div>
   <div
     class=" emotion-0"
-    role="application"
   >
     <span
       aria-atomic="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 9ecd89d485..4eae286f06 100644
--- a/packages/react-select/src/__tests__/__snapshots__/AsyncCreatable.test.tsx.snap
+++ b/packages/react-select/src/__tests__/__snapshots__/AsyncCreatable.test.tsx.snap
@@ -171,7 +171,6 @@ exports[`defaults - snapshot 1`] = `
 <div>
   <div
     class=" emotion-0"
-    role="application"
   >
     <span
       aria-atomic="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 9ecd89d485..4eae286f06 100644
--- a/packages/react-select/src/__tests__/__snapshots__/Creatable.test.tsx.snap
+++ b/packages/react-select/src/__tests__/__snapshots__/Creatable.test.tsx.snap
@@ -171,7 +171,6 @@ exports[`defaults - snapshot 1`] = `
 <div>
   <div
     class=" emotion-0"
-    role="application"
   >
     <span
       aria-atomic="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 05c79234d5..ef558c66cc 100644
--- a/packages/react-select/src/__tests__/__snapshots__/Select.test.tsx.snap
+++ b/packages/react-select/src/__tests__/__snapshots__/Select.test.tsx.snap
@@ -171,7 +171,6 @@ exports[`snapshot - defaults 1`] = `
 <div>
   <div
     class=" emotion-0"
-    role="application"
   >
     <span
       aria-atomic="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 ecbcadd28b..523cec45e8 100644
--- a/packages/react-select/src/__tests__/__snapshots__/StateManaged.test.tsx.snap
+++ b/packages/react-select/src/__tests__/__snapshots__/StateManaged.test.tsx.snap
@@ -171,7 +171,6 @@ exports[`defaults > snapshot 1`] = `
 <div>
   <div
     class=" emotion-0"
-    role="application"
   >
     <span
       aria-atomic="false"

From 9e82aadcd1931f730235d317a2299a681da8c373 Mon Sep 17 00:00:00 2001
From: Matt Charlton <mcharlton@atlassian.com>
Date: Mon, 5 Jul 2021 10:34:44 +1000
Subject: [PATCH 14/24] add changeset

---
 .changeset/selfish-dots-look.md | 10 ++++++++++
 1 file changed, 10 insertions(+)
 create mode 100644 .changeset/selfish-dots-look.md

diff --git a/.changeset/selfish-dots-look.md b/.changeset/selfish-dots-look.md
new file mode 100644
index 0000000000..bd9758a455
--- /dev/null
+++ b/.changeset/selfish-dots-look.md
@@ -0,0 +1,10 @@
+---
+'react-select': patch
+---
+
+The following improvements have been made to the `aria-live` announcements:
+- NVDA now announces the context text when initially focused
+- VoiceOver now announces the context text when re-focusing
+- Placeholder text is now announced
+- The selected option/s (single and multi) are now announced when being focused
+- The deselected option/s (single and multi) are now announced when cleared

From 0b217f2dfd896809cd854176f5c0247a3862eba5 Mon Sep 17 00:00:00 2001
From: Matt Charlton <mcharlton@atlassian.com>
Date: Mon, 12 Jul 2021 11:57:05 +1000
Subject: [PATCH 15/24] undo search term adding "

---
 packages/react-select/src/accessibility/index.ts | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/react-select/src/accessibility/index.ts b/packages/react-select/src/accessibility/index.ts
index 61f7312fbf..046f6636eb 100644
--- a/packages/react-select/src/accessibility/index.ts
+++ b/packages/react-select/src/accessibility/index.ts
@@ -101,8 +101,13 @@ export interface AriaLiveMessages<
 
 export const defaultAriaLiveMessages = {
   guidance: (props: AriaGuidanceProps) => {
-    const { isSearchable, isMulti, isDisabled, tabSelectsValue, context } =
-      props;
+    const {
+      isSearchable,
+      isMulti,
+      isDisabled,
+      tabSelectsValue,
+      context,
+    } = props;
     switch (context) {
       case 'menu':
         return `Use Up and Down to choose options${
@@ -177,7 +182,7 @@ export const defaultAriaLiveMessages = {
   onFilter: (props: AriaOnFilterProps) => {
     const { inputValue, resultsMessage } = props;
     return `${resultsMessage}${
-      inputValue ? ' for search term "' + inputValue + '"' : ''
+      inputValue ? ' for search term ' + inputValue : ''
     }.`;
   },
 };

From 0a22365483b5def6d2d0fc05af284976182e7fa3 Mon Sep 17 00:00:00 2001
From: Matt Charlton <mcharlton@atlassian.com>
Date: Thu, 15 Jul 2021 15:29:07 +1000
Subject: [PATCH 16/24] fix AXE error when placeholder not mounted

---
 packages/react-select/src/Select.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/react-select/src/Select.tsx b/packages/react-select/src/Select.tsx
index 7c64c42e92..0cb4d0efc4 100644
--- a/packages/react-select/src/Select.tsx
+++ b/packages/react-select/src/Select.tsx
@@ -1591,6 +1591,7 @@ export default class Select<
       ...(!isSearchable && {
         'aria-readonly': true,
       }),
+
       ...(!this.hasValue() && {
         'aria-describedby': this.getElementId('placeholder'),
       }),

From ee0559e8d13634ce4fb7630960df1596642573d4 Mon Sep 17 00:00:00 2001
From: Matt Charlton <mcharlton@atlassian.com>
Date: Mon, 19 Jul 2021 10:50:06 +1000
Subject: [PATCH 17/24] refactor to allow user getOptionLabel

---
 packages/react-select/src/Select.tsx          | 24 +++++----
 .../src/__tests__/Select.test.tsx             |  2 +-
 .../react-select/src/accessibility/index.ts   | 20 +++++--
 .../src/components/LiveRegion.tsx             | 54 +++++++------------
 packages/react-select/src/types.ts            | 16 ++++--
 5 files changed, 63 insertions(+), 53 deletions(-)

diff --git a/packages/react-select/src/Select.tsx b/packages/react-select/src/Select.tsx
index 0cb4d0efc4..a9463dca4e 100644
--- a/packages/react-select/src/Select.tsx
+++ b/packages/react-select/src/Select.tsx
@@ -636,8 +636,8 @@ export default class Select<
     if (this.state.selectValue.length) {
       this.state.ariaSelection = {
         value: this.state.selectValue as OnChangeValue<Option, IsMulti>,
-        action: 'select-option',
-        option: this.state.selectValue,
+        options: this.state.selectValue,
+        action: 'initial-input-focus',
         name: this.props.name,
       };
     }
@@ -647,8 +647,11 @@ export default class Select<
     props: Props<OptionBase, boolean, GroupBase<OptionBase>>,
     state: State<OptionBase, boolean, GroupBase<OptionBase>>
   ) {
-    const { prevProps, clearFocusValueOnUpdate, inputIsHiddenAfterUpdate } =
-      state;
+    const {
+      prevProps,
+      clearFocusValueOnUpdate,
+      inputIsHiddenAfterUpdate,
+    } = state;
     const { options, value, menuIsOpen, inputValue } = props;
     let newMenuOptionsState = {};
     if (
@@ -742,8 +745,8 @@ export default class Select<
       this.setState({
         ariaSelection: {
           value: selectValue as OnChangeValue<Option, IsMulti>,
-          action: 'select-option',
-          option: selectValue,
+          options: selectValue,
+          action: 'initial-input-focus',
           name,
         },
       });
@@ -1591,7 +1594,6 @@ export default class Select<
       ...(!isSearchable && {
         'aria-readonly': true,
       }),
-
       ...(!this.hasValue() && {
         'aria-describedby': this.getElementId('placeholder'),
       }),
@@ -2036,8 +2038,12 @@ export default class Select<
   }
 
   render() {
-    const { Control, IndicatorsContainer, SelectContainer, ValueContainer } =
-      this.getComponents();
+    const {
+      Control,
+      IndicatorsContainer,
+      SelectContainer,
+      ValueContainer,
+    } = this.getComponents();
 
     const { className, id, isDisabled, menuIsOpen } = this.props;
     const { isFocused } = this.state;
diff --git a/packages/react-select/src/__tests__/Select.test.tsx b/packages/react-select/src/__tests__/Select.test.tsx
index 148c6b267c..2467850bcc 100644
--- a/packages/react-select/src/__tests__/Select.test.tsx
+++ b/packages/react-select/src/__tests__/Select.test.tsx
@@ -2286,7 +2286,7 @@ test('accessibility > announces cleared values and does not announce them when r
     jest.runAllTimers();
   });
   expect(container.querySelector(liveRegionSelectionId)!.textContent).toMatch(
-    'option 0, deselected.'
+    'option 0, cleared.'
   );
 
   /**
diff --git a/packages/react-select/src/accessibility/index.ts b/packages/react-select/src/accessibility/index.ts
index 046f6636eb..1e4bb7ff35 100644
--- a/packages/react-select/src/accessibility/index.ts
+++ b/packages/react-select/src/accessibility/index.ts
@@ -16,9 +16,10 @@ export type AriaLive = 'polite' | 'off' | 'assertive';
 export type AriaSelection<
   Option extends OptionBase,
   IsMulti extends boolean
-> = Omit<ActionMeta<Option>, 'option'> & {
+> = ActionMeta<Option> & {
   value: OnChangeValue<Option, IsMulti>;
-  option?: Option | Options<Option>;
+  option?: Option;
+  options?: Options<Option>;
 };
 
 export interface AriaGuidanceProps {
@@ -42,6 +43,8 @@ export type AriaOnChangeProps<
 > = AriaSelection<Option, IsMulti> & {
   /** String derived label from selected or removed option/value */
   label: string;
+  /** Array of labels derived from multiple selected or cleared options*/
+  labels: string[];
   /** Boolean indicating if the selected menu option is disabled */
   isDisabled: boolean | null;
 };
@@ -135,17 +138,26 @@ export const defaultAriaLiveMessages = {
   onChange: <Option extends OptionBase, IsMulti extends boolean>(
     props: AriaOnChangeProps<Option, IsMulti>
   ) => {
-    const { action, label = '', isDisabled } = props;
+    const { action, label = '', labels, isDisabled } = props;
     switch (action) {
       case 'deselect-option':
       case 'pop-value':
       case 'remove-value':
-      case 'clear':
         return `option ${label}, deselected.`;
+      case 'clear':
+        return `option${labels.length > 1 ? 's' : ''} ${labels.join(
+          ','
+        )}, cleared.`;
+      case 'initial-input-focus':
+        return `option${labels.length > 1 ? 's' : ''} ${labels.join(
+          ','
+        )}, selected.`;
       case 'select-option':
         return isDisabled
           ? `option ${label} is disabled. Select another option.`
           : `option ${label}, selected.`;
+      case 'create-option':
+        return `option ${label}, created.`;
       default:
         return '';
     }
diff --git a/packages/react-select/src/components/LiveRegion.tsx b/packages/react-select/src/components/LiveRegion.tsx
index 20017608f3..e4a51af812 100644
--- a/packages/react-select/src/components/LiveRegion.tsx
+++ b/packages/react-select/src/components/LiveRegion.tsx
@@ -77,47 +77,31 @@ const LiveRegion = <
   const ariaSelected = useMemo(() => {
     let message = '';
     if (ariaSelection && messages.onChange) {
-      const { option, removedValue, removedValues, value } = ariaSelection;
+      const {
+        option,
+        options: selectedOptions,
+        removedValue,
+        removedValues,
+        value,
+      } = ariaSelection;
       // select-option when !isMulti does not return option so we assume selected option is value
       const asOption = (val: OnChangeValue<Option, IsMulti>): Option | null =>
         !Array.isArray(val) ? (val as Option) : null;
 
-      // we can get an array of options, just a single option or a falsy option,
-      // need to handle returning an Option shaped object or undefined
-      const optionFromPossibleArray = (
-        opt?: Option | Options<Option>
-      ): Option | undefined => {
-        // if falsy return early
-        if (!opt) return;
-        if (Array.isArray(opt)) {
-          // if the array has no items then return early
-          if (!opt.length) return;
-          // take the array of options and reduce to one single option-like object with
-          // the label/s concatenated for the screen reader
-          return opt.reduce(
-            (acc, optionItem: Option) => {
-              const { value: optionVal, label } = optionItem;
-              const sep = acc.label ? ', ' : '';
-              acc.label = acc.label + sep + (label || optionVal);
-              return acc;
-            },
-            // we only need the label for the returned object
-            { label: '' }
-          ) as Option;
-        }
-        // if just a single option then return it
-        return opt as Option;
-      };
+      // If there is just one item from the action then get it's label
+      const selected = removedValue || option || asOption(value);
+      const label = selected ? getOptionLabel(selected) : '';
 
-      const selected =
-        removedValue ||
-        optionFromPossibleArray(removedValues) ||
-        optionFromPossibleArray(option) ||
-        asOption(value);
+      // If there are multiple items from the action then get return a array of labels
+      const multiSelected = selectedOptions || removedValues || undefined;
+      const labels = multiSelected ? multiSelected.map(getOptionLabel) : [];
 
       const onChangeProps = {
+        // multiSelected items are usually items that have already been selected
+        // or set by the user as a default value so we assume they are not disabled
         isDisabled: selected && isOptionDisabled(selected, selectValue),
-        label: selected ? getOptionLabel(selected) : '',
+        label,
+        labels,
         ...ariaSelection,
       };
 
@@ -208,7 +192,7 @@ const LiveRegion = <
 
   const ariaContext = `${ariaFocused} ${ariaResults} ${ariaGuidance}`;
 
-  // This is to fix NVDA not announcing the live region when the Select is focussed.
+  // This is to fix NVDA not announcing the live region when the Select is focused.
   // It just delays the rendering of the live region a small amount so NVDA sees the
   // contents of the live region get mutated.
   const [reveal, setReveal] = useState(false);
@@ -234,7 +218,7 @@ const LiveRegion = <
       aria-atomic="false"
       aria-relevant="additions text"
       // This is to fix VoiceOver not announcing when focussing after Select
-      // has already been focussed once
+      // has already been focused once
       style={{ display: isFocused ? 'block' : 'none' }}
     >
       {reveal && (
diff --git a/packages/react-select/src/types.ts b/packages/react-select/src/types.ts
index 820baa9d17..e3eece7d3b 100644
--- a/packages/react-select/src/types.ts
+++ b/packages/react-select/src/types.ts
@@ -7,6 +7,7 @@ export interface OptionBase {
   readonly value?: unknown;
   readonly isDisabled?: boolean;
   readonly __isNew__?: true;
+  readonly __artificial__?: true;
 }
 
 export interface GroupBase<Option extends OptionBase> {
@@ -28,8 +29,10 @@ export type PropsValue<Option extends OptionBase> =
   | MultiValue<Option>
   | SingleValue<Option>;
 
-export type OnChangeValue<Option extends OptionBase, IsMulti extends boolean> =
-  IsMulti extends true ? MultiValue<Option> : SingleValue<Option>;
+export type OnChangeValue<
+  Option extends OptionBase,
+  IsMulti extends boolean
+> = IsMulti extends true ? MultiValue<Option> : SingleValue<Option>;
 
 interface Colors {
   primary: string;
@@ -140,7 +143,6 @@ export interface RemoveValueActionMeta<Option extends OptionBase>
   removedValue: Option;
   name?: string;
 }
-
 export interface PopValueActionMeta<Option extends OptionBase>
   extends ActionMetaBase<Option> {
   action: 'pop-value';
@@ -160,6 +162,11 @@ export interface CreateOptionActionMeta<Option extends OptionBase>
   action: 'create-option';
   name?: string;
 }
+export interface InputFocusedActionMeta<Option extends OptionBase>
+  extends ActionMetaBase<Option> {
+  action: 'initial-input-focus';
+  name?: string;
+}
 
 export type ActionMeta<Option extends OptionBase> =
   | SelectOptionActionMeta<Option>
@@ -167,7 +174,8 @@ export type ActionMeta<Option extends OptionBase> =
   | RemoveValueActionMeta<Option>
   | PopValueActionMeta<Option>
   | ClearActionMeta<Option>
-  | CreateOptionActionMeta<Option>;
+  | CreateOptionActionMeta<Option>
+  | InputFocusedActionMeta<Option>;
 
 export type SetValueAction = 'select-option' | 'deselect-option';
 

From a36518e22324f1fcb5ae5c93ae1ad6c2e8aa0df1 Mon Sep 17 00:00:00 2001
From: Matt Charlton <mcharlton@atlassian.com>
Date: Mon, 19 Jul 2021 11:07:36 +1000
Subject: [PATCH 18/24] fix types

---
 packages/react-select/src/components/LiveRegion.tsx | 2 +-
 packages/react-select/src/types.ts                  | 5 ++---
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/react-select/src/components/LiveRegion.tsx b/packages/react-select/src/components/LiveRegion.tsx
index e4a51af812..f72a43da6a 100644
--- a/packages/react-select/src/components/LiveRegion.tsx
+++ b/packages/react-select/src/components/LiveRegion.tsx
@@ -217,7 +217,7 @@ const LiveRegion = <
       aria-live={ariaLive}
       aria-atomic="false"
       aria-relevant="additions text"
-      // This is to fix VoiceOver not announcing when focussing after Select
+      // This is to fix VoiceOver not announcing when focusing after Select
       // has already been focused once
       style={{ display: isFocused ? 'block' : 'none' }}
     >
diff --git a/packages/react-select/src/types.ts b/packages/react-select/src/types.ts
index e3eece7d3b..5588ab82e7 100644
--- a/packages/react-select/src/types.ts
+++ b/packages/react-select/src/types.ts
@@ -7,7 +7,6 @@ export interface OptionBase {
   readonly value?: unknown;
   readonly isDisabled?: boolean;
   readonly __isNew__?: true;
-  readonly __artificial__?: true;
 }
 
 export interface GroupBase<Option extends OptionBase> {
@@ -162,7 +161,7 @@ export interface CreateOptionActionMeta<Option extends OptionBase>
   action: 'create-option';
   name?: string;
 }
-export interface InputFocusedActionMeta<Option extends OptionBase>
+export interface InitialInputFocusedActionMeta<Option extends OptionBase>
   extends ActionMetaBase<Option> {
   action: 'initial-input-focus';
   name?: string;
@@ -175,7 +174,7 @@ export type ActionMeta<Option extends OptionBase> =
   | PopValueActionMeta<Option>
   | ClearActionMeta<Option>
   | CreateOptionActionMeta<Option>
-  | InputFocusedActionMeta<Option>;
+  | InitialInputFocusedActionMeta<Option>;
 
 export type SetValueAction = 'select-option' | 'deselect-option';
 

From f0c14912d0919376395663d0a8e0188047b1fbff Mon Sep 17 00:00:00 2001
From: Matt Charlton <mcharlton@atlassian.com>
Date: Tue, 27 Jul 2021 14:51:29 +1000
Subject: [PATCH 19/24] refactor and prettify

---
 .changeset/selfish-dots-look.md               |    1 +
 packages/react-select/src/Select.tsx          |  122 +-
 .../react-select/src/__tests__/Async.test.tsx |    7 +
 .../src/__tests__/Select.test.tsx             | 1283 +++++++++--------
 .../src/__tests__/StateManaged.test.tsx       |  333 +++--
 .../__snapshots__/Async.test.tsx.snap         |    3 +-
 .../AsyncCreatable.test.tsx.snap              |    3 +-
 .../__snapshots__/Creatable.test.tsx.snap     |    3 +-
 .../__snapshots__/Select.test.tsx.snap        |    3 +-
 .../__snapshots__/StateManaged.test.tsx.snap  |    3 +-
 .../react-select/src/accessibility/index.ts   |   32 +-
 .../src/components/LiveRegion.tsx             |   17 +-
 packages/react-select/src/types.ts            |   17 +-
 13 files changed, 939 insertions(+), 888 deletions(-)

diff --git a/.changeset/selfish-dots-look.md b/.changeset/selfish-dots-look.md
index bd9758a455..bdfd64678c 100644
--- a/.changeset/selfish-dots-look.md
+++ b/.changeset/selfish-dots-look.md
@@ -3,6 +3,7 @@
 ---
 
 The following improvements have been made to the `aria-live` announcements:
+
 - NVDA now announces the context text when initially focused
 - VoiceOver now announces the context text when re-focusing
 - Placeholder text is now announced
diff --git a/packages/react-select/src/Select.tsx b/packages/react-select/src/Select.tsx
index a9463dca4e..fcf3dd32ed 100644
--- a/packages/react-select/src/Select.tsx
+++ b/packages/react-select/src/Select.tsx
@@ -320,7 +320,7 @@ interface State<
   focusedValue: Option | null;
   selectValue: Options<Option>;
   clearFocusValueOnUpdate: boolean;
-  clearIndicatorEngaged: boolean;
+  prevWasFocused: boolean;
   inputIsHiddenAfterUpdate: boolean | null | undefined;
   prevProps: Props<Option, IsMulti, Group> | void;
 }
@@ -584,9 +584,9 @@ export default class Select<
     isFocused: false,
     selectValue: [],
     clearFocusValueOnUpdate: false,
+    prevWasFocused: false,
     inputIsHiddenAfterUpdate: undefined,
     prevProps: undefined,
-    clearIndicatorEngaged: false,
   };
 
   // Misc. Instance Properties
@@ -630,17 +630,6 @@ export default class Select<
     this.instancePrefix =
       'react-select-' + (this.props.instanceId || ++instanceId);
     this.state.selectValue = cleanValue(props.value);
-
-    // If `value` or `defaultValue` props are not empty then announce them
-    // when the Select is focused
-    if (this.state.selectValue.length) {
-      this.state.ariaSelection = {
-        value: this.state.selectValue as OnChangeValue<Option, IsMulti>,
-        options: this.state.selectValue,
-        action: 'initial-input-focus',
-        name: this.props.name,
-      };
-    }
   }
 
   static getDerivedStateFromProps(
@@ -651,8 +640,12 @@ export default class Select<
       prevProps,
       clearFocusValueOnUpdate,
       inputIsHiddenAfterUpdate,
+      ariaSelection,
+      isFocused,
+      prevWasFocused,
     } = state;
     const { options, value, menuIsOpen, inputValue } = props;
+    const selectValue = cleanValue(value);
     let newMenuOptionsState = {};
     if (
       prevProps &&
@@ -661,7 +654,6 @@ export default class Select<
         menuIsOpen !== prevProps.menuIsOpen ||
         inputValue !== prevProps.inputValue)
     ) {
-      const selectValue = cleanValue(value);
       const focusableOptions = menuIsOpen
         ? buildFocusableOptions(props, selectValue)
         : [];
@@ -684,10 +676,46 @@ export default class Select<
             inputIsHiddenAfterUpdate: undefined,
           }
         : {};
+
+    const optionRemoved = [
+      'deselect-option',
+      'pop-value',
+      'remove-value',
+      'clear',
+    ].includes(ariaSelection?.action || '');
+
+    const allOptionsCleared = !selectValue.length && optionRemoved;
+
+    let newAriaSelection = ariaSelection;
+
+    let hasKeptFocus = isFocused && prevWasFocused;
+
+    if (isFocused && !hasKeptFocus) {
+      if (allOptionsCleared) {
+        newAriaSelection = null;
+      } else if (state.selectValue.length) {
+        // If `value` or `defaultValue` props are not empty then announce them
+        // when the Select is focused
+        newAriaSelection = {
+          value: valueTernary(
+            props.isMulti,
+            state.selectValue,
+            state.selectValue[0] || null
+          ),
+          options: selectValue,
+          action: 'initial-input-focus',
+        };
+
+        hasKeptFocus = !prevWasFocused;
+      }
+    }
+
     return {
       ...newMenuOptionsState,
       ...newInputIsHiddenState,
       prevProps: props,
+      ariaSelection: newAriaSelection,
+      prevWasFocused: hasKeptFocus,
     };
   }
   componentDidMount() {
@@ -703,17 +731,9 @@ export default class Select<
       this.focusInput();
     }
   }
-  componentDidUpdate(
-    prevProps: Props<Option, IsMulti, Group>,
-    prevState: State<Option, IsMulti, Group>
-  ) {
-    const { isDisabled, menuIsOpen, name } = this.props;
-    const {
-      ariaSelection,
-      isFocused,
-      selectValue,
-      clearIndicatorEngaged,
-    } = this.state;
+  componentDidUpdate(prevProps: Props<Option, IsMulti, Group>) {
+    const { isDisabled, menuIsOpen } = this.props;
+    const { isFocused } = this.state;
 
     if (
       // ensure focus is restored correctly when the control becomes enabled
@@ -739,47 +759,6 @@ export default class Select<
       scrollIntoView(this.menuListRef, this.focusedOptionRef);
       this.scrollToFocusedOptionOnUpdate = false;
     }
-
-    const setAriaSelectionToNull = () => this.setState({ ariaSelection: null });
-    const setAriaSelectionToSelectedValues = () =>
-      this.setState({
-        ariaSelection: {
-          value: selectValue as OnChangeValue<Option, IsMulti>,
-          options: selectValue,
-          action: 'initial-input-focus',
-          name,
-        },
-      });
-
-    const optionRemoved = [
-      'deselect-option',
-      'pop-value',
-      'remove-value',
-    ].includes(ariaSelection?.action || '');
-
-    const allOptionsCleared =
-      !selectValue.length && ariaSelection?.action === 'clear';
-
-    const selectWasRefocused = !prevState.isFocused && isFocused;
-
-    const selectWasRefocusedWithClearIndicatorDisengaged =
-      selectWasRefocused &&
-      !prevState.clearIndicatorEngaged &&
-      !clearIndicatorEngaged;
-
-    // if the last action was to remove options then we reset the aria selection
-    // message so it doesn't announce the removal when the select is focused again
-    if (selectWasRefocusedWithClearIndicatorDisengaged && allOptionsCleared) {
-      setAriaSelectionToNull();
-    } else if (selectWasRefocused && optionRemoved) {
-      if (selectValue.length) {
-        setAriaSelectionToSelectedValues();
-      } else {
-        setAriaSelectionToNull();
-      }
-    } else if (selectWasRefocused && selectValue.length) {
-      setAriaSelectionToSelectedValues();
-    }
   }
   componentWillUnmount() {
     this.stopListeningComposition();
@@ -1246,9 +1225,9 @@ export default class Select<
       return;
     }
     this.clearValue();
+    event.preventDefault();
     event.stopPropagation();
     this.openAfterFocus = false;
-    this.setState({ clearIndicatorEngaged: true });
     if (event.type === 'touchend') {
       this.focusInput();
     } else {
@@ -1390,7 +1369,6 @@ export default class Select<
     this.setState({
       inputIsHiddenAfterUpdate: false,
       isFocused: true,
-      clearIndicatorEngaged: false,
     });
     if (this.openAfterFocus || this.props.openMenuOnFocus) {
       this.openMenu('first');
@@ -2038,12 +2016,8 @@ export default class Select<
   }
 
   render() {
-    const {
-      Control,
-      IndicatorsContainer,
-      SelectContainer,
-      ValueContainer,
-    } = this.getComponents();
+    const { Control, IndicatorsContainer, SelectContainer, ValueContainer } =
+      this.getComponents();
 
     const { className, id, isDisabled, menuIsOpen } = this.props;
     const { isFocused } = this.state;
diff --git a/packages/react-select/src/__tests__/Async.test.tsx b/packages/react-select/src/__tests__/Async.test.tsx
index ec35c8b676..62009bf6e6 100644
--- a/packages/react-select/src/__tests__/Async.test.tsx
+++ b/packages/react-select/src/__tests__/Async.test.tsx
@@ -6,6 +6,8 @@ import userEvent from '@testing-library/user-event';
 import Async from '../Async';
 import { Option, OPTIONS } from './constants';
 
+jest.useFakeTimers();
+
 test('defaults - snapshot', () => {
   const { container } = render(<Async />);
   expect(container).toMatchSnapshot();
@@ -23,6 +25,11 @@ cases(
       <Async classNamePrefix="react-select" menuIsOpen {...props} />
     );
 
+    act(() => {
+      // wait for live region setTimeout
+      jest.runAllTimers();
+    });
+
     await waitFor(() => {
       expect(container.querySelectorAll('.react-select__option').length).toBe(
         expectOptionLength
diff --git a/packages/react-select/src/__tests__/Select.test.tsx b/packages/react-select/src/__tests__/Select.test.tsx
index 2467850bcc..e927801870 100644
--- a/packages/react-select/src/__tests__/Select.test.tsx
+++ b/packages/react-select/src/__tests__/Select.test.tsx
@@ -49,6 +49,8 @@ const BASIC_PROPS: BasicProps = {
   value: null,
 };
 
+jest.useFakeTimers();
+
 test('snapshot - defaults', () => {
   const { container } = render(
     <Select
@@ -162,31 +164,33 @@ cases(
     expect(value!.textContent).toBe(expectedOptions);
   },
   {
-    'single select > should format label of options according to text returned by formatOptionLabel': {
-      props: {
-        ...BASIC_PROPS,
-        formatOptionLabel: (
-          { label, value }: Option,
-          { context }: FormatOptionLabelMeta<Option>
-        ) => `${label} ${value} ${context}`,
-        value: OPTIONS[0],
-      },
-      valueComponentSelector: '.react-select__single-value',
-      expectedOptions: '0 zero value',
-    },
-    'multi select > should format label of options according to text returned by formatOptionLabel': {
-      props: {
-        ...BASIC_PROPS,
-        formatOptionLabel: (
-          { label, value }: Option,
-          { context }: FormatOptionLabelMeta<Option>
-        ) => `${label} ${value} ${context}`,
-        isMulti: true,
-        value: OPTIONS[0],
+    'single select > should format label of options according to text returned by formatOptionLabel':
+      {
+        props: {
+          ...BASIC_PROPS,
+          formatOptionLabel: (
+            { label, value }: Option,
+            { context }: FormatOptionLabelMeta<Option>
+          ) => `${label} ${value} ${context}`,
+          value: OPTIONS[0],
+        },
+        valueComponentSelector: '.react-select__single-value',
+        expectedOptions: '0 zero value',
+      },
+    'multi select > should format label of options according to text returned by formatOptionLabel':
+      {
+        props: {
+          ...BASIC_PROPS,
+          formatOptionLabel: (
+            { label, value }: Option,
+            { context }: FormatOptionLabelMeta<Option>
+          ) => `${label} ${value} ${context}`,
+          isMulti: true,
+          value: OPTIONS[0],
+        },
+        valueComponentSelector: '.react-select__multi-value',
+        expectedOptions: '0 zero value',
       },
-      valueComponentSelector: '.react-select__multi-value',
-      expectedOptions: '0 zero value',
-    },
   }
 );
 
@@ -228,13 +232,15 @@ cases(
     expect(container.querySelector('.react-select__menu')).toBeFalsy();
   },
   {
-    'single select > should show menu if menuIsOpen is true and hide menu if menuIsOpen prop is false': {},
-    'multi select > should show menu if menuIsOpen is true and hide menu if menuIsOpen prop is false': {
-      props: {
-        ...BASIC_PROPS,
-        isMulti: true,
+    'single select > should show menu if menuIsOpen is true and hide menu if menuIsOpen prop is false':
+      {},
+    'multi select > should show menu if menuIsOpen is true and hide menu if menuIsOpen prop is false':
+      {
+        props: {
+          ...BASIC_PROPS,
+          isMulti: true,
+        },
       },
-    },
   }
 );
 
@@ -290,18 +296,19 @@ cases(
       searchString: 'o',
       expectResultsLength: 5,
     },
-    'multi select > should filter all options other that options in value of select': {
-      props: {
-        ...BASIC_PROPS,
-        filterOption: (value: FilterOptionOption<Option>, search: string) =>
-          value.value.indexOf(search) > -1,
-        isMulti: true,
-        menuIsOpen: true,
-        value: OPTIONS[0],
+    'multi select > should filter all options other that options in value of select':
+      {
+        props: {
+          ...BASIC_PROPS,
+          filterOption: (value: FilterOptionOption<Option>, search: string) =>
+            value.value.indexOf(search) > -1,
+          isMulti: true,
+          menuIsOpen: true,
+          value: OPTIONS[0],
+        },
+        searchString: 'o',
+        expectResultsLength: 4,
       },
-      searchString: 'o',
-      expectResultsLength: 4,
-    },
   }
 );
 
@@ -380,32 +387,34 @@ cases(
     );
   },
   {
-    'single Select > should show NoOptionsMessage returned from noOptionsMessage function prop': {
-      props: {
-        ...BASIC_PROPS,
-        filterOption: (value: FilterOptionOption<Option>, search: string) =>
-          value.value.indexOf(search) > -1,
-        menuIsOpen: true,
-        noOptionsMessage: () =>
+    'single Select > should show NoOptionsMessage returned from noOptionsMessage function prop':
+      {
+        props: {
+          ...BASIC_PROPS,
+          filterOption: (value: FilterOptionOption<Option>, search: string) =>
+            value.value.indexOf(search) > -1,
+          menuIsOpen: true,
+          noOptionsMessage: () =>
+            'this is custom no option message for single select',
+        },
+        expectNoOptionsMessage:
           'this is custom no option message for single select',
-      },
-      expectNoOptionsMessage:
-        'this is custom no option message for single select',
-      searchString: 'some text not in options',
-    },
-    'multi select > should show NoOptionsMessage returned from noOptionsMessage function prop': {
-      props: {
-        ...BASIC_PROPS,
-        filterOption: (value: FilterOptionOption<Option>, search: string) =>
-          value.value.indexOf(search) > -1,
-        menuIsOpen: true,
-        noOptionsMessage: () =>
+        searchString: 'some text not in options',
+      },
+    'multi select > should show NoOptionsMessage returned from noOptionsMessage function prop':
+      {
+        props: {
+          ...BASIC_PROPS,
+          filterOption: (value: FilterOptionOption<Option>, search: string) =>
+            value.value.indexOf(search) > -1,
+          menuIsOpen: true,
+          noOptionsMessage: () =>
+            'this is custom no option message for multi select',
+        },
+        expectNoOptionsMessage:
           'this is custom no option message for multi select',
+        searchString: 'some text not in options',
       },
-      expectNoOptionsMessage:
-        'this is custom no option message for multi select',
-      searchString: 'some text not in options',
-    },
   }
 );
 
@@ -434,13 +443,14 @@ cases(
       },
       expectedValue: [{ label: '2', value: 'two' }],
     },
-    'single select > with option values as number > should set it as initial value': {
-      props: {
-        ...BASIC_PROPS,
-        value: OPTIONS_NUMBER_VALUE[2],
+    'single select > with option values as number > should set it as initial value':
+      {
+        props: {
+          ...BASIC_PROPS,
+          value: OPTIONS_NUMBER_VALUE[2],
+        },
+        expectedValue: [{ label: '2', value: 2 }],
       },
-      expectedValue: [{ label: '2', value: 2 }],
-    },
     'multi select > should set it as initial value': {
       props: {
         ...BASIC_PROPS,
@@ -449,14 +459,15 @@ cases(
       },
       expectedValue: [{ label: '1', value: 'one' }],
     },
-    'multi select > with option values as number > should set it as initial value': {
-      props: {
-        ...BASIC_PROPS,
-        isMulti: true,
-        value: OPTIONS_NUMBER_VALUE[1],
+    'multi select > with option values as number > should set it as initial value':
+      {
+        props: {
+          ...BASIC_PROPS,
+          isMulti: true,
+          value: OPTIONS_NUMBER_VALUE[1],
+        },
+        expectedValue: [{ label: '1', value: 1 }],
       },
-      expectedValue: [{ label: '1', value: 1 }],
-    },
   }
 );
 
@@ -492,16 +503,17 @@ cases(
       expectedInitialValue: 'one',
       expectedUpdatedValue: 'three',
     },
-    'single select > value of options is number > should update the value when prop is updated': {
-      props: {
-        ...BASIC_PROPS,
-        options: OPTIONS_NUMBER_VALUE,
-        value: OPTIONS_NUMBER_VALUE[2],
+    'single select > value of options is number > should update the value when prop is updated':
+      {
+        props: {
+          ...BASIC_PROPS,
+          options: OPTIONS_NUMBER_VALUE,
+          value: OPTIONS_NUMBER_VALUE[2],
+        },
+        updateValueTo: OPTIONS_NUMBER_VALUE[3],
+        expectedInitialValue: '2',
+        expectedUpdatedValue: '3',
       },
-      updateValueTo: OPTIONS_NUMBER_VALUE[3],
-      expectedInitialValue: '2',
-      expectedUpdatedValue: '3',
-    },
     'multi select > should update the value when prop is updated': {
       props: {
         ...BASIC_PROPS,
@@ -512,18 +524,19 @@ cases(
       expectedInitialValue: 'one',
       expectedUpdatedValue: 'three',
     },
-    'multi select > value of options is number > should update the value when prop is updated': {
-      props: {
-        ...BASIC_PROPS,
-        delimiter: ',',
-        isMulti: true,
-        options: OPTIONS_NUMBER_VALUE,
-        value: OPTIONS_NUMBER_VALUE[2],
+    'multi select > value of options is number > should update the value when prop is updated':
+      {
+        props: {
+          ...BASIC_PROPS,
+          delimiter: ',',
+          isMulti: true,
+          options: OPTIONS_NUMBER_VALUE,
+          value: OPTIONS_NUMBER_VALUE[2],
+        },
+        updateValueTo: [OPTIONS_NUMBER_VALUE[3], OPTIONS_NUMBER_VALUE[2]],
+        expectedInitialValue: '2',
+        expectedUpdatedValue: '3,2',
       },
-      updateValueTo: [OPTIONS_NUMBER_VALUE[3], OPTIONS_NUMBER_VALUE[2]],
-      expectedInitialValue: '2',
-      expectedUpdatedValue: '3,2',
-    },
   }
 );
 
@@ -561,125 +574,137 @@ cases(
     });
   },
   {
-    'single select > option is clicked > should call onChange() prop with selected option': {
-      event: ['click' as const] as const,
-      optionsSelected: { label: '2', value: 'two' },
-      expectedSelectedOption: { label: '2', value: 'two' },
-    },
-    'single select > option with number value > option is clicked > should call onChange() prop with selected option': {
-      props: {
-        ...BASIC_PROPS,
-        menuIsOpen: true,
-        options: OPTIONS_NUMBER_VALUE,
-      },
-      event: ['click' as const] as const,
-      optionsSelected: { label: '0', value: 0 },
-      expectedSelectedOption: { label: '0', value: 0 },
-    },
-    'single select > option with boolean value > option is clicked > should call onChange() prop with selected option': {
-      props: {
-        ...BASIC_PROPS,
-        menuIsOpen: true,
-        options: OPTIONS_BOOLEAN_VALUE,
-      },
-      event: ['click' as const] as const,
-      optionsSelected: { label: 'true', value: true },
-      expectedSelectedOption: { label: 'true', value: true },
-    },
-    'single select > tab key is pressed while focusing option > should call onChange() prop with selected option': {
-      event: ['keyDown' as const, { keyCode: 9, key: 'Tab' }] as const,
-      optionsSelected: { label: '1', value: 'one' },
-      focusedOption: { label: '1', value: 'one' },
-      expectedSelectedOption: { label: '1', value: 'one' },
-    },
-    'single select > enter key is pressed while focusing option > should call onChange() prop with selected option': {
-      event: ['keyDown' as const, { keyCode: 13, key: 'Enter' }] as const,
-      optionsSelected: { label: '3', value: 'three' },
-      focusedOption: { label: '3', value: 'three' },
-      expectedSelectedOption: { label: '3', value: 'three' },
-    },
-    'single select > space key is pressed while focusing option > should call onChange() prop with selected option': {
-      event: ['keyDown' as const, { keyCode: 32, key: ' ' }] as const,
-      optionsSelected: { label: '1', value: 'one' },
-      focusedOption: { label: '1', value: 'one' },
-      expectedSelectedOption: { label: '1', value: 'one' },
-    },
-    'multi select > option is clicked > should call onChange() prop with selected option': {
-      props: {
-        ...BASIC_PROPS,
-        isMulti: true,
-        menuIsOpen: true,
-        options: OPTIONS,
-      },
-      event: ['click' as const] as const,
-      optionsSelected: { label: '2', value: 'two' },
-      expectedSelectedOption: [{ label: '2', value: 'two' }],
-      expectedActionMetaOption: { label: '2', value: 'two' },
-    },
-    'multi select > option with number value > option is clicked > should call onChange() prop with selected option': {
-      props: {
-        ...BASIC_PROPS,
-        isMulti: true,
-        menuIsOpen: true,
-        options: OPTIONS_NUMBER_VALUE,
-      },
-      event: ['click' as const] as const,
-      optionsSelected: { label: '0', value: 0 },
-      expectedSelectedOption: [{ label: '0', value: 0 }],
-      expectedActionMetaOption: { label: '0', value: 0 },
-    },
-    'multi select > option with boolean value > option is clicked > should call onChange() prop with selected option': {
-      props: {
-        ...BASIC_PROPS,
-        isMulti: true,
-        menuIsOpen: true,
-        options: OPTIONS_BOOLEAN_VALUE,
-      },
-      event: ['click' as const] as const,
-      optionsSelected: { label: 'true', value: true },
-      expectedSelectedOption: [{ label: 'true', value: true }],
-      expectedActionMetaOption: { label: 'true', value: true },
-    },
-    'multi select > tab key is pressed while focusing option > should call onChange() prop with selected option': {
-      props: {
-        ...BASIC_PROPS,
-        isMulti: true,
-        menuIsOpen: true,
-        options: OPTIONS,
-      },
-      event: ['keyDown' as const, { keyCode: 9, key: 'Tab' }] as const,
-      menuIsOpen: true,
-      optionsSelected: { label: '1', value: 'one' },
-      focusedOption: { label: '1', value: 'one' },
-      expectedSelectedOption: [{ label: '1', value: 'one' }],
-      expectedActionMetaOption: { label: '1', value: 'one' },
-    },
-    'multi select > enter key is pressed while focusing option > should call onChange() prop with selected option': {
-      props: {
-        ...BASIC_PROPS,
-        isMulti: true,
-        menuIsOpen: true,
-        options: OPTIONS,
-      },
-      event: ['keyDown' as const, { keyCode: 13, key: 'Enter' }] as const,
-      optionsSelected: { label: '3', value: 'three' },
-      focusedOption: { label: '3', value: 'three' },
-      expectedSelectedOption: [{ label: '3', value: 'three' }],
-      expectedActionMetaOption: { label: '3', value: 'three' },
-    },
-    'multi select > space key is pressed while focusing option > should call onChange() prop with selected option': {
-      props: {
-        ...BASIC_PROPS,
-        isMulti: true,
+    'single select > option is clicked > should call onChange() prop with selected option':
+      {
+        event: ['click' as const] as const,
+        optionsSelected: { label: '2', value: 'two' },
+        expectedSelectedOption: { label: '2', value: 'two' },
+      },
+    'single select > option with number value > option is clicked > should call onChange() prop with selected option':
+      {
+        props: {
+          ...BASIC_PROPS,
+          menuIsOpen: true,
+          options: OPTIONS_NUMBER_VALUE,
+        },
+        event: ['click' as const] as const,
+        optionsSelected: { label: '0', value: 0 },
+        expectedSelectedOption: { label: '0', value: 0 },
+      },
+    'single select > option with boolean value > option is clicked > should call onChange() prop with selected option':
+      {
+        props: {
+          ...BASIC_PROPS,
+          menuIsOpen: true,
+          options: OPTIONS_BOOLEAN_VALUE,
+        },
+        event: ['click' as const] as const,
+        optionsSelected: { label: 'true', value: true },
+        expectedSelectedOption: { label: 'true', value: true },
+      },
+    'single select > tab key is pressed while focusing option > should call onChange() prop with selected option':
+      {
+        event: ['keyDown' as const, { keyCode: 9, key: 'Tab' }] as const,
+        optionsSelected: { label: '1', value: 'one' },
+        focusedOption: { label: '1', value: 'one' },
+        expectedSelectedOption: { label: '1', value: 'one' },
+      },
+    'single select > enter key is pressed while focusing option > should call onChange() prop with selected option':
+      {
+        event: ['keyDown' as const, { keyCode: 13, key: 'Enter' }] as const,
+        optionsSelected: { label: '3', value: 'three' },
+        focusedOption: { label: '3', value: 'three' },
+        expectedSelectedOption: { label: '3', value: 'three' },
+      },
+    'single select > space key is pressed while focusing option > should call onChange() prop with selected option':
+      {
+        event: ['keyDown' as const, { keyCode: 32, key: ' ' }] as const,
+        optionsSelected: { label: '1', value: 'one' },
+        focusedOption: { label: '1', value: 'one' },
+        expectedSelectedOption: { label: '1', value: 'one' },
+      },
+    'multi select > option is clicked > should call onChange() prop with selected option':
+      {
+        props: {
+          ...BASIC_PROPS,
+          isMulti: true,
+          menuIsOpen: true,
+          options: OPTIONS,
+        },
+        event: ['click' as const] as const,
+        optionsSelected: { label: '2', value: 'two' },
+        expectedSelectedOption: [{ label: '2', value: 'two' }],
+        expectedActionMetaOption: { label: '2', value: 'two' },
+      },
+    'multi select > option with number value > option is clicked > should call onChange() prop with selected option':
+      {
+        props: {
+          ...BASIC_PROPS,
+          isMulti: true,
+          menuIsOpen: true,
+          options: OPTIONS_NUMBER_VALUE,
+        },
+        event: ['click' as const] as const,
+        optionsSelected: { label: '0', value: 0 },
+        expectedSelectedOption: [{ label: '0', value: 0 }],
+        expectedActionMetaOption: { label: '0', value: 0 },
+      },
+    'multi select > option with boolean value > option is clicked > should call onChange() prop with selected option':
+      {
+        props: {
+          ...BASIC_PROPS,
+          isMulti: true,
+          menuIsOpen: true,
+          options: OPTIONS_BOOLEAN_VALUE,
+        },
+        event: ['click' as const] as const,
+        optionsSelected: { label: 'true', value: true },
+        expectedSelectedOption: [{ label: 'true', value: true }],
+        expectedActionMetaOption: { label: 'true', value: true },
+      },
+    'multi select > tab key is pressed while focusing option > should call onChange() prop with selected option':
+      {
+        props: {
+          ...BASIC_PROPS,
+          isMulti: true,
+          menuIsOpen: true,
+          options: OPTIONS,
+        },
+        event: ['keyDown' as const, { keyCode: 9, key: 'Tab' }] as const,
         menuIsOpen: true,
-        options: OPTIONS,
+        optionsSelected: { label: '1', value: 'one' },
+        focusedOption: { label: '1', value: 'one' },
+        expectedSelectedOption: [{ label: '1', value: 'one' }],
+        expectedActionMetaOption: { label: '1', value: 'one' },
+      },
+    'multi select > enter key is pressed while focusing option > should call onChange() prop with selected option':
+      {
+        props: {
+          ...BASIC_PROPS,
+          isMulti: true,
+          menuIsOpen: true,
+          options: OPTIONS,
+        },
+        event: ['keyDown' as const, { keyCode: 13, key: 'Enter' }] as const,
+        optionsSelected: { label: '3', value: 'three' },
+        focusedOption: { label: '3', value: 'three' },
+        expectedSelectedOption: [{ label: '3', value: 'three' }],
+        expectedActionMetaOption: { label: '3', value: 'three' },
+      },
+    'multi select > space key is pressed while focusing option > should call onChange() prop with selected option':
+      {
+        props: {
+          ...BASIC_PROPS,
+          isMulti: true,
+          menuIsOpen: true,
+          options: OPTIONS,
+        },
+        event: ['keyDown' as const, { keyCode: 32, key: ' ' }] as const,
+        optionsSelected: { label: '1', value: 'one' },
+        focusedOption: { label: '1', value: 'one' },
+        expectedSelectedOption: [{ label: '1', value: 'one' }],
+        expectedActionMetaOption: { label: '1', value: 'one' },
       },
-      event: ['keyDown' as const, { keyCode: 32, key: ' ' }] as const,
-      optionsSelected: { label: '1', value: 'one' },
-      focusedOption: { label: '1', value: 'one' },
-      expectedSelectedOption: [{ label: '1', value: 'one' }],
-      expectedActionMetaOption: { label: '1', value: 'one' },
-    },
   }
 );
 
@@ -751,76 +776,82 @@ cases<CallsOnOnDeselectChangeOpts>(
     });
   },
   {
-    'option is clicked > should call onChange() prop with correct selected options and meta': {
-      props: {
-        ...BASIC_PROPS,
-        options: OPTIONS,
-        value: [{ label: '2', value: 'two' }],
-      },
-      event: ['click'],
-      optionsSelected: { label: '2', value: 'two' },
-      expectedSelectedOption: [],
-      expectedMetaOption: { label: '2', value: 'two' },
-    },
-    'option with number value > option is clicked > should call onChange() prop with selected option': {
-      props: {
-        ...BASIC_PROPS,
-        options: OPTIONS_NUMBER_VALUE,
-        value: [{ label: '0', value: 0 }],
-      },
-      event: ['click'],
-      optionsSelected: { label: '0', value: 0 },
-      expectedSelectedOption: [],
-      expectedMetaOption: { label: '0', value: 0 },
-    },
-    'option with boolean value > option is clicked > should call onChange() prop with selected option': {
-      props: {
-        ...BASIC_PROPS,
-        options: OPTIONS_BOOLEAN_VALUE,
-        value: [{ label: 'true', value: true }],
-      },
-      event: ['click'],
-      optionsSelected: { label: 'true', value: true },
-      expectedSelectedOption: [],
-      expectedMetaOption: { label: 'true', value: true },
-    },
-    'tab key is pressed while focusing option > should call onChange() prop with selected option': {
-      props: {
-        ...BASIC_PROPS,
-        options: OPTIONS,
-        value: [{ label: '1', value: 'one' }],
-      },
-      event: ['keyDown', { keyCode: 9, key: 'Tab' }],
-      menuIsOpen: true,
-      optionsSelected: { label: '1', value: 'one' },
-      focusedOption: { label: '1', value: 'one' },
-      expectedSelectedOption: [],
-      expectedMetaOption: { label: '1', value: 'one' },
-    },
-    'enter key is pressed while focusing option > should call onChange() prop with selected option': {
-      props: {
-        ...BASIC_PROPS,
-        options: OPTIONS,
-        value: { label: '3', value: 'three' },
-      },
-      event: ['keyDown', { keyCode: 13, key: 'Enter' }],
-      optionsSelected: { label: '3', value: 'three' },
-      focusedOption: { label: '3', value: 'three' },
-      expectedSelectedOption: [],
-      expectedMetaOption: { label: '3', value: 'three' },
-    },
-    'space key is pressed while focusing option > should call onChange() prop with selected option': {
-      props: {
-        ...BASIC_PROPS,
-        options: OPTIONS,
-        value: [{ label: '1', value: 'one' }],
+    'option is clicked > should call onChange() prop with correct selected options and meta':
+      {
+        props: {
+          ...BASIC_PROPS,
+          options: OPTIONS,
+          value: [{ label: '2', value: 'two' }],
+        },
+        event: ['click'],
+        optionsSelected: { label: '2', value: 'two' },
+        expectedSelectedOption: [],
+        expectedMetaOption: { label: '2', value: 'two' },
+      },
+    'option with number value > option is clicked > should call onChange() prop with selected option':
+      {
+        props: {
+          ...BASIC_PROPS,
+          options: OPTIONS_NUMBER_VALUE,
+          value: [{ label: '0', value: 0 }],
+        },
+        event: ['click'],
+        optionsSelected: { label: '0', value: 0 },
+        expectedSelectedOption: [],
+        expectedMetaOption: { label: '0', value: 0 },
+      },
+    'option with boolean value > option is clicked > should call onChange() prop with selected option':
+      {
+        props: {
+          ...BASIC_PROPS,
+          options: OPTIONS_BOOLEAN_VALUE,
+          value: [{ label: 'true', value: true }],
+        },
+        event: ['click'],
+        optionsSelected: { label: 'true', value: true },
+        expectedSelectedOption: [],
+        expectedMetaOption: { label: 'true', value: true },
+      },
+    'tab key is pressed while focusing option > should call onChange() prop with selected option':
+      {
+        props: {
+          ...BASIC_PROPS,
+          options: OPTIONS,
+          value: [{ label: '1', value: 'one' }],
+        },
+        event: ['keyDown', { keyCode: 9, key: 'Tab' }],
+        menuIsOpen: true,
+        optionsSelected: { label: '1', value: 'one' },
+        focusedOption: { label: '1', value: 'one' },
+        expectedSelectedOption: [],
+        expectedMetaOption: { label: '1', value: 'one' },
+      },
+    'enter key is pressed while focusing option > should call onChange() prop with selected option':
+      {
+        props: {
+          ...BASIC_PROPS,
+          options: OPTIONS,
+          value: { label: '3', value: 'three' },
+        },
+        event: ['keyDown', { keyCode: 13, key: 'Enter' }],
+        optionsSelected: { label: '3', value: 'three' },
+        focusedOption: { label: '3', value: 'three' },
+        expectedSelectedOption: [],
+        expectedMetaOption: { label: '3', value: 'three' },
+      },
+    'space key is pressed while focusing option > should call onChange() prop with selected option':
+      {
+        props: {
+          ...BASIC_PROPS,
+          options: OPTIONS,
+          value: [{ label: '1', value: 'one' }],
+        },
+        event: ['keyDown', { keyCode: 32, key: ' ' }],
+        optionsSelected: { label: '1', value: 'one' },
+        focusedOption: { label: '1', value: 'one' },
+        expectedSelectedOption: [],
+        expectedMetaOption: { label: '1', value: 'one' },
       },
-      event: ['keyDown', { keyCode: 32, key: ' ' }],
-      optionsSelected: { label: '1', value: 'one' },
-      focusedOption: { label: '1', value: 'one' },
-      expectedSelectedOption: [],
-      expectedMetaOption: { label: '1', value: 'one' },
-    },
   }
 );
 
@@ -965,15 +996,16 @@ cases(
     ).toEqual(nextFocusOption.label);
   },
   {
-    'single select > ArrowDown key on first option should focus second option': {
-      props: {
-        ...BASIC_PROPS,
-        menuIsOpen: true,
+    'single select > ArrowDown key on first option should focus second option':
+      {
+        props: {
+          ...BASIC_PROPS,
+          menuIsOpen: true,
+        },
+        keyEvent: [{ keyCode: 40, key: 'ArrowDown' }],
+        selectedOption: OPTIONS[0],
+        nextFocusOption: OPTIONS[1],
       },
-      keyEvent: [{ keyCode: 40, key: 'ArrowDown' }],
-      selectedOption: OPTIONS[0],
-      nextFocusOption: OPTIONS[1],
-    },
     'single select > ArrowDown key on last option should focus first option': {
       props: {
         ...BASIC_PROPS,
@@ -994,16 +1026,17 @@ cases(
       selectedOption: OPTIONS[0],
       nextFocusOption: OPTIONS[OPTIONS.length - 1],
     },
-    'single select > ArrowUp key on last option should focus second last option': {
-      props: {
-        ...BASIC_PROPS,
-        menuIsOpen: true,
-        options: OPTIONS,
+    'single select > ArrowUp key on last option should focus second last option':
+      {
+        props: {
+          ...BASIC_PROPS,
+          menuIsOpen: true,
+          options: OPTIONS,
+        },
+        keyEvent: [{ keyCode: 38, key: 'ArrowUp' }],
+        selectedOption: OPTIONS[OPTIONS.length - 1],
+        nextFocusOption: OPTIONS[OPTIONS.length - 2],
       },
-      keyEvent: [{ keyCode: 38, key: 'ArrowUp' }],
-      selectedOption: OPTIONS[OPTIONS.length - 1],
-      nextFocusOption: OPTIONS[OPTIONS.length - 2],
-    },
     'single select > disabled options should be focusable': {
       props: {
         ...BASIC_PROPS,
@@ -1014,68 +1047,74 @@ cases(
       selectedOption: OPTIONS_DISABLED[0],
       nextFocusOption: OPTIONS_DISABLED[1],
     },
-    'single select > PageDown key takes us to next page with default page size of 5': {
-      props: {
-        ...BASIC_PROPS,
-        menuIsOpen: true,
-        options: OPTIONS,
-      },
-      keyEvent: [{ keyCode: 34, key: 'PageDown' }],
-      selectedOption: OPTIONS[0],
-      nextFocusOption: OPTIONS[5],
-    },
-    'single select > PageDown key takes us to next page with custom pageSize 7': {
-      props: {
-        ...BASIC_PROPS,
-        menuIsOpen: true,
-        pageSize: 7,
-        options: OPTIONS,
-      },
-      keyEvent: [{ keyCode: 34, key: 'PageDown' }],
-      selectedOption: OPTIONS[0],
-      nextFocusOption: OPTIONS[7],
-    },
-    'single select > PageDown key takes to the last option is options below is less then page size': {
-      props: {
-        ...BASIC_PROPS,
-        menuIsOpen: true,
-        options: OPTIONS,
-      },
-      keyEvent: [{ keyCode: 34, key: 'PageDown' }],
-      selectedOption: OPTIONS[OPTIONS.length - 3],
-      nextFocusOption: OPTIONS[OPTIONS.length - 1],
-    },
-    'single select > PageUp key takes us to previous page with default page size of 5': {
-      props: {
-        ...BASIC_PROPS,
-        menuIsOpen: true,
-        options: OPTIONS,
-      },
-      keyEvent: [{ keyCode: 33, key: 'PageUp' }],
-      selectedOption: OPTIONS[6],
-      nextFocusOption: OPTIONS[1],
-    },
-    'single select > PageUp key takes us to previous page with custom pageSize of 7': {
-      props: {
-        ...BASIC_PROPS,
-        menuIsOpen: true,
-        pageSize: 7,
-        options: OPTIONS,
-      },
-      keyEvent: [{ keyCode: 33, key: 'PageUp' }],
-      selectedOption: OPTIONS[9],
-      nextFocusOption: OPTIONS[2],
-    },
-    'single select > PageUp key takes us to first option - (previous options < pageSize)': {
-      props: {
-        ...BASIC_PROPS,
-        menuIsOpen: true,
-        options: OPTIONS,
+    'single select > PageDown key takes us to next page with default page size of 5':
+      {
+        props: {
+          ...BASIC_PROPS,
+          menuIsOpen: true,
+          options: OPTIONS,
+        },
+        keyEvent: [{ keyCode: 34, key: 'PageDown' }],
+        selectedOption: OPTIONS[0],
+        nextFocusOption: OPTIONS[5],
+      },
+    'single select > PageDown key takes us to next page with custom pageSize 7':
+      {
+        props: {
+          ...BASIC_PROPS,
+          menuIsOpen: true,
+          pageSize: 7,
+          options: OPTIONS,
+        },
+        keyEvent: [{ keyCode: 34, key: 'PageDown' }],
+        selectedOption: OPTIONS[0],
+        nextFocusOption: OPTIONS[7],
+      },
+    'single select > PageDown key takes to the last option is options below is less then page size':
+      {
+        props: {
+          ...BASIC_PROPS,
+          menuIsOpen: true,
+          options: OPTIONS,
+        },
+        keyEvent: [{ keyCode: 34, key: 'PageDown' }],
+        selectedOption: OPTIONS[OPTIONS.length - 3],
+        nextFocusOption: OPTIONS[OPTIONS.length - 1],
+      },
+    'single select > PageUp key takes us to previous page with default page size of 5':
+      {
+        props: {
+          ...BASIC_PROPS,
+          menuIsOpen: true,
+          options: OPTIONS,
+        },
+        keyEvent: [{ keyCode: 33, key: 'PageUp' }],
+        selectedOption: OPTIONS[6],
+        nextFocusOption: OPTIONS[1],
+      },
+    'single select > PageUp key takes us to previous page with custom pageSize of 7':
+      {
+        props: {
+          ...BASIC_PROPS,
+          menuIsOpen: true,
+          pageSize: 7,
+          options: OPTIONS,
+        },
+        keyEvent: [{ keyCode: 33, key: 'PageUp' }],
+        selectedOption: OPTIONS[9],
+        nextFocusOption: OPTIONS[2],
+      },
+    'single select > PageUp key takes us to first option - (previous options < pageSize)':
+      {
+        props: {
+          ...BASIC_PROPS,
+          menuIsOpen: true,
+          options: OPTIONS,
+        },
+        keyEvent: [{ keyCode: 33, key: 'PageUp' }],
+        selectedOption: OPTIONS[1],
+        nextFocusOption: OPTIONS[0],
       },
-      keyEvent: [{ keyCode: 33, key: 'PageUp' }],
-      selectedOption: OPTIONS[1],
-      nextFocusOption: OPTIONS[0],
-    },
     'single select > Home key takes up to the first option': {
       props: {
         ...BASIC_PROPS,
@@ -1129,85 +1168,92 @@ cases(
       selectedOption: OPTIONS[0],
       nextFocusOption: OPTIONS[OPTIONS.length - 1],
     },
-    'multi select > ArrowUp key on last option should focus second last option': {
-      props: {
-        ...BASIC_PROPS,
-        isMulti: true,
-        menuIsOpen: true,
-        options: OPTIONS,
-      },
-      keyEvent: [{ keyCode: 38, key: 'ArrowUp' }],
-      selectedOption: OPTIONS[OPTIONS.length - 1],
-      nextFocusOption: OPTIONS[OPTIONS.length - 2],
-    },
-    'multi select > PageDown key takes us to next page with default page size of 5': {
-      props: {
-        ...BASIC_PROPS,
-        isMulti: true,
-        menuIsOpen: true,
-        options: OPTIONS,
-      },
-      keyEvent: [{ keyCode: 34, key: 'PageDown' }],
-      selectedOption: OPTIONS[0],
-      nextFocusOption: OPTIONS[5],
-    },
-    'multi select > PageDown key takes us to next page with custom pageSize of 8': {
-      props: {
-        ...BASIC_PROPS,
-        isMulti: true,
-        menuIsOpen: true,
-        pageSize: 8,
-        options: OPTIONS,
-      },
-      keyEvent: [{ keyCode: 34, key: 'PageDown' }],
-      selectedOption: OPTIONS[0],
-      nextFocusOption: OPTIONS[8],
-    },
-    'multi select > PageDown key takes to the last option is options below is less then page size': {
-      props: {
-        ...BASIC_PROPS,
-        isMulti: true,
-        menuIsOpen: true,
-        options: OPTIONS,
-      },
-      keyEvent: [{ keyCode: 34, key: 'PageDown' }],
-      selectedOption: OPTIONS[OPTIONS.length - 3],
-      nextFocusOption: OPTIONS[OPTIONS.length - 1],
-    },
-    'multi select > PageUp key takes us to previous page with default page size of 5': {
-      props: {
-        ...BASIC_PROPS,
-        isMulti: true,
-        menuIsOpen: true,
-        options: OPTIONS,
-      },
-      keyEvent: [{ keyCode: 33, key: 'PageUp' }],
-      selectedOption: OPTIONS[6],
-      nextFocusOption: OPTIONS[1],
-    },
-    'multi select > PageUp key takes us to previous page with default page size of 9': {
-      props: {
-        ...BASIC_PROPS,
-        isMulti: true,
-        menuIsOpen: true,
-        pageSize: 9,
-        options: OPTIONS,
-      },
-      keyEvent: [{ keyCode: 33, key: 'PageUp' }],
-      selectedOption: OPTIONS[10],
-      nextFocusOption: OPTIONS[1],
-    },
-    'multi select > PageUp key takes us to first option - previous options < pageSize': {
-      props: {
-        ...BASIC_PROPS,
-        isMulti: true,
-        menuIsOpen: true,
-        options: OPTIONS,
+    'multi select > ArrowUp key on last option should focus second last option':
+      {
+        props: {
+          ...BASIC_PROPS,
+          isMulti: true,
+          menuIsOpen: true,
+          options: OPTIONS,
+        },
+        keyEvent: [{ keyCode: 38, key: 'ArrowUp' }],
+        selectedOption: OPTIONS[OPTIONS.length - 1],
+        nextFocusOption: OPTIONS[OPTIONS.length - 2],
+      },
+    'multi select > PageDown key takes us to next page with default page size of 5':
+      {
+        props: {
+          ...BASIC_PROPS,
+          isMulti: true,
+          menuIsOpen: true,
+          options: OPTIONS,
+        },
+        keyEvent: [{ keyCode: 34, key: 'PageDown' }],
+        selectedOption: OPTIONS[0],
+        nextFocusOption: OPTIONS[5],
+      },
+    'multi select > PageDown key takes us to next page with custom pageSize of 8':
+      {
+        props: {
+          ...BASIC_PROPS,
+          isMulti: true,
+          menuIsOpen: true,
+          pageSize: 8,
+          options: OPTIONS,
+        },
+        keyEvent: [{ keyCode: 34, key: 'PageDown' }],
+        selectedOption: OPTIONS[0],
+        nextFocusOption: OPTIONS[8],
+      },
+    'multi select > PageDown key takes to the last option is options below is less then page size':
+      {
+        props: {
+          ...BASIC_PROPS,
+          isMulti: true,
+          menuIsOpen: true,
+          options: OPTIONS,
+        },
+        keyEvent: [{ keyCode: 34, key: 'PageDown' }],
+        selectedOption: OPTIONS[OPTIONS.length - 3],
+        nextFocusOption: OPTIONS[OPTIONS.length - 1],
+      },
+    'multi select > PageUp key takes us to previous page with default page size of 5':
+      {
+        props: {
+          ...BASIC_PROPS,
+          isMulti: true,
+          menuIsOpen: true,
+          options: OPTIONS,
+        },
+        keyEvent: [{ keyCode: 33, key: 'PageUp' }],
+        selectedOption: OPTIONS[6],
+        nextFocusOption: OPTIONS[1],
+      },
+    'multi select > PageUp key takes us to previous page with default page size of 9':
+      {
+        props: {
+          ...BASIC_PROPS,
+          isMulti: true,
+          menuIsOpen: true,
+          pageSize: 9,
+          options: OPTIONS,
+        },
+        keyEvent: [{ keyCode: 33, key: 'PageUp' }],
+        selectedOption: OPTIONS[10],
+        nextFocusOption: OPTIONS[1],
+      },
+    'multi select > PageUp key takes us to first option - previous options < pageSize':
+      {
+        props: {
+          ...BASIC_PROPS,
+          isMulti: true,
+          menuIsOpen: true,
+          options: OPTIONS,
+        },
+        keyEvent: [{ keyCode: 33, key: 'PageUp' }],
+        selectedOption: OPTIONS[1],
+        nextFocusOption: OPTIONS[0],
       },
-      keyEvent: [{ keyCode: 33, key: 'PageUp' }],
-      selectedOption: OPTIONS[1],
-      nextFocusOption: OPTIONS[0],
-    },
     'multi select > Home key takes up to the first option': {
       props: {
         ...BASIC_PROPS,
@@ -1249,23 +1295,25 @@ cases(
     expect(spy).toHaveBeenCalledWith('', { action: 'menu-close' });
   },
   {
-    'single select > should call onInputChange prop with empty string as inputValue': {
-      props: {
-        ...BASIC_PROPS,
-        inputValue: 'test',
-        menuIsOpen: true,
-        value: OPTIONS[0],
+    'single select > should call onInputChange prop with empty string as inputValue':
+      {
+        props: {
+          ...BASIC_PROPS,
+          inputValue: 'test',
+          menuIsOpen: true,
+          value: OPTIONS[0],
+        },
       },
-    },
-    'multi select > should call onInputChange prop with empty string as inputValue': {
-      props: {
-        ...BASIC_PROPS,
-        inputValue: 'test',
-        isMulti: true,
-        menuIsOpen: true,
-        value: OPTIONS[0],
+    'multi select > should call onInputChange prop with empty string as inputValue':
+      {
+        props: {
+          ...BASIC_PROPS,
+          inputValue: 'test',
+          isMulti: true,
+          menuIsOpen: true,
+          value: OPTIONS[0],
+        },
       },
-    },
   }
 );
 
@@ -1286,13 +1334,15 @@ cases(
     expect(onMenuOpenSpy).toHaveBeenCalled();
   },
   {
-    'single select > should call onMenuOpen prop when select is opened and onMenuClose prop when select is closed': {},
-    'multi select > should call onMenuOpen prop when select is opened and onMenuClose prop when select is closed': {
-      props: {
-        ...BASIC_PROPS,
-        isMulti: true,
+    'single select > should call onMenuOpen prop when select is opened and onMenuClose prop when select is closed':
+      {},
+    'multi select > should call onMenuOpen prop when select is opened and onMenuClose prop when select is closed':
+      {
+        props: {
+          ...BASIC_PROPS,
+          isMulti: true,
+        },
       },
-    },
   }
 );
 
@@ -1311,13 +1361,15 @@ cases(
     expect(onMenuCloseSpy).toHaveBeenCalled();
   },
   {
-    'single select > should call onMenuOpen prop when select is opened and onMenuClose prop when select is closed': {},
-    'multi select > should call onMenuOpen prop when select is opened and onMenuClose prop when select is closed': {
-      props: {
-        ...BASIC_PROPS,
-        isMulti: true,
+    'single select > should call onMenuOpen prop when select is opened and onMenuClose prop when select is closed':
+      {},
+    'multi select > should call onMenuOpen prop when select is opened and onMenuClose prop when select is closed':
+      {
+        props: {
+          ...BASIC_PROPS,
+          isMulti: true,
+        },
       },
-    },
   }
 );
 
@@ -1358,13 +1410,14 @@ cases<ClickingEnterOpts>(
     expect(event.defaultPrevented).toBe(expectedValue);
   },
   {
-    'while menuIsOpen && focusedOption && !isComposing  > should invoke event.preventDefault': {
-      props: {
-        ...BASIC_PROPS,
-        menuIsOpen: true,
+    'while menuIsOpen && focusedOption && !isComposing  > should invoke event.preventDefault':
+      {
+        props: {
+          ...BASIC_PROPS,
+          menuIsOpen: true,
+        },
+        expectedValue: true,
       },
-      expectedValue: true,
-    },
     'while !menuIsOpen > should not invoke event.preventDefault': {
       props: {
         ...BASIC_PROPS,
@@ -1408,16 +1461,18 @@ cases(
     expect(onMenuCloseSpy).not.toHaveBeenCalled();
   },
   {
-    'single select > secondary click is ignored > should not call onMenuOpen and onMenuClose prop': {
-      skip: true,
-    },
-    'multi select > secondary click is ignored > should not call onMenuOpen and onMenuClose prop': {
-      props: {
-        ...BASIC_PROPS,
-        isMulti: true,
+    'single select > secondary click is ignored > should not call onMenuOpen and onMenuClose prop':
+      {
+        skip: true,
+      },
+    'multi select > secondary click is ignored > should not call onMenuOpen and onMenuClose prop':
+      {
+        props: {
+          ...BASIC_PROPS,
+          isMulti: true,
+        },
+        skip: true,
       },
-      skip: true,
-    },
   }
 );
 
@@ -1462,22 +1517,24 @@ cases(
       },
       expectedValue: 'three',
     },
-    'single select > options with number values > should set value of input as value prop': {
-      props: {
-        ...BASIC_PROPS,
-        options: OPTIONS_NUMBER_VALUE,
-        value: OPTIONS_NUMBER_VALUE[3],
-      },
-      expectedValue: '3',
-    },
-    'single select > options with boolean values > should set value of input as value prop': {
-      props: {
-        ...BASIC_PROPS,
-        options: OPTIONS_BOOLEAN_VALUE,
-        value: OPTIONS_BOOLEAN_VALUE[1],
+    'single select > options with number values > should set value of input as value prop':
+      {
+        props: {
+          ...BASIC_PROPS,
+          options: OPTIONS_NUMBER_VALUE,
+          value: OPTIONS_NUMBER_VALUE[3],
+        },
+        expectedValue: '3',
+      },
+    'single select > options with boolean values > should set value of input as value prop':
+      {
+        props: {
+          ...BASIC_PROPS,
+          options: OPTIONS_BOOLEAN_VALUE,
+          value: OPTIONS_BOOLEAN_VALUE[1],
+        },
+        expectedValue: 'false',
       },
-      expectedValue: 'false',
-    },
     'multi select > should set value of input as value prop': {
       props: {
         ...BASIC_PROPS,
@@ -1486,53 +1543,58 @@ cases(
       },
       expectedValue: 'three',
     },
-    'multi select > with delimiter prop > should set value of input as value prop': {
-      props: {
-        ...BASIC_PROPS,
-        delimiter: ', ',
-        isMulti: true,
-        value: [OPTIONS[3], OPTIONS[5]],
-      },
-      expectedValue: 'three, five',
-    },
-    'multi select > options with number values > should set value of input as value prop': {
-      props: {
-        ...BASIC_PROPS,
-        isMulti: true,
-        options: OPTIONS_NUMBER_VALUE,
-        value: OPTIONS_NUMBER_VALUE[3],
-      },
-      expectedValue: '3',
-    },
-    'multi select > with delimiter prop > options with number values > should set value of input as value prop': {
-      props: {
-        ...BASIC_PROPS,
-        delimiter: ', ',
-        isMulti: true,
-        options: OPTIONS_NUMBER_VALUE,
-        value: [OPTIONS_NUMBER_VALUE[3], OPTIONS_NUMBER_VALUE[1]],
-      },
-      expectedValue: '3, 1',
-    },
-    'multi select > options with boolean values > should set value of input as value prop': {
-      props: {
-        ...BASIC_PROPS,
-        isMulti: true,
-        options: OPTIONS_BOOLEAN_VALUE,
-        value: OPTIONS_BOOLEAN_VALUE[1],
-      },
-      expectedValue: 'false',
-    },
-    'multi select > with delimiter prop > options with boolean values > should set value of input as value prop': {
-      props: {
-        ...BASIC_PROPS,
-        delimiter: ', ',
-        isMulti: true,
-        options: OPTIONS_BOOLEAN_VALUE,
-        value: [OPTIONS_BOOLEAN_VALUE[1], OPTIONS_BOOLEAN_VALUE[0]],
+    'multi select > with delimiter prop > should set value of input as value prop':
+      {
+        props: {
+          ...BASIC_PROPS,
+          delimiter: ', ',
+          isMulti: true,
+          value: [OPTIONS[3], OPTIONS[5]],
+        },
+        expectedValue: 'three, five',
+      },
+    'multi select > options with number values > should set value of input as value prop':
+      {
+        props: {
+          ...BASIC_PROPS,
+          isMulti: true,
+          options: OPTIONS_NUMBER_VALUE,
+          value: OPTIONS_NUMBER_VALUE[3],
+        },
+        expectedValue: '3',
+      },
+    'multi select > with delimiter prop > options with number values > should set value of input as value prop':
+      {
+        props: {
+          ...BASIC_PROPS,
+          delimiter: ', ',
+          isMulti: true,
+          options: OPTIONS_NUMBER_VALUE,
+          value: [OPTIONS_NUMBER_VALUE[3], OPTIONS_NUMBER_VALUE[1]],
+        },
+        expectedValue: '3, 1',
+      },
+    'multi select > options with boolean values > should set value of input as value prop':
+      {
+        props: {
+          ...BASIC_PROPS,
+          isMulti: true,
+          options: OPTIONS_BOOLEAN_VALUE,
+          value: OPTIONS_BOOLEAN_VALUE[1],
+        },
+        expectedValue: 'false',
+      },
+    'multi select > with delimiter prop > options with boolean values > should set value of input as value prop':
+      {
+        props: {
+          ...BASIC_PROPS,
+          delimiter: ', ',
+          isMulti: true,
+          options: OPTIONS_BOOLEAN_VALUE,
+          value: [OPTIONS_BOOLEAN_VALUE[1], OPTIONS_BOOLEAN_VALUE[0]],
+        },
+        expectedValue: 'false, true',
       },
-      expectedValue: 'false, true',
-    },
   }
 );
 
@@ -1562,27 +1624,29 @@ cases(
     });
   },
   {
-    'single select > should add isDisabled as true prop only to options that are disabled': {
-      props: {
-        ...BASIC_PROPS,
-        menuIsOpen: true,
-        isOptionDisabled: (option: Option) =>
-          ['zero', 'two', 'five', 'ten'].indexOf(option.value) > -1,
-      },
-      expectedEnabledOption: ['1', '3', '11'],
-      expectedDisabledOption: ['0', '2', '5'],
-    },
-    'multi select > should add isDisabled as true prop only to options that are disabled': {
-      props: {
-        ...BASIC_PROPS,
-        isMulti: true,
-        menuIsOpen: true,
-        isOptionDisabled: (option: Option) =>
-          ['zero', 'two', 'five', 'ten'].indexOf(option.value) > -1,
+    'single select > should add isDisabled as true prop only to options that are disabled':
+      {
+        props: {
+          ...BASIC_PROPS,
+          menuIsOpen: true,
+          isOptionDisabled: (option: Option) =>
+            ['zero', 'two', 'five', 'ten'].indexOf(option.value) > -1,
+        },
+        expectedEnabledOption: ['1', '3', '11'],
+        expectedDisabledOption: ['0', '2', '5'],
+      },
+    'multi select > should add isDisabled as true prop only to options that are disabled':
+      {
+        props: {
+          ...BASIC_PROPS,
+          isMulti: true,
+          menuIsOpen: true,
+          isOptionDisabled: (option: Option) =>
+            ['zero', 'two', 'five', 'ten'].indexOf(option.value) > -1,
+        },
+        expectedEnabledOption: ['1', '3', '11'],
+        expectedDisabledOption: ['0', '2', '5'],
       },
-      expectedEnabledOption: ['1', '3', '11'],
-      expectedDisabledOption: ['0', '2', '5'],
-    },
   }
 );
 
@@ -1906,16 +1970,18 @@ cases(
     ).toBe('1');
   },
   {
-    'single select > should update aria-activedescendant as per focused option': {
-      skip: true,
-    },
-    'multi select > should update aria-activedescendant as per focused option': {
-      skip: true,
-      props: {
-        ...BASIC_PROPS,
-        value: { label: '2', value: 'two' },
+    'single select > should update aria-activedescendant as per focused option':
+      {
+        skip: true,
+      },
+    'multi select > should update aria-activedescendant as per focused option':
+      {
+        skip: true,
+        props: {
+          ...BASIC_PROPS,
+          value: { label: '2', value: 'two' },
+        },
       },
-    },
   }
 );
 
@@ -2193,19 +2259,16 @@ test('accessibility > screenReaderStatus function prop > to pass custom text to
 
 test('accessibility > A11yTexts can be provided through ariaLiveMessages prop', () => {
   jest.useFakeTimers();
-  const ariaLiveMessages: AriaLiveMessages<
-    Option,
-    boolean,
-    GroupBase<Option>
-  > = {
-    onChange: (props) => {
-      const { action, isDisabled, label } = props;
-      if (action === 'select-option' && !isDisabled) {
-        return `CUSTOM: option ${label} is selected.`;
-      }
-      return '';
-    },
-  };
+  const ariaLiveMessages: AriaLiveMessages<Option, boolean, GroupBase<Option>> =
+    {
+      onChange: (props) => {
+        const { action, isDisabled, label } = props;
+        if (action === 'select-option' && !isDisabled) {
+          return `CUSTOM: option ${label} is selected.`;
+        }
+        return '';
+      },
+    };
 
   let { container } = render(
     <Select
@@ -2286,7 +2349,7 @@ test('accessibility > announces cleared values and does not announce them when r
     jest.runAllTimers();
   });
   expect(container.querySelector(liveRegionSelectionId)!.textContent).toMatch(
-    'option 0, cleared.'
+    'All selected options have been cleared.'
   );
 
   /**
@@ -2298,10 +2361,6 @@ test('accessibility > announces cleared values and does not announce them when r
     // wait for live region setTimeout
     jest.runAllTimers();
   });
-  expect(container.querySelector('[class$=A11yText]')!).toHaveAttribute(
-    'style',
-    'display: none;'
-  );
   // the live region should not be mounted anymore
   expect(container.querySelector(liveRegionSelectionId)!).toBeNull();
 
@@ -2367,19 +2426,21 @@ cases(
     expect(onFocusSpy).toHaveBeenCalledTimes(1);
   },
   {
-    'single select > should call auto focus only once when select is autoFocus': {
-      props: {
-        ...BASIC_PROPS,
-        autoFocus: true,
+    'single select > should call auto focus only once when select is autoFocus':
+      {
+        props: {
+          ...BASIC_PROPS,
+          autoFocus: true,
+        },
       },
-    },
-    'multi select > should call auto focus only once when select is autoFocus': {
-      props: {
-        ...BASIC_PROPS,
-        autoFocus: true,
-        isMulti: true,
+    'multi select > should call auto focus only once when select is autoFocus':
+      {
+        props: {
+          ...BASIC_PROPS,
+          autoFocus: true,
+          isMulti: true,
+        },
       },
-    },
   }
 );
 
@@ -2513,18 +2574,20 @@ cases(
     ).toBeInTheDocument();
   },
   {
-    'single select > should display placeholder once the value is removed from select': {
-      props: {
-        ...BASIC_PROPS,
-        value: OPTIONS[0],
+    'single select > should display placeholder once the value is removed from select':
+      {
+        props: {
+          ...BASIC_PROPS,
+          value: OPTIONS[0],
+        },
       },
-    },
-    'multi select > should display placeholder once the value is removed from select': {
-      props: {
-        ...BASIC_PROPS,
-        value: OPTIONS[0],
+    'multi select > should display placeholder once the value is removed from select':
+      {
+        props: {
+          ...BASIC_PROPS,
+          value: OPTIONS[0],
+        },
       },
-    },
   }
 );
 
diff --git a/packages/react-select/src/__tests__/StateManaged.test.tsx b/packages/react-select/src/__tests__/StateManaged.test.tsx
index a10a566d09..6221cd389f 100644
--- a/packages/react-select/src/__tests__/StateManaged.test.tsx
+++ b/packages/react-select/src/__tests__/StateManaged.test.tsx
@@ -142,14 +142,16 @@ cases<MenuToOpenByDefaultOpts>(
     expect(container.querySelector(menuClass)).toBeTruthy();
   },
   {
-    'single select > should keep Menu open by default if true is passed for menuIsOpen prop': {},
-    'multi select > should keep Menu open by default if true is passed for menuIsOpen prop': {
-      props: {
-        ...BASIC_PROPS,
-        isMulti: true,
-        menuIsOpen: true,
+    'single select > should keep Menu open by default if true is passed for menuIsOpen prop':
+      {},
+    'multi select > should keep Menu open by default if true is passed for menuIsOpen prop':
+      {
+        props: {
+          ...BASIC_PROPS,
+          isMulti: true,
+          menuIsOpen: true,
+        },
       },
-    },
   }
 );
 
@@ -237,15 +239,16 @@ cases(
     ).toBe(expectSelectedOption);
   },
   {
-    'single select > clicking on an option > should select the clicked option': {
-      props: {
-        ...BASIC_PROPS,
-        menuIsOpen: true,
+    'single select > clicking on an option > should select the clicked option':
+      {
+        props: {
+          ...BASIC_PROPS,
+          menuIsOpen: true,
+        },
+        event: ['click' as const, { button: 0 }] as const,
+        selectOption: OPTIONS[2],
+        expectSelectedOption: 'two',
       },
-      event: ['click' as const, { button: 0 }] as const,
-      selectOption: OPTIONS[2],
-      expectSelectedOption: 'two',
-    },
     'multi select > clicking on an option > should select the clicked option': {
       props: {
         ...BASIC_PROPS,
@@ -298,63 +301,72 @@ cases<KeyboardInteractionOpts>(
       eventsToSimulate: [],
       expectedSelectedOption: OPTIONS[0].value,
     },
-    'single select > (open select -> 3 x ArrowDown -> Enter) > should select the forth option in the select': {
-      eventsToSimulate: [
-        ['keyDown', { keyCode: 40, key: 'ArrowDown' }],
-        ['keyDown', { keyCode: 40, key: 'ArrowDown' }],
-        ['keyDown', { keyCode: 40, key: 'ArrowDown' }],
-      ],
-      expectedSelectedOption: OPTIONS[3].value,
-    },
-    'single select > (open select -> 2 x ArrowDown -> 2 x ArrowUp -> Enter) > should select the first option in the select': {
-      eventsToSimulate: [
-        ['keyDown', { keyCode: 40, key: 'ArrowDown' }],
-        ['keyDown', { keyCode: 40, key: 'ArrowDown' }],
-        ['keyDown', { keyCode: 38, key: 'ArrowUp' }],
-        ['keyDown', { keyCode: 38, key: 'ArrowUp' }],
-      ],
-      expectedSelectedOption: OPTIONS[0].value,
-    },
-    'single select > (open select -> 1 x ArrowUp -> Enter) > should select the last option in the select': {
-      eventsToSimulate: [['keyDown', { keyCode: 38, key: 'ArrowUp' }]],
-      expectedSelectedOption: OPTIONS[OPTIONS.length - 1].value,
-    },
-    'single select > (open select -> 1 x PageDown -> Enter) > should select the first option on next page - default pageSize 5': {
-      eventsToSimulate: [['keyDown', { keyCode: 34, key: 'PageDown' }]],
-      expectedSelectedOption: OPTIONS[5].value,
-    },
-    'single select > (open select -> 1 x PageDown -> 1 x ArrowDown -> 1 x PageUp -> Enter) > should select the second option - default pageSize 5': {
-      eventsToSimulate: [
-        ['keyDown', { keyCode: 34, key: 'PageDown' }],
-        ['keyDown', { keyCode: 40, key: 'ArrowDown' }],
-        ['keyDown', { keyCode: 33, key: 'PageUp' }],
-      ],
-      expectedSelectedOption: OPTIONS[1].value,
-    },
-    'single select > (open select -> End -> Enter) > should select the last option': {
-      eventsToSimulate: [['keyDown', { keyCode: 35, key: 'End' }]],
-      expectedSelectedOption: OPTIONS[OPTIONS.length - 1].value,
-    },
-    'single select > (open select -> 3 x PageDown -> Home -> Enter) > should select the last option': {
-      eventsToSimulate: [
-        ['keyDown', { keyCode: 34, key: 'PageDown' }],
-        ['keyDown', { keyCode: 34, key: 'PageDown' }],
-        ['keyDown', { keyCode: 34, key: 'PageDown' }],
-        ['keyDown', { keyCode: 36, key: 'Home' }],
-      ],
-      expectedSelectedOption: OPTIONS[0].value,
-    },
-    'single select > cycle options > ( open select -> End -> ArrowDown -> Enter) > should select the first option': {
-      eventsToSimulate: [
-        ['keyDown', { keyCode: 35, key: 'End' }],
-        ['keyDown', { keyCode: 40, key: 'ArrowDown' }],
-      ],
-      expectedSelectedOption: OPTIONS[0].value,
-    },
-    'single select > cycle options > (open select -> ArrowUp -> Enter) > should select the last option': {
-      eventsToSimulate: [['keyDown', { keyCode: 38, key: 'ArrowUp' }]],
-      expectedSelectedOption: OPTIONS[OPTIONS.length - 1].value,
-    },
+    'single select > (open select -> 3 x ArrowDown -> Enter) > should select the forth option in the select':
+      {
+        eventsToSimulate: [
+          ['keyDown', { keyCode: 40, key: 'ArrowDown' }],
+          ['keyDown', { keyCode: 40, key: 'ArrowDown' }],
+          ['keyDown', { keyCode: 40, key: 'ArrowDown' }],
+        ],
+        expectedSelectedOption: OPTIONS[3].value,
+      },
+    'single select > (open select -> 2 x ArrowDown -> 2 x ArrowUp -> Enter) > should select the first option in the select':
+      {
+        eventsToSimulate: [
+          ['keyDown', { keyCode: 40, key: 'ArrowDown' }],
+          ['keyDown', { keyCode: 40, key: 'ArrowDown' }],
+          ['keyDown', { keyCode: 38, key: 'ArrowUp' }],
+          ['keyDown', { keyCode: 38, key: 'ArrowUp' }],
+        ],
+        expectedSelectedOption: OPTIONS[0].value,
+      },
+    'single select > (open select -> 1 x ArrowUp -> Enter) > should select the last option in the select':
+      {
+        eventsToSimulate: [['keyDown', { keyCode: 38, key: 'ArrowUp' }]],
+        expectedSelectedOption: OPTIONS[OPTIONS.length - 1].value,
+      },
+    'single select > (open select -> 1 x PageDown -> Enter) > should select the first option on next page - default pageSize 5':
+      {
+        eventsToSimulate: [['keyDown', { keyCode: 34, key: 'PageDown' }]],
+        expectedSelectedOption: OPTIONS[5].value,
+      },
+    'single select > (open select -> 1 x PageDown -> 1 x ArrowDown -> 1 x PageUp -> Enter) > should select the second option - default pageSize 5':
+      {
+        eventsToSimulate: [
+          ['keyDown', { keyCode: 34, key: 'PageDown' }],
+          ['keyDown', { keyCode: 40, key: 'ArrowDown' }],
+          ['keyDown', { keyCode: 33, key: 'PageUp' }],
+        ],
+        expectedSelectedOption: OPTIONS[1].value,
+      },
+    'single select > (open select -> End -> Enter) > should select the last option':
+      {
+        eventsToSimulate: [['keyDown', { keyCode: 35, key: 'End' }]],
+        expectedSelectedOption: OPTIONS[OPTIONS.length - 1].value,
+      },
+    'single select > (open select -> 3 x PageDown -> Home -> Enter) > should select the last option':
+      {
+        eventsToSimulate: [
+          ['keyDown', { keyCode: 34, key: 'PageDown' }],
+          ['keyDown', { keyCode: 34, key: 'PageDown' }],
+          ['keyDown', { keyCode: 34, key: 'PageDown' }],
+          ['keyDown', { keyCode: 36, key: 'Home' }],
+        ],
+        expectedSelectedOption: OPTIONS[0].value,
+      },
+    'single select > cycle options > ( open select -> End -> ArrowDown -> Enter) > should select the first option':
+      {
+        eventsToSimulate: [
+          ['keyDown', { keyCode: 35, key: 'End' }],
+          ['keyDown', { keyCode: 40, key: 'ArrowDown' }],
+        ],
+        expectedSelectedOption: OPTIONS[0].value,
+      },
+    'single select > cycle options > (open select -> ArrowUp -> Enter) > should select the last option':
+      {
+        eventsToSimulate: [['keyDown', { keyCode: 38, key: 'ArrowUp' }]],
+        expectedSelectedOption: OPTIONS[OPTIONS.length - 1].value,
+      },
     'multi select > open select and hit enter > should select first option': {
       props: {
         ...BASIC_PROPS,
@@ -363,98 +375,107 @@ cases<KeyboardInteractionOpts>(
       eventsToSimulate: [],
       expectedSelectedOption: OPTIONS[0].value,
     },
-    'multi select > (open select -> 3 x ArrowDown -> Enter) > should select the forth option in the select': {
-      props: {
-        ...BASIC_PROPS,
-        isMulti: true,
+    'multi select > (open select -> 3 x ArrowDown -> Enter) > should select the forth option in the select':
+      {
+        props: {
+          ...BASIC_PROPS,
+          isMulti: true,
+        },
+        eventsToSimulate: [
+          ['keyDown', { keyCode: 40, key: 'ArrowDown' }],
+          ['keyDown', { keyCode: 40, key: 'ArrowDown' }],
+          ['keyDown', { keyCode: 40, key: 'ArrowDown' }],
+        ],
+        expectedSelectedOption: OPTIONS[3].value,
       },
-      eventsToSimulate: [
-        ['keyDown', { keyCode: 40, key: 'ArrowDown' }],
-        ['keyDown', { keyCode: 40, key: 'ArrowDown' }],
-        ['keyDown', { keyCode: 40, key: 'ArrowDown' }],
-      ],
-      expectedSelectedOption: OPTIONS[3].value,
-    },
-    'multi select > (open select -> 2 x ArrowDown -> 2 x ArrowUp -> Enter) > should select the first option in the select': {
-      props: {
-        ...BASIC_PROPS,
-        isMulti: true,
+    'multi select > (open select -> 2 x ArrowDown -> 2 x ArrowUp -> Enter) > should select the first option in the select':
+      {
+        props: {
+          ...BASIC_PROPS,
+          isMulti: true,
+        },
+        eventsToSimulate: [
+          ['keyDown', { keyCode: 40, key: 'ArrowDown' }],
+          ['keyDown', { keyCode: 40, key: 'ArrowDown' }],
+          ['keyDown', { keyCode: 38, key: 'ArrowUp' }],
+          ['keyDown', { keyCode: 38, key: 'ArrowUp' }],
+        ],
+        expectedSelectedOption: OPTIONS[0].value,
       },
-      eventsToSimulate: [
-        ['keyDown', { keyCode: 40, key: 'ArrowDown' }],
-        ['keyDown', { keyCode: 40, key: 'ArrowDown' }],
-        ['keyDown', { keyCode: 38, key: 'ArrowUp' }],
-        ['keyDown', { keyCode: 38, key: 'ArrowUp' }],
-      ],
-      expectedSelectedOption: OPTIONS[0].value,
-    },
-    'multi select > (open select -> 1 x ArrowUp -> Enter) > should select the last option in the select': {
-      props: {
-        ...BASIC_PROPS,
-        isMulti: true,
+    'multi select > (open select -> 1 x ArrowUp -> Enter) > should select the last option in the select':
+      {
+        props: {
+          ...BASIC_PROPS,
+          isMulti: true,
+        },
+        eventsToSimulate: [['keyDown', { keyCode: 38, key: 'ArrowUp' }]],
+        expectedSelectedOption: OPTIONS[OPTIONS.length - 1].value,
       },
-      eventsToSimulate: [['keyDown', { keyCode: 38, key: 'ArrowUp' }]],
-      expectedSelectedOption: OPTIONS[OPTIONS.length - 1].value,
-    },
-    'multi select > (open select -> 1 x PageDown -> Enter) > should select the first option on next page - default pageSize 5': {
-      props: {
-        ...BASIC_PROPS,
-        isMulti: true,
+    'multi select > (open select -> 1 x PageDown -> Enter) > should select the first option on next page - default pageSize 5':
+      {
+        props: {
+          ...BASIC_PROPS,
+          isMulti: true,
+        },
+        eventsToSimulate: [['keyDown', { keyCode: 34, key: 'PageDown' }]],
+        expectedSelectedOption: OPTIONS[5].value,
       },
-      eventsToSimulate: [['keyDown', { keyCode: 34, key: 'PageDown' }]],
-      expectedSelectedOption: OPTIONS[5].value,
-    },
-    'multi select > (open select -> 1 x PageDown -> 1 x ArrowDown -> 1 x PageUp -> Enter) > should select the second option - default pageSize 5': {
-      props: {
-        ...BASIC_PROPS,
-        isMulti: true,
+    'multi select > (open select -> 1 x PageDown -> 1 x ArrowDown -> 1 x PageUp -> Enter) > should select the second option - default pageSize 5':
+      {
+        props: {
+          ...BASIC_PROPS,
+          isMulti: true,
+        },
+        eventsToSimulate: [
+          ['keyDown', { keyCode: 34, key: 'PageDown' }],
+          ['keyDown', { keyCode: 40, key: 'ArrowDown' }],
+          ['keyDown', { keyCode: 33, key: 'PageUp' }],
+        ],
+        expectedSelectedOption: OPTIONS[1].value,
       },
-      eventsToSimulate: [
-        ['keyDown', { keyCode: 34, key: 'PageDown' }],
-        ['keyDown', { keyCode: 40, key: 'ArrowDown' }],
-        ['keyDown', { keyCode: 33, key: 'PageUp' }],
-      ],
-      expectedSelectedOption: OPTIONS[1].value,
-    },
-    'multi select > (open select -> End -> Enter) > should select the last option': {
-      props: {
-        ...BASIC_PROPS,
-        isMulti: true,
+    'multi select > (open select -> End -> Enter) > should select the last option':
+      {
+        props: {
+          ...BASIC_PROPS,
+          isMulti: true,
+        },
+        eventsToSimulate: [['keyDown', { keyCode: 35, key: 'End' }]],
+        expectedSelectedOption: OPTIONS[OPTIONS.length - 1].value,
       },
-      eventsToSimulate: [['keyDown', { keyCode: 35, key: 'End' }]],
-      expectedSelectedOption: OPTIONS[OPTIONS.length - 1].value,
-    },
-    'multi select > (open select -> 3 x PageDown -> Home -> Enter) > should select the last option': {
-      props: {
-        ...BASIC_PROPS,
-        isMulti: true,
+    'multi select > (open select -> 3 x PageDown -> Home -> Enter) > should select the last option':
+      {
+        props: {
+          ...BASIC_PROPS,
+          isMulti: true,
+        },
+        eventsToSimulate: [
+          ['keyDown', { keyCode: 34, key: 'PageDown' }],
+          ['keyDown', { keyCode: 34, key: 'PageDown' }],
+          ['keyDown', { keyCode: 34, key: 'PageDown' }],
+          ['keyDown', { keyCode: 36, key: 'Home' }],
+        ],
+        expectedSelectedOption: OPTIONS[0].value,
       },
-      eventsToSimulate: [
-        ['keyDown', { keyCode: 34, key: 'PageDown' }],
-        ['keyDown', { keyCode: 34, key: 'PageDown' }],
-        ['keyDown', { keyCode: 34, key: 'PageDown' }],
-        ['keyDown', { keyCode: 36, key: 'Home' }],
-      ],
-      expectedSelectedOption: OPTIONS[0].value,
-    },
-    'multi select > cycle options > ( open select -> End -> ArrowDown -> Enter) > should select the first option': {
-      props: {
-        ...BASIC_PROPS,
-        isMulti: true,
+    'multi select > cycle options > ( open select -> End -> ArrowDown -> Enter) > should select the first option':
+      {
+        props: {
+          ...BASIC_PROPS,
+          isMulti: true,
+        },
+        eventsToSimulate: [
+          ['keyDown', { keyCode: 35, key: 'End' }],
+          ['keyDown', { keyCode: 40, key: 'ArrowDown' }],
+        ],
+        expectedSelectedOption: OPTIONS[0].value,
       },
-      eventsToSimulate: [
-        ['keyDown', { keyCode: 35, key: 'End' }],
-        ['keyDown', { keyCode: 40, key: 'ArrowDown' }],
-      ],
-      expectedSelectedOption: OPTIONS[0].value,
-    },
-    'multi select > cycle options > (open select -> ArrowUp -> Enter) > should select the last option': {
-      props: {
-        ...BASIC_PROPS,
-        isMulti: true,
+    'multi select > cycle options > (open select -> ArrowUp -> Enter) > should select the last option':
+      {
+        props: {
+          ...BASIC_PROPS,
+          isMulti: true,
+        },
+        eventsToSimulate: [['keyDown', { keyCode: 38, key: 'ArrowUp' }]],
+        expectedSelectedOption: OPTIONS[OPTIONS.length - 1].value,
       },
-      eventsToSimulate: [['keyDown', { keyCode: 38, key: 'ArrowUp' }]],
-      expectedSelectedOption: OPTIONS[OPTIONS.length - 1].value,
-    },
   }
 );
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 4eae286f06..ec4028c128 100644
--- a/packages/react-select/src/__tests__/__snapshots__/Async.test.tsx.snap
+++ b/packages/react-select/src/__tests__/__snapshots__/Async.test.tsx.snap
@@ -177,7 +177,6 @@ exports[`defaults - snapshot 1`] = `
       aria-live="polite"
       aria-relevant="additions text"
       class="emotion-1"
-      style="display: none;"
     />
     <div
       class=" emotion-2"
@@ -198,10 +197,10 @@ exports[`defaults - snapshot 1`] = `
           <input
             aria-autocomplete="list"
             aria-controls="react-select-2-listbox"
+            aria-describedby="react-select-2-placeholder"
             aria-expanded="false"
             aria-haspopup="true"
             aria-owns="react-select-2-listbox"
-            aria-describedby="react-select-2-placeholder"
             autocapitalize="none"
             autocomplete="off"
             autocorrect="off"
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 4eae286f06..ec4028c128 100644
--- a/packages/react-select/src/__tests__/__snapshots__/AsyncCreatable.test.tsx.snap
+++ b/packages/react-select/src/__tests__/__snapshots__/AsyncCreatable.test.tsx.snap
@@ -177,7 +177,6 @@ exports[`defaults - snapshot 1`] = `
       aria-live="polite"
       aria-relevant="additions text"
       class="emotion-1"
-      style="display: none;"
     />
     <div
       class=" emotion-2"
@@ -198,10 +197,10 @@ exports[`defaults - snapshot 1`] = `
           <input
             aria-autocomplete="list"
             aria-controls="react-select-2-listbox"
+            aria-describedby="react-select-2-placeholder"
             aria-expanded="false"
             aria-haspopup="true"
             aria-owns="react-select-2-listbox"
-            aria-describedby="react-select-2-placeholder"
             autocapitalize="none"
             autocomplete="off"
             autocorrect="off"
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 4eae286f06..ec4028c128 100644
--- a/packages/react-select/src/__tests__/__snapshots__/Creatable.test.tsx.snap
+++ b/packages/react-select/src/__tests__/__snapshots__/Creatable.test.tsx.snap
@@ -177,7 +177,6 @@ exports[`defaults - snapshot 1`] = `
       aria-live="polite"
       aria-relevant="additions text"
       class="emotion-1"
-      style="display: none;"
     />
     <div
       class=" emotion-2"
@@ -198,10 +197,10 @@ exports[`defaults - snapshot 1`] = `
           <input
             aria-autocomplete="list"
             aria-controls="react-select-2-listbox"
+            aria-describedby="react-select-2-placeholder"
             aria-expanded="false"
             aria-haspopup="true"
             aria-owns="react-select-2-listbox"
-            aria-describedby="react-select-2-placeholder"
             autocapitalize="none"
             autocomplete="off"
             autocorrect="off"
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 ef558c66cc..57e1211344 100644
--- a/packages/react-select/src/__tests__/__snapshots__/Select.test.tsx.snap
+++ b/packages/react-select/src/__tests__/__snapshots__/Select.test.tsx.snap
@@ -177,7 +177,6 @@ exports[`snapshot - defaults 1`] = `
       aria-live="polite"
       aria-relevant="additions text"
       class="emotion-1"
-      style="display: none;"
     />
     <div
       class=" emotion-2"
@@ -198,10 +197,10 @@ exports[`snapshot - defaults 1`] = `
           <input
             aria-autocomplete="list"
             aria-controls="react-select-2-listbox"
+            aria-describedby="react-select-2-placeholder"
             aria-expanded="false"
             aria-haspopup="true"
             aria-owns="react-select-2-listbox"
-            aria-describedby="react-select-2-placeholder"
             autocapitalize="none"
             autocomplete="off"
             autocorrect="off"
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 523cec45e8..664642c35c 100644
--- a/packages/react-select/src/__tests__/__snapshots__/StateManaged.test.tsx.snap
+++ b/packages/react-select/src/__tests__/__snapshots__/StateManaged.test.tsx.snap
@@ -177,7 +177,6 @@ exports[`defaults > snapshot 1`] = `
       aria-live="polite"
       aria-relevant="additions text"
       class="emotion-1"
-      style="display: none;"
     />
     <div
       class=" emotion-2"
@@ -198,10 +197,10 @@ exports[`defaults > snapshot 1`] = `
           <input
             aria-autocomplete="list"
             aria-controls="react-select-2-listbox"
+            aria-describedby="react-select-2-placeholder"
             aria-expanded="false"
             aria-haspopup="true"
             aria-owns="react-select-2-listbox"
-            aria-describedby="react-select-2-placeholder"
             autocapitalize="none"
             autocomplete="off"
             autocorrect="off"
diff --git a/packages/react-select/src/accessibility/index.ts b/packages/react-select/src/accessibility/index.ts
index 1e4bb7ff35..305bc591ad 100644
--- a/packages/react-select/src/accessibility/index.ts
+++ b/packages/react-select/src/accessibility/index.ts
@@ -1,6 +1,7 @@
 import {
   ActionMeta,
   GroupBase,
+  InitialInputFocusedActionMeta,
   OnChangeValue,
   OptionBase,
   Options,
@@ -13,14 +14,12 @@ export type GuidanceContext = 'menu' | 'input' | 'value';
 
 export type AriaLive = 'polite' | 'off' | 'assertive';
 
-export type AriaSelection<
-  Option extends OptionBase,
-  IsMulti extends boolean
-> = ActionMeta<Option> & {
-  value: OnChangeValue<Option, IsMulti>;
-  option?: Option;
-  options?: Options<Option>;
-};
+export type AriaSelection<Option extends OptionBase, IsMulti extends boolean> =
+  | InitialInputFocusedActionMeta<Option, IsMulti>
+  | (ActionMeta<Option> & {
+      value: OnChangeValue<Option, IsMulti>;
+      option?: Option;
+    });
 
 export interface AriaGuidanceProps {
   /** String value of selectProp aria-label */
@@ -104,13 +103,8 @@ export interface AriaLiveMessages<
 
 export const defaultAriaLiveMessages = {
   guidance: (props: AriaGuidanceProps) => {
-    const {
-      isSearchable,
-      isMulti,
-      isDisabled,
-      tabSelectsValue,
-      context,
-    } = props;
+    const { isSearchable, isMulti, isDisabled, tabSelectsValue, context } =
+      props;
     switch (context) {
       case 'menu':
         return `Use Up and Down to choose options${
@@ -138,16 +132,14 @@ export const defaultAriaLiveMessages = {
   onChange: <Option extends OptionBase, IsMulti extends boolean>(
     props: AriaOnChangeProps<Option, IsMulti>
   ) => {
-    const { action, label = '', labels, isDisabled } = props;
+    const { action, label = '', labels, isDisabled, value } = props;
     switch (action) {
       case 'deselect-option':
       case 'pop-value':
       case 'remove-value':
         return `option ${label}, deselected.`;
       case 'clear':
-        return `option${labels.length > 1 ? 's' : ''} ${labels.join(
-          ','
-        )}, cleared.`;
+        return 'All selected options have been cleared.';
       case 'initial-input-focus':
         return `option${labels.length > 1 ? 's' : ''} ${labels.join(
           ','
@@ -157,7 +149,7 @@ export const defaultAriaLiveMessages = {
           ? `option ${label} is disabled. Select another option.`
           : `option ${label}, selected.`;
       case 'create-option':
-        return `option ${label}, created.`;
+        return `option ${value}, created.`;
       default:
         return '';
     }
diff --git a/packages/react-select/src/components/LiveRegion.tsx b/packages/react-select/src/components/LiveRegion.tsx
index f72a43da6a..e8d7f6cc09 100644
--- a/packages/react-select/src/components/LiveRegion.tsx
+++ b/packages/react-select/src/components/LiveRegion.tsx
@@ -96,6 +96,8 @@ const LiveRegion = <
       const multiSelected = selectedOptions || removedValues || undefined;
       const labels = multiSelected ? multiSelected.map(getOptionLabel) : [];
 
+      // console.log('live message', multiSelected, selectedOptions);
+
       const onChangeProps = {
         // multiSelected items are usually items that have already been selected
         // or set by the user as a default value so we assume they are not disabled
@@ -193,17 +195,15 @@ const LiveRegion = <
   const ariaContext = `${ariaFocused} ${ariaResults} ${ariaGuidance}`;
 
   // This is to fix NVDA not announcing the live region when the Select is focused.
-  // It just delays the rendering of the live region a small amount so NVDA sees the
-  // contents of the live region get mutated.
+  // It also fixes VoiceOver not announcing the live region when re-focusing.
+  // It just delays the rendering of the live region a small amount so the screen reader
+  // buffers the announcement after their in-built guidance messages.
   const [reveal, setReveal] = useState(false);
   const timeoutRef = useRef<number | undefined>();
   useEffect(() => {
     if (!timeoutRef.current && isFocused) {
-      // TS kept wanting this to be a NodeJS.Timeout type
-      timeoutRef.current = (setTimeout(
-        () => setReveal(true),
-        50
-      ) as unknown) as number;
+      // @ts-ignore - TS kept wanting this to be a NodeJS.Timeout type
+      timeoutRef.current = setTimeout(() => setReveal(true));
     }
     return () => {
       clearTimeout(timeoutRef.current);
@@ -217,9 +217,6 @@ const LiveRegion = <
       aria-live={ariaLive}
       aria-atomic="false"
       aria-relevant="additions text"
-      // This is to fix VoiceOver not announcing when focusing after Select
-      // has already been focused once
-      style={{ display: isFocused ? 'block' : 'none' }}
     >
       {reveal && (
         <React.Fragment>
diff --git a/packages/react-select/src/types.ts b/packages/react-select/src/types.ts
index 5588ab82e7..d9b4596347 100644
--- a/packages/react-select/src/types.ts
+++ b/packages/react-select/src/types.ts
@@ -28,10 +28,8 @@ export type PropsValue<Option extends OptionBase> =
   | MultiValue<Option>
   | SingleValue<Option>;
 
-export type OnChangeValue<
-  Option extends OptionBase,
-  IsMulti extends boolean
-> = IsMulti extends true ? MultiValue<Option> : SingleValue<Option>;
+export type OnChangeValue<Option extends OptionBase, IsMulti extends boolean> =
+  IsMulti extends true ? MultiValue<Option> : SingleValue<Option>;
 
 interface Colors {
   primary: string;
@@ -117,6 +115,7 @@ export interface CommonPropsAndClassName<
 
 export interface ActionMetaBase<Option extends OptionBase> {
   option?: Option | undefined;
+  options?: Options<Option>;
   removedValue?: Option;
   removedValues?: Options<Option>;
   name?: string;
@@ -161,10 +160,13 @@ export interface CreateOptionActionMeta<Option extends OptionBase>
   action: 'create-option';
   name?: string;
 }
-export interface InitialInputFocusedActionMeta<Option extends OptionBase>
-  extends ActionMetaBase<Option> {
+export interface InitialInputFocusedActionMeta<
+  Option extends OptionBase,
+  IsMulti extends boolean
+> extends ActionMetaBase<Option> {
   action: 'initial-input-focus';
   name?: string;
+  value: OnChangeValue<Option, IsMulti>;
 }
 
 export type ActionMeta<Option extends OptionBase> =
@@ -173,8 +175,7 @@ export type ActionMeta<Option extends OptionBase> =
   | RemoveValueActionMeta<Option>
   | PopValueActionMeta<Option>
   | ClearActionMeta<Option>
-  | CreateOptionActionMeta<Option>
-  | InitialInputFocusedActionMeta<Option>;
+  | CreateOptionActionMeta<Option>;
 
 export type SetValueAction = 'select-option' | 'deselect-option';
 

From 011e461fc12b466a7103342a4ae0eee4a5fcde5e Mon Sep 17 00:00:00 2001
From: Matt Charlton <mcharlton@atlassian.com>
Date: Tue, 27 Jul 2021 15:13:09 +1000
Subject: [PATCH 20/24] fix types and typos

---
 packages/react-select/src/accessibility/index.ts    | 3 ++-
 packages/react-select/src/components/LiveRegion.tsx | 6 ++----
 packages/react-select/src/types.ts                  | 3 +--
 3 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/packages/react-select/src/accessibility/index.ts b/packages/react-select/src/accessibility/index.ts
index 305bc591ad..ae142bb883 100644
--- a/packages/react-select/src/accessibility/index.ts
+++ b/packages/react-select/src/accessibility/index.ts
@@ -19,6 +19,7 @@ export type AriaSelection<Option extends OptionBase, IsMulti extends boolean> =
   | (ActionMeta<Option> & {
       value: OnChangeValue<Option, IsMulti>;
       option?: Option;
+      options?: Options<Option>;
     });
 
 export interface AriaGuidanceProps {
@@ -42,7 +43,7 @@ export type AriaOnChangeProps<
 > = AriaSelection<Option, IsMulti> & {
   /** String derived label from selected or removed option/value */
   label: string;
-  /** Array of labels derived from multiple selected or cleared options*/
+  /** Array of labels derived from multiple selected or cleared options */
   labels: string[];
   /** Boolean indicating if the selected menu option is disabled */
   isDisabled: boolean | null;
diff --git a/packages/react-select/src/components/LiveRegion.tsx b/packages/react-select/src/components/LiveRegion.tsx
index e8d7f6cc09..867c179d89 100644
--- a/packages/react-select/src/components/LiveRegion.tsx
+++ b/packages/react-select/src/components/LiveRegion.tsx
@@ -88,7 +88,7 @@ const LiveRegion = <
       const asOption = (val: OnChangeValue<Option, IsMulti>): Option | null =>
         !Array.isArray(val) ? (val as Option) : null;
 
-      // If there is just one item from the action then get it's label
+      // If there is just one item from the action then get its label
       const selected = removedValue || option || asOption(value);
       const label = selected ? getOptionLabel(selected) : '';
 
@@ -96,8 +96,6 @@ const LiveRegion = <
       const multiSelected = selectedOptions || removedValues || undefined;
       const labels = multiSelected ? multiSelected.map(getOptionLabel) : [];
 
-      // console.log('live message', multiSelected, selectedOptions);
-
       const onChangeProps = {
         // multiSelected items are usually items that have already been selected
         // or set by the user as a default value so we assume they are not disabled
@@ -197,7 +195,7 @@ const LiveRegion = <
   // This is to fix NVDA not announcing the live region when the Select is focused.
   // It also fixes VoiceOver not announcing the live region when re-focusing.
   // It just delays the rendering of the live region a small amount so the screen reader
-  // buffers the announcement after their in-built guidance messages.
+  // buffers the announcement after its in-built guidance messages.
   const [reveal, setReveal] = useState(false);
   const timeoutRef = useRef<number | undefined>();
   useEffect(() => {
diff --git a/packages/react-select/src/types.ts b/packages/react-select/src/types.ts
index d9b4596347..94febb2627 100644
--- a/packages/react-select/src/types.ts
+++ b/packages/react-select/src/types.ts
@@ -115,7 +115,6 @@ export interface CommonPropsAndClassName<
 
 export interface ActionMetaBase<Option extends OptionBase> {
   option?: Option | undefined;
-  options?: Options<Option>;
   removedValue?: Option;
   removedValues?: Options<Option>;
   name?: string;
@@ -165,8 +164,8 @@ export interface InitialInputFocusedActionMeta<
   IsMulti extends boolean
 > extends ActionMetaBase<Option> {
   action: 'initial-input-focus';
-  name?: string;
   value: OnChangeValue<Option, IsMulti>;
+  options?: Options<Option>;
 }
 
 export type ActionMeta<Option extends OptionBase> =

From b7c6dad91e3a31f405db73d2628436b1eed4df39 Mon Sep 17 00:00:00 2001
From: Matt Charlton <mcharlton@atlassian.com>
Date: Wed, 28 Jul 2021 14:12:13 +1000
Subject: [PATCH 21/24] refactor - use describedby for initial focus

---
 .changeset/selfish-dots-look.md               |  6 +-
 packages/react-select/src/Select.tsx          | 66 +++++++++--------
 .../react-select/src/__tests__/Async.test.tsx |  7 --
 .../src/__tests__/Select.test.tsx             | 73 +------------------
 .../src/__tests__/StateManaged.test.tsx       |  4 -
 .../__snapshots__/Async.test.tsx.snap         | 42 ++++++-----
 .../AsyncCreatable.test.tsx.snap              | 42 ++++++-----
 .../__snapshots__/Creatable.test.tsx.snap     | 42 ++++++-----
 .../__snapshots__/Select.test.tsx.snap        | 42 ++++++-----
 .../__snapshots__/StateManaged.test.tsx.snap  | 42 ++++++-----
 .../react-select/src/accessibility/index.ts   |  4 +-
 .../src/components/LiveRegion.tsx             | 53 ++++++--------
 12 files changed, 179 insertions(+), 244 deletions(-)

diff --git a/.changeset/selfish-dots-look.md b/.changeset/selfish-dots-look.md
index bdfd64678c..cd42e4c82e 100644
--- a/.changeset/selfish-dots-look.md
+++ b/.changeset/selfish-dots-look.md
@@ -2,10 +2,10 @@
 'react-select': patch
 ---
 
-The following improvements have been made to the `aria-live` announcements:
+The following improvements have been made for screen reader users:
 
 - NVDA now announces the context text when initially focused
+- Selected option/s (single and multi) are now announced when initially focused
 - VoiceOver now announces the context text when re-focusing
+- The clear action is now announced
 - Placeholder text is now announced
-- The selected option/s (single and multi) are now announced when being focused
-- The deselected option/s (single and multi) are now announced when cleared
diff --git a/packages/react-select/src/Select.tsx b/packages/react-select/src/Select.tsx
index fcf3dd32ed..79166ab523 100644
--- a/packages/react-select/src/Select.tsx
+++ b/packages/react-select/src/Select.tsx
@@ -677,37 +677,30 @@ export default class Select<
           }
         : {};
 
-    const optionRemoved = [
-      'deselect-option',
-      'pop-value',
-      'remove-value',
-      'clear',
-    ].includes(ariaSelection?.action || '');
-
-    const allOptionsCleared = !selectValue.length && optionRemoved;
-
     let newAriaSelection = ariaSelection;
 
     let hasKeptFocus = isFocused && prevWasFocused;
 
     if (isFocused && !hasKeptFocus) {
-      if (allOptionsCleared) {
-        newAriaSelection = null;
-      } else if (state.selectValue.length) {
-        // If `value` or `defaultValue` props are not empty then announce them
-        // when the Select is focused
-        newAriaSelection = {
-          value: valueTernary(
-            props.isMulti,
-            state.selectValue,
-            state.selectValue[0] || null
-          ),
-          options: selectValue,
-          action: 'initial-input-focus',
-        };
-
-        hasKeptFocus = !prevWasFocused;
-      }
+      // If `value` or `defaultValue` props are not empty then announce them
+      // when the Select is initially focused
+      newAriaSelection = {
+        value: valueTernary(
+          props.isMulti,
+          state.selectValue,
+          state.selectValue[0] || null
+        ),
+        options: selectValue,
+        action: 'initial-input-focus',
+      };
+
+      hasKeptFocus = !prevWasFocused;
+    }
+
+    // If the 'initial-input-focus' action has been set already
+    // then reset the ariaSelection to null
+    if (ariaSelection?.action === 'initial-input-focus') {
+      newAriaSelection = null;
     }
 
     return {
@@ -1073,7 +1066,13 @@ export default class Select<
     return custom ? custom(base, props as any) : base;
   };
   getElementId = (
-    element: 'group' | 'input' | 'listbox' | 'option' | 'placeholder'
+    element:
+      | 'group'
+      | 'input'
+      | 'listbox'
+      | 'option'
+      | 'placeholder'
+      | 'live-region'
   ) => {
     return `${this.instancePrefix}-${element}`;
   };
@@ -1552,7 +1551,7 @@ export default class Select<
       menuIsOpen,
     } = this.props;
     const { Input } = this.getComponents();
-    const { inputIsHidden } = this.state;
+    const { inputIsHidden, ariaSelection } = this.state;
     const { commonProps } = this;
 
     const id = inputId || this.getElementId('input');
@@ -1572,9 +1571,13 @@ export default class Select<
       ...(!isSearchable && {
         'aria-readonly': true,
       }),
-      ...(!this.hasValue() && {
-        'aria-describedby': this.getElementId('placeholder'),
-      }),
+      ...(this.hasValue()
+        ? ariaSelection?.action === 'initial-input-focus' && {
+            'aria-describedby': this.getElementId('live-region'),
+          }
+        : {
+            'aria-describedby': this.getElementId('placeholder'),
+          }),
     };
 
     if (!isSearchable) {
@@ -2005,6 +2008,7 @@ export default class Select<
     return (
       <LiveRegion
         {...commonProps}
+        id={this.getElementId('live-region')}
         ariaSelection={ariaSelection}
         focusedOption={focusedOption}
         focusedValue={focusedValue}
diff --git a/packages/react-select/src/__tests__/Async.test.tsx b/packages/react-select/src/__tests__/Async.test.tsx
index 62009bf6e6..ec35c8b676 100644
--- a/packages/react-select/src/__tests__/Async.test.tsx
+++ b/packages/react-select/src/__tests__/Async.test.tsx
@@ -6,8 +6,6 @@ import userEvent from '@testing-library/user-event';
 import Async from '../Async';
 import { Option, OPTIONS } from './constants';
 
-jest.useFakeTimers();
-
 test('defaults - snapshot', () => {
   const { container } = render(<Async />);
   expect(container).toMatchSnapshot();
@@ -25,11 +23,6 @@ cases(
       <Async classNamePrefix="react-select" menuIsOpen {...props} />
     );
 
-    act(() => {
-      // wait for live region setTimeout
-      jest.runAllTimers();
-    });
-
     await waitFor(() => {
       expect(container.querySelectorAll('.react-select__option').length).toBe(
         expectOptionLength
diff --git a/packages/react-select/src/__tests__/Select.test.tsx b/packages/react-select/src/__tests__/Select.test.tsx
index e927801870..72d8a73851 100644
--- a/packages/react-select/src/__tests__/Select.test.tsx
+++ b/packages/react-select/src/__tests__/Select.test.tsx
@@ -49,8 +49,6 @@ const BASIC_PROPS: BasicProps = {
   value: null,
 };
 
-jest.useFakeTimers();
-
 test('snapshot - defaults', () => {
   const { container } = render(
     <Select
@@ -2074,7 +2072,6 @@ cases(
 );
 
 test('accessibility > to show the number of options available in A11yText when the menu is Open', () => {
-  jest.useFakeTimers();
   let { container, rerender } = render(
     <Select {...BASIC_PROPS} inputValue={''} autoFocus menuIsOpen />
   );
@@ -2086,10 +2083,6 @@ test('accessibility > to show the number of options available in A11yText when t
   const liveRegionId = '#aria-context';
   fireEvent.focus(container.querySelector('input.react-select__input')!);
 
-  act(() => {
-    jest.runAllTimers();
-  });
-
   expect(container.querySelector(liveRegionId)!.textContent).toMatch(
     /17 results available/
   );
@@ -2111,7 +2104,6 @@ test('accessibility > to show the number of options available in A11yText when t
 });
 
 test('accessibility > interacting with disabled options shows correct A11yText', () => {
-  jest.useFakeTimers();
   let { container } = render(
     <Select
       {...BASIC_PROPS}
@@ -2129,10 +2121,6 @@ test('accessibility > interacting with disabled options shows correct A11yText',
   fireEvent.keyDown(menu!, { keyCode: 40, key: 'ArrowDown' });
   fireEvent.keyDown(menu!, { keyCode: 40, key: 'ArrowDown' });
 
-  act(() => {
-    jest.runAllTimers();
-  });
-
   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.'
   );
@@ -2149,7 +2137,6 @@ test('accessibility > interacting with disabled options shows correct A11yText',
 });
 
 test('accessibility > interacting with multi values options shows correct A11yText', () => {
-  jest.useFakeTimers();
   let renderProps = {
     ...BASIC_PROPS,
     options: OPTIONS_DISABLED,
@@ -2169,10 +2156,6 @@ test('accessibility > interacting with multi values options shows correct A11yTe
 
   fireEvent.focus(container.querySelector('input.react-select__input')!);
 
-  act(() => {
-    jest.runAllTimers();
-  });
-
   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'
   );
@@ -2206,7 +2189,6 @@ test('accessibility > interacting with multi values options shows correct A11yTe
 });
 
 test('accessibility > screenReaderStatus function prop > to pass custom text to A11yText', () => {
-  jest.useFakeTimers();
   const screenReaderStatus = ({ count }: { count: number }) =>
     `There are ${count} options available`;
 
@@ -2233,10 +2215,6 @@ test('accessibility > screenReaderStatus function prop > to pass custom text to
 
   fireEvent.focus(container.querySelector('input.react-select__input')!);
 
-  act(() => {
-    jest.runAllTimers();
-  });
-
   expect(container.querySelector(liveRegionId)!.textContent).toMatch(
     'There are 17 options available'
   );
@@ -2258,7 +2236,6 @@ test('accessibility > screenReaderStatus function prop > to pass custom text to
 });
 
 test('accessibility > A11yTexts can be provided through ariaLiveMessages prop', () => {
-  jest.useFakeTimers();
   const ariaLiveMessages: AriaLiveMessages<Option, boolean, GroupBase<Option>> =
     {
       onChange: (props) => {
@@ -2292,18 +2269,12 @@ test('accessibility > A11yTexts can be provided through ariaLiveMessages prop',
     key: 'Enter',
   });
 
-  act(() => {
-    jest.runAllTimers();
-  });
-
   expect(container.querySelector(liveRegionEventId)!.textContent).toMatch(
     'CUSTOM: option 0 is selected.'
   );
 });
 
 test('accessibility > announces already selected values when focused', () => {
-  jest.useFakeTimers();
-
   let { container } = render(
     <Select {...BASIC_PROPS} options={OPTIONS} value={OPTIONS[0]} />
   );
@@ -2315,11 +2286,6 @@ test('accessibility > announces already selected values when focused', () => {
 
   fireEvent.focus(container.querySelector('input.react-select__input')!);
 
-  act(() => {
-    // wait for live region setTimeout
-    jest.runAllTimers();
-  });
-
   expect(container.querySelector(liveRegionContextId)!.textContent).toMatch(
     ' Select is focused ,type to refine list, press Down to open the menu, '
   );
@@ -2328,15 +2294,11 @@ test('accessibility > announces already selected values when focused', () => {
   );
 });
 
-test('accessibility > announces cleared values and does not announce them when refocusing Select', () => {
-  jest.useFakeTimers();
-
-  let { container, rerender } = render(
+test('accessibility > announces cleared values', () => {
+  let { container } = render(
     <Select {...BASIC_PROPS} options={OPTIONS} value={OPTIONS[0]} isClearable />
   );
   const liveRegionSelectionId = '#aria-selection';
-  const liveRegionContextId = '#aria-context';
-
   /**
    * announce deselected value
    */
@@ -2344,40 +2306,9 @@ test('accessibility > announces cleared values and does not announce them when r
   fireEvent.mouseDown(
     container.querySelector('.react-select__clear-indicator')!
   );
-  act(() => {
-    // wait for live region setTimeout
-    jest.runAllTimers();
-  });
   expect(container.querySelector(liveRegionSelectionId)!.textContent).toMatch(
     'All selected options have been cleared.'
   );
-
-  /**
-   * simulate tabbing back and forth
-   */
-  // blur the Select
-  fireEvent.blur(container.querySelector('input.react-select__input')!);
-  act(() => {
-    // wait for live region setTimeout
-    jest.runAllTimers();
-  });
-  // the live region should not be mounted anymore
-  expect(container.querySelector(liveRegionSelectionId)!).toBeNull();
-
-  // there should no longer be a value selected
-  rerender(<Select {...BASIC_PROPS} options={OPTIONS} isClearable />);
-  // then focus the Select again
-  fireEvent.focus(container.querySelector('input.react-select__input')!);
-  act(() => {
-    // wait for live region setTimeout
-    jest.runAllTimers();
-  });
-
-  // should not announce the deselscted option
-  expect(container.querySelector(liveRegionContextId)!.textContent).toMatch(
-    ' Select is focused ,type to refine list, press Down to open the menu, '
-  );
-  expect(container.querySelector(liveRegionSelectionId)!.textContent).toBe('');
 });
 
 test('closeMenuOnSelect prop > when passed as false it should not call onMenuClose on selecting option', () => {
diff --git a/packages/react-select/src/__tests__/StateManaged.test.tsx b/packages/react-select/src/__tests__/StateManaged.test.tsx
index 6221cd389f..b762d61d37 100644
--- a/packages/react-select/src/__tests__/StateManaged.test.tsx
+++ b/packages/react-select/src/__tests__/StateManaged.test.tsx
@@ -55,11 +55,7 @@ const BASIC_PROPS: BasicProps = {
 };
 
 test('defaults > snapshot', () => {
-  jest.useFakeTimers();
   const { container } = render(<Select />);
-  act(() => {
-    jest.runAllTimers();
-  });
   expect(container).toMatchSnapshot();
 });
 
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 ec4028c128..326248fe43 100644
--- a/packages/react-select/src/__tests__/__snapshots__/Async.test.tsx.snap
+++ b/packages/react-select/src/__tests__/__snapshots__/Async.test.tsx.snap
@@ -18,7 +18,7 @@ exports[`defaults - snapshot 1`] = `
   white-space: nowrap;
 }
 
-.emotion-2 {
+.emotion-3 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -48,11 +48,11 @@ exports[`defaults - snapshot 1`] = `
   box-sizing: border-box;
 }
 
-.emotion-2:hover {
+.emotion-3:hover {
   border-color: hsl(0, 0%, 70%);
 }
 
-.emotion-3 {
+.emotion-4 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -75,7 +75,7 @@ exports[`defaults - snapshot 1`] = `
   box-sizing: border-box;
 }
 
-.emotion-4 {
+.emotion-5 {
   color: hsl(0, 0%, 50%);
   margin-left: 2px;
   margin-right: 2px;
@@ -88,7 +88,7 @@ exports[`defaults - snapshot 1`] = `
   box-sizing: border-box;
 }
 
-.emotion-5 {
+.emotion-6 {
   margin: 2px;
   padding-bottom: 2px;
   padding-top: 2px;
@@ -102,7 +102,7 @@ exports[`defaults - snapshot 1`] = `
   box-sizing: border-box;
 }
 
-.emotion-5:after {
+.emotion-6:after {
   content: attr(data-value) " ";
   visibility: hidden;
   white-space: nowrap;
@@ -115,7 +115,7 @@ exports[`defaults - snapshot 1`] = `
   padding: 0;
 }
 
-.emotion-6 {
+.emotion-7 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -133,7 +133,7 @@ exports[`defaults - snapshot 1`] = `
   box-sizing: border-box;
 }
 
-.emotion-7 {
+.emotion-8 {
   -webkit-align-self: stretch;
   -ms-flex-item-align: stretch;
   align-self: stretch;
@@ -144,7 +144,7 @@ exports[`defaults - snapshot 1`] = `
   box-sizing: border-box;
 }
 
-.emotion-8 {
+.emotion-9 {
   color: hsl(0, 0%, 80%);
   display: -webkit-box;
   display: -webkit-flex;
@@ -156,11 +156,11 @@ exports[`defaults - snapshot 1`] = `
   box-sizing: border-box;
 }
 
-.emotion-8:hover {
+.emotion-9:hover {
   color: hsl(0, 0%, 60%);
 }
 
-.emotion-9 {
+.emotion-10 {
   display: inline-block;
   fill: currentColor;
   line-height: 1;
@@ -172,6 +172,10 @@ exports[`defaults - snapshot 1`] = `
   <div
     class=" emotion-0"
   >
+    <span
+      class="emotion-1"
+      id="react-select-2-live-region"
+    />
     <span
       aria-atomic="false"
       aria-live="polite"
@@ -179,19 +183,19 @@ exports[`defaults - snapshot 1`] = `
       class="emotion-1"
     />
     <div
-      class=" emotion-2"
+      class=" emotion-3"
     >
       <div
-        class=" emotion-3"
+        class=" emotion-4"
       >
         <div
-          class=" emotion-4"
+          class=" emotion-5"
           id="react-select-2-placeholder"
         >
           Select...
         </div>
         <div
-          class=" emotion-5"
+          class=" emotion-6"
           data-value=""
         >
           <input
@@ -216,18 +220,18 @@ exports[`defaults - snapshot 1`] = `
         </div>
       </div>
       <div
-        class=" emotion-6"
+        class=" emotion-7"
       >
         <span
-          class=" emotion-7"
+          class=" emotion-8"
         />
         <div
           aria-hidden="true"
-          class=" emotion-8"
+          class=" emotion-9"
         >
           <svg
             aria-hidden="true"
-            class="emotion-9"
+            class="emotion-10"
             focusable="false"
             height="20"
             viewBox="0 0 20 20"
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 ec4028c128..326248fe43 100644
--- a/packages/react-select/src/__tests__/__snapshots__/AsyncCreatable.test.tsx.snap
+++ b/packages/react-select/src/__tests__/__snapshots__/AsyncCreatable.test.tsx.snap
@@ -18,7 +18,7 @@ exports[`defaults - snapshot 1`] = `
   white-space: nowrap;
 }
 
-.emotion-2 {
+.emotion-3 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -48,11 +48,11 @@ exports[`defaults - snapshot 1`] = `
   box-sizing: border-box;
 }
 
-.emotion-2:hover {
+.emotion-3:hover {
   border-color: hsl(0, 0%, 70%);
 }
 
-.emotion-3 {
+.emotion-4 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -75,7 +75,7 @@ exports[`defaults - snapshot 1`] = `
   box-sizing: border-box;
 }
 
-.emotion-4 {
+.emotion-5 {
   color: hsl(0, 0%, 50%);
   margin-left: 2px;
   margin-right: 2px;
@@ -88,7 +88,7 @@ exports[`defaults - snapshot 1`] = `
   box-sizing: border-box;
 }
 
-.emotion-5 {
+.emotion-6 {
   margin: 2px;
   padding-bottom: 2px;
   padding-top: 2px;
@@ -102,7 +102,7 @@ exports[`defaults - snapshot 1`] = `
   box-sizing: border-box;
 }
 
-.emotion-5:after {
+.emotion-6:after {
   content: attr(data-value) " ";
   visibility: hidden;
   white-space: nowrap;
@@ -115,7 +115,7 @@ exports[`defaults - snapshot 1`] = `
   padding: 0;
 }
 
-.emotion-6 {
+.emotion-7 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -133,7 +133,7 @@ exports[`defaults - snapshot 1`] = `
   box-sizing: border-box;
 }
 
-.emotion-7 {
+.emotion-8 {
   -webkit-align-self: stretch;
   -ms-flex-item-align: stretch;
   align-self: stretch;
@@ -144,7 +144,7 @@ exports[`defaults - snapshot 1`] = `
   box-sizing: border-box;
 }
 
-.emotion-8 {
+.emotion-9 {
   color: hsl(0, 0%, 80%);
   display: -webkit-box;
   display: -webkit-flex;
@@ -156,11 +156,11 @@ exports[`defaults - snapshot 1`] = `
   box-sizing: border-box;
 }
 
-.emotion-8:hover {
+.emotion-9:hover {
   color: hsl(0, 0%, 60%);
 }
 
-.emotion-9 {
+.emotion-10 {
   display: inline-block;
   fill: currentColor;
   line-height: 1;
@@ -172,6 +172,10 @@ exports[`defaults - snapshot 1`] = `
   <div
     class=" emotion-0"
   >
+    <span
+      class="emotion-1"
+      id="react-select-2-live-region"
+    />
     <span
       aria-atomic="false"
       aria-live="polite"
@@ -179,19 +183,19 @@ exports[`defaults - snapshot 1`] = `
       class="emotion-1"
     />
     <div
-      class=" emotion-2"
+      class=" emotion-3"
     >
       <div
-        class=" emotion-3"
+        class=" emotion-4"
       >
         <div
-          class=" emotion-4"
+          class=" emotion-5"
           id="react-select-2-placeholder"
         >
           Select...
         </div>
         <div
-          class=" emotion-5"
+          class=" emotion-6"
           data-value=""
         >
           <input
@@ -216,18 +220,18 @@ exports[`defaults - snapshot 1`] = `
         </div>
       </div>
       <div
-        class=" emotion-6"
+        class=" emotion-7"
       >
         <span
-          class=" emotion-7"
+          class=" emotion-8"
         />
         <div
           aria-hidden="true"
-          class=" emotion-8"
+          class=" emotion-9"
         >
           <svg
             aria-hidden="true"
-            class="emotion-9"
+            class="emotion-10"
             focusable="false"
             height="20"
             viewBox="0 0 20 20"
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 ec4028c128..326248fe43 100644
--- a/packages/react-select/src/__tests__/__snapshots__/Creatable.test.tsx.snap
+++ b/packages/react-select/src/__tests__/__snapshots__/Creatable.test.tsx.snap
@@ -18,7 +18,7 @@ exports[`defaults - snapshot 1`] = `
   white-space: nowrap;
 }
 
-.emotion-2 {
+.emotion-3 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -48,11 +48,11 @@ exports[`defaults - snapshot 1`] = `
   box-sizing: border-box;
 }
 
-.emotion-2:hover {
+.emotion-3:hover {
   border-color: hsl(0, 0%, 70%);
 }
 
-.emotion-3 {
+.emotion-4 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -75,7 +75,7 @@ exports[`defaults - snapshot 1`] = `
   box-sizing: border-box;
 }
 
-.emotion-4 {
+.emotion-5 {
   color: hsl(0, 0%, 50%);
   margin-left: 2px;
   margin-right: 2px;
@@ -88,7 +88,7 @@ exports[`defaults - snapshot 1`] = `
   box-sizing: border-box;
 }
 
-.emotion-5 {
+.emotion-6 {
   margin: 2px;
   padding-bottom: 2px;
   padding-top: 2px;
@@ -102,7 +102,7 @@ exports[`defaults - snapshot 1`] = `
   box-sizing: border-box;
 }
 
-.emotion-5:after {
+.emotion-6:after {
   content: attr(data-value) " ";
   visibility: hidden;
   white-space: nowrap;
@@ -115,7 +115,7 @@ exports[`defaults - snapshot 1`] = `
   padding: 0;
 }
 
-.emotion-6 {
+.emotion-7 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -133,7 +133,7 @@ exports[`defaults - snapshot 1`] = `
   box-sizing: border-box;
 }
 
-.emotion-7 {
+.emotion-8 {
   -webkit-align-self: stretch;
   -ms-flex-item-align: stretch;
   align-self: stretch;
@@ -144,7 +144,7 @@ exports[`defaults - snapshot 1`] = `
   box-sizing: border-box;
 }
 
-.emotion-8 {
+.emotion-9 {
   color: hsl(0, 0%, 80%);
   display: -webkit-box;
   display: -webkit-flex;
@@ -156,11 +156,11 @@ exports[`defaults - snapshot 1`] = `
   box-sizing: border-box;
 }
 
-.emotion-8:hover {
+.emotion-9:hover {
   color: hsl(0, 0%, 60%);
 }
 
-.emotion-9 {
+.emotion-10 {
   display: inline-block;
   fill: currentColor;
   line-height: 1;
@@ -172,6 +172,10 @@ exports[`defaults - snapshot 1`] = `
   <div
     class=" emotion-0"
   >
+    <span
+      class="emotion-1"
+      id="react-select-2-live-region"
+    />
     <span
       aria-atomic="false"
       aria-live="polite"
@@ -179,19 +183,19 @@ exports[`defaults - snapshot 1`] = `
       class="emotion-1"
     />
     <div
-      class=" emotion-2"
+      class=" emotion-3"
     >
       <div
-        class=" emotion-3"
+        class=" emotion-4"
       >
         <div
-          class=" emotion-4"
+          class=" emotion-5"
           id="react-select-2-placeholder"
         >
           Select...
         </div>
         <div
-          class=" emotion-5"
+          class=" emotion-6"
           data-value=""
         >
           <input
@@ -216,18 +220,18 @@ exports[`defaults - snapshot 1`] = `
         </div>
       </div>
       <div
-        class=" emotion-6"
+        class=" emotion-7"
       >
         <span
-          class=" emotion-7"
+          class=" emotion-8"
         />
         <div
           aria-hidden="true"
-          class=" emotion-8"
+          class=" emotion-9"
         >
           <svg
             aria-hidden="true"
-            class="emotion-9"
+            class="emotion-10"
             focusable="false"
             height="20"
             viewBox="0 0 20 20"
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 57e1211344..68c6d9da10 100644
--- a/packages/react-select/src/__tests__/__snapshots__/Select.test.tsx.snap
+++ b/packages/react-select/src/__tests__/__snapshots__/Select.test.tsx.snap
@@ -18,7 +18,7 @@ exports[`snapshot - defaults 1`] = `
   white-space: nowrap;
 }
 
-.emotion-2 {
+.emotion-3 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -48,11 +48,11 @@ exports[`snapshot - defaults 1`] = `
   box-sizing: border-box;
 }
 
-.emotion-2:hover {
+.emotion-3:hover {
   border-color: hsl(0, 0%, 70%);
 }
 
-.emotion-3 {
+.emotion-4 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -75,7 +75,7 @@ exports[`snapshot - defaults 1`] = `
   box-sizing: border-box;
 }
 
-.emotion-4 {
+.emotion-5 {
   color: hsl(0, 0%, 50%);
   margin-left: 2px;
   margin-right: 2px;
@@ -88,7 +88,7 @@ exports[`snapshot - defaults 1`] = `
   box-sizing: border-box;
 }
 
-.emotion-5 {
+.emotion-6 {
   margin: 2px;
   padding-bottom: 2px;
   padding-top: 2px;
@@ -102,7 +102,7 @@ exports[`snapshot - defaults 1`] = `
   box-sizing: border-box;
 }
 
-.emotion-5:after {
+.emotion-6:after {
   content: attr(data-value) " ";
   visibility: hidden;
   white-space: nowrap;
@@ -115,7 +115,7 @@ exports[`snapshot - defaults 1`] = `
   padding: 0;
 }
 
-.emotion-6 {
+.emotion-7 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -133,7 +133,7 @@ exports[`snapshot - defaults 1`] = `
   box-sizing: border-box;
 }
 
-.emotion-7 {
+.emotion-8 {
   -webkit-align-self: stretch;
   -ms-flex-item-align: stretch;
   align-self: stretch;
@@ -144,7 +144,7 @@ exports[`snapshot - defaults 1`] = `
   box-sizing: border-box;
 }
 
-.emotion-8 {
+.emotion-9 {
   color: hsl(0, 0%, 80%);
   display: -webkit-box;
   display: -webkit-flex;
@@ -156,11 +156,11 @@ exports[`snapshot - defaults 1`] = `
   box-sizing: border-box;
 }
 
-.emotion-8:hover {
+.emotion-9:hover {
   color: hsl(0, 0%, 60%);
 }
 
-.emotion-9 {
+.emotion-10 {
   display: inline-block;
   fill: currentColor;
   line-height: 1;
@@ -172,6 +172,10 @@ exports[`snapshot - defaults 1`] = `
   <div
     class=" emotion-0"
   >
+    <span
+      class="emotion-1"
+      id="react-select-2-live-region"
+    />
     <span
       aria-atomic="false"
       aria-live="polite"
@@ -179,19 +183,19 @@ exports[`snapshot - defaults 1`] = `
       class="emotion-1"
     />
     <div
-      class=" emotion-2"
+      class=" emotion-3"
     >
       <div
-        class=" emotion-3"
+        class=" emotion-4"
       >
         <div
-          class=" emotion-4"
+          class=" emotion-5"
           id="react-select-2-placeholder"
         >
           Select...
         </div>
         <div
-          class=" emotion-5"
+          class=" emotion-6"
           data-value=""
         >
           <input
@@ -216,18 +220,18 @@ exports[`snapshot - defaults 1`] = `
         </div>
       </div>
       <div
-        class=" emotion-6"
+        class=" emotion-7"
       >
         <span
-          class=" emotion-7"
+          class=" emotion-8"
         />
         <div
           aria-hidden="true"
-          class=" emotion-8"
+          class=" emotion-9"
         >
           <svg
             aria-hidden="true"
-            class="emotion-9"
+            class="emotion-10"
             focusable="false"
             height="20"
             viewBox="0 0 20 20"
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 664642c35c..4efc64f3ad 100644
--- a/packages/react-select/src/__tests__/__snapshots__/StateManaged.test.tsx.snap
+++ b/packages/react-select/src/__tests__/__snapshots__/StateManaged.test.tsx.snap
@@ -18,7 +18,7 @@ exports[`defaults > snapshot 1`] = `
   white-space: nowrap;
 }
 
-.emotion-2 {
+.emotion-3 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -48,11 +48,11 @@ exports[`defaults > snapshot 1`] = `
   box-sizing: border-box;
 }
 
-.emotion-2:hover {
+.emotion-3:hover {
   border-color: hsl(0, 0%, 70%);
 }
 
-.emotion-3 {
+.emotion-4 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -75,7 +75,7 @@ exports[`defaults > snapshot 1`] = `
   box-sizing: border-box;
 }
 
-.emotion-4 {
+.emotion-5 {
   color: hsl(0, 0%, 50%);
   margin-left: 2px;
   margin-right: 2px;
@@ -88,7 +88,7 @@ exports[`defaults > snapshot 1`] = `
   box-sizing: border-box;
 }
 
-.emotion-5 {
+.emotion-6 {
   margin: 2px;
   padding-bottom: 2px;
   padding-top: 2px;
@@ -102,7 +102,7 @@ exports[`defaults > snapshot 1`] = `
   box-sizing: border-box;
 }
 
-.emotion-5:after {
+.emotion-6:after {
   content: attr(data-value) " ";
   visibility: hidden;
   white-space: nowrap;
@@ -115,7 +115,7 @@ exports[`defaults > snapshot 1`] = `
   padding: 0;
 }
 
-.emotion-6 {
+.emotion-7 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -133,7 +133,7 @@ exports[`defaults > snapshot 1`] = `
   box-sizing: border-box;
 }
 
-.emotion-7 {
+.emotion-8 {
   -webkit-align-self: stretch;
   -ms-flex-item-align: stretch;
   align-self: stretch;
@@ -144,7 +144,7 @@ exports[`defaults > snapshot 1`] = `
   box-sizing: border-box;
 }
 
-.emotion-8 {
+.emotion-9 {
   color: hsl(0, 0%, 80%);
   display: -webkit-box;
   display: -webkit-flex;
@@ -156,11 +156,11 @@ exports[`defaults > snapshot 1`] = `
   box-sizing: border-box;
 }
 
-.emotion-8:hover {
+.emotion-9:hover {
   color: hsl(0, 0%, 60%);
 }
 
-.emotion-9 {
+.emotion-10 {
   display: inline-block;
   fill: currentColor;
   line-height: 1;
@@ -172,6 +172,10 @@ exports[`defaults > snapshot 1`] = `
   <div
     class=" emotion-0"
   >
+    <span
+      class="emotion-1"
+      id="react-select-2-live-region"
+    />
     <span
       aria-atomic="false"
       aria-live="polite"
@@ -179,19 +183,19 @@ exports[`defaults > snapshot 1`] = `
       class="emotion-1"
     />
     <div
-      class=" emotion-2"
+      class=" emotion-3"
     >
       <div
-        class=" emotion-3"
+        class=" emotion-4"
       >
         <div
-          class=" emotion-4"
+          class=" emotion-5"
           id="react-select-2-placeholder"
         >
           Select...
         </div>
         <div
-          class=" emotion-5"
+          class=" emotion-6"
           data-value=""
         >
           <input
@@ -216,18 +220,18 @@ exports[`defaults > snapshot 1`] = `
         </div>
       </div>
       <div
-        class=" emotion-6"
+        class=" emotion-7"
       >
         <span
-          class=" emotion-7"
+          class=" emotion-8"
         />
         <div
           aria-hidden="true"
-          class=" emotion-8"
+          class=" emotion-9"
         >
           <svg
             aria-hidden="true"
-            class="emotion-9"
+            class="emotion-10"
             focusable="false"
             height="20"
             viewBox="0 0 20 20"
diff --git a/packages/react-select/src/accessibility/index.ts b/packages/react-select/src/accessibility/index.ts
index ae142bb883..bb889a6ad9 100644
--- a/packages/react-select/src/accessibility/index.ts
+++ b/packages/react-select/src/accessibility/index.ts
@@ -133,7 +133,7 @@ export const defaultAriaLiveMessages = {
   onChange: <Option extends OptionBase, IsMulti extends boolean>(
     props: AriaOnChangeProps<Option, IsMulti>
   ) => {
-    const { action, label = '', labels, isDisabled, value } = props;
+    const { action, label = '', labels, isDisabled } = props;
     switch (action) {
       case 'deselect-option':
       case 'pop-value':
@@ -149,8 +149,6 @@ export const defaultAriaLiveMessages = {
         return isDisabled
           ? `option ${label} is disabled. Select another option.`
           : `option ${label}, selected.`;
-      case 'create-option':
-        return `option ${value}, created.`;
       default:
         return '';
     }
diff --git a/packages/react-select/src/components/LiveRegion.tsx b/packages/react-select/src/components/LiveRegion.tsx
index 867c179d89..e320ae8a59 100644
--- a/packages/react-select/src/components/LiveRegion.tsx
+++ b/packages/react-select/src/components/LiveRegion.tsx
@@ -30,6 +30,7 @@ export interface LiveRegionProps<
   selectValue: Options<Option>;
   focusableOptions: Options<Option>;
   isFocused: boolean;
+  id: string;
 }
 
 const LiveRegion = <
@@ -47,6 +48,7 @@ const LiveRegion = <
     isFocused,
     selectValue,
     selectProps,
+    id,
   } = props;
 
   const {
@@ -92,7 +94,7 @@ const LiveRegion = <
       const selected = removedValue || option || asOption(value);
       const label = selected ? getOptionLabel(selected) : '';
 
-      // If there are multiple items from the action then get return a array of labels
+      // If there are multiple items from the action then return an array of labels
       const multiSelected = selectedOptions || removedValues || undefined;
       const labels = multiSelected ? multiSelected.map(getOptionLabel) : [];
 
@@ -192,37 +194,28 @@ const LiveRegion = <
 
   const ariaContext = `${ariaFocused} ${ariaResults} ${ariaGuidance}`;
 
-  // This is to fix NVDA not announcing the live region when the Select is focused.
-  // It also fixes VoiceOver not announcing the live region when re-focusing.
-  // It just delays the rendering of the live region a small amount so the screen reader
-  // buffers the announcement after its in-built guidance messages.
-  const [reveal, setReveal] = useState(false);
-  const timeoutRef = useRef<number | undefined>();
-  useEffect(() => {
-    if (!timeoutRef.current && isFocused) {
-      // @ts-ignore - TS kept wanting this to be a NodeJS.Timeout type
-      timeoutRef.current = setTimeout(() => setReveal(true));
-    }
-    return () => {
-      clearTimeout(timeoutRef.current);
-      timeoutRef.current = undefined;
-      setReveal(false);
-    };
-  }, [isFocused]);
+  const ScreenReaderText = (
+    <React.Fragment>
+      <span id="aria-selection">{ariaSelected}</span>
+      <span id="aria-context">{ariaContext}</span>
+    </React.Fragment>
+  );
+
+  const isInitialFocus = ariaSelection?.action === 'initial-input-focus';
 
   return (
-    <A11yText
-      aria-live={ariaLive}
-      aria-atomic="false"
-      aria-relevant="additions text"
-    >
-      {reveal && (
-        <React.Fragment>
-          <span id="aria-selection">{ariaSelected}</span>
-          <span id="aria-context">{ariaContext}</span>
-        </React.Fragment>
-      )}
-    </A11yText>
+    <React.Fragment>
+      {/* We use 'aria-describedby' linked to this component for the initial focus */}
+      {/* action, then for all other actions we use the live region below */}
+      <A11yText id={id}>{isInitialFocus && ScreenReaderText}</A11yText>
+      <A11yText
+        aria-live={ariaLive}
+        aria-atomic="false"
+        aria-relevant="additions text"
+      >
+        {isFocused && !isInitialFocus && ScreenReaderText}
+      </A11yText>
+    </React.Fragment>
   );
 };
 

From d623cd20ea22ea7710b5d971bbb03cd0455a393d Mon Sep 17 00:00:00 2001
From: Matt Charlton <mcharlton@atlassian.com>
Date: Wed, 28 Jul 2021 14:20:34 +1000
Subject: [PATCH 22/24] remove unneeded imports

---
 packages/react-select/src/Select.tsx                      | 6 +-----
 packages/react-select/src/__tests__/Select.test.tsx       | 2 +-
 packages/react-select/src/__tests__/StateManaged.test.tsx | 2 +-
 packages/react-select/src/components/LiveRegion.tsx       | 2 +-
 4 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/packages/react-select/src/Select.tsx b/packages/react-select/src/Select.tsx
index 79166ab523..8b3f3b730a 100644
--- a/packages/react-select/src/Select.tsx
+++ b/packages/react-select/src/Select.tsx
@@ -685,11 +685,7 @@ export default class Select<
       // If `value` or `defaultValue` props are not empty then announce them
       // when the Select is initially focused
       newAriaSelection = {
-        value: valueTernary(
-          props.isMulti,
-          state.selectValue,
-          state.selectValue[0] || null
-        ),
+        value: valueTernary(props.isMulti, selectValue, selectValue[0] || null),
         options: selectValue,
         action: 'initial-input-focus',
       };
diff --git a/packages/react-select/src/__tests__/Select.test.tsx b/packages/react-select/src/__tests__/Select.test.tsx
index 72d8a73851..2029d9344b 100644
--- a/packages/react-select/src/__tests__/Select.test.tsx
+++ b/packages/react-select/src/__tests__/Select.test.tsx
@@ -1,5 +1,5 @@
 import React, { KeyboardEvent } from 'react';
-import { act, render, fireEvent, EventType } from '@testing-library/react';
+import { render, fireEvent, EventType } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import cases from 'jest-in-case';
 
diff --git a/packages/react-select/src/__tests__/StateManaged.test.tsx b/packages/react-select/src/__tests__/StateManaged.test.tsx
index b762d61d37..e61d7b074c 100644
--- a/packages/react-select/src/__tests__/StateManaged.test.tsx
+++ b/packages/react-select/src/__tests__/StateManaged.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { act, render, fireEvent, EventType } from '@testing-library/react';
+import { render, fireEvent, EventType } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import cases from 'jest-in-case';
diff --git a/packages/react-select/src/components/LiveRegion.tsx b/packages/react-select/src/components/LiveRegion.tsx
index e320ae8a59..ec06395818 100644
--- a/packages/react-select/src/components/LiveRegion.tsx
+++ b/packages/react-select/src/components/LiveRegion.tsx
@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import React, { ReactNode, useEffect, useMemo, useRef, useState } from 'react';
+import React, { ReactNode, useMemo} from 'react';
 import { jsx } from '@emotion/react';
 import A11yText from '../internal/A11yText';
 import { defaultAriaLiveMessages, AriaSelection } from '../accessibility';

From 06cbbc6d198205a2523486838a9048e613246c7f Mon Sep 17 00:00:00 2001
From: Matt Charlton <mcharlton@atlassian.com>
Date: Wed, 28 Jul 2021 15:14:56 +1000
Subject: [PATCH 23/24] fix formatting

---
 packages/react-select/src/Select.tsx                | 4 ++--
 packages/react-select/src/components/LiveRegion.tsx | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/react-select/src/Select.tsx b/packages/react-select/src/Select.tsx
index 8b3f3b730a..93239cdf41 100644
--- a/packages/react-select/src/Select.tsx
+++ b/packages/react-select/src/Select.tsx
@@ -644,7 +644,7 @@ export default class Select<
       isFocused,
       prevWasFocused,
     } = state;
-    const { options, value, menuIsOpen, inputValue } = props;
+    const { options, value, menuIsOpen, inputValue, isMulti } = props;
     const selectValue = cleanValue(value);
     let newMenuOptionsState = {};
     if (
@@ -685,7 +685,7 @@ export default class Select<
       // If `value` or `defaultValue` props are not empty then announce them
       // when the Select is initially focused
       newAriaSelection = {
-        value: valueTernary(props.isMulti, selectValue, selectValue[0] || null),
+        value: valueTernary(isMulti, selectValue, selectValue[0] || null),
         options: selectValue,
         action: 'initial-input-focus',
       };
diff --git a/packages/react-select/src/components/LiveRegion.tsx b/packages/react-select/src/components/LiveRegion.tsx
index ec06395818..d4d7880ccd 100644
--- a/packages/react-select/src/components/LiveRegion.tsx
+++ b/packages/react-select/src/components/LiveRegion.tsx
@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import React, { ReactNode, useMemo} from 'react';
+import React, { ReactNode, useMemo } from 'react';
 import { jsx } from '@emotion/react';
 import A11yText from '../internal/A11yText';
 import { defaultAriaLiveMessages, AriaSelection } from '../accessibility';

From 1c9ba38a80bdc555707fdb18bfcf78be048febbd Mon Sep 17 00:00:00 2001
From: Matt Charlton <mcharlton@atlassian.com>
Date: Wed, 28 Jul 2021 15:16:22 +1000
Subject: [PATCH 24/24] Mobile VO remove options

---
 .changeset/selfish-dots-look.md                     | 1 +
 packages/react-select/src/components/MultiValue.tsx | 7 ++++++-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/.changeset/selfish-dots-look.md b/.changeset/selfish-dots-look.md
index cd42e4c82e..28c1e38851 100644
--- a/.changeset/selfish-dots-look.md
+++ b/.changeset/selfish-dots-look.md
@@ -9,3 +9,4 @@ The following improvements have been made for screen reader users:
 - VoiceOver now announces the context text when re-focusing
 - The clear action is now announced
 - Placeholder text is now announced
+- Mobile VoiceOver is now able to remove selected multi options
diff --git a/packages/react-select/src/components/MultiValue.tsx b/packages/react-select/src/components/MultiValue.tsx
index 90c155be3e..043d26685f 100644
--- a/packages/react-select/src/components/MultiValue.tsx
+++ b/packages/react-select/src/components/MultiValue.tsx
@@ -127,7 +127,11 @@ export function MultiValueRemove<
   IsMulti extends boolean,
   Group extends GroupBase<Option>
 >({ children, innerProps }: MultiValueRemoveProps<Option, IsMulti, Group>) {
-  return <div {...innerProps}>{children || <CrossIcon size={14} />}</div>;
+  return (
+    <div role="button" {...innerProps}>
+      {children || <CrossIcon size={14} />}
+    </div>
+  );
 }
 
 const MultiValue = <
@@ -201,6 +205,7 @@ const MultiValue = <
                   className
                 )
               ),
+              'aria-label': `Remove ${children || 'option'}`,
               ...removeProps,
             }}
             selectProps={selectProps}