[NO-TICKET] Fix passthrough of getA11yStatusMessage on dropdowns (#…

…2604)

* Try to fix lost selection message with custom getA11ySelectionMessage fn

Unfortunately it does not work because of the debouncing done inside Downshift. [Here's my explanation](downshift-js/downshift#1244):

> For what it's worth, I have just come across an issue with the existing a11y-message implementation and specifically [how updateA11yStatus is debounced](https://github.com/downshift-js/downshift/blob/master/src/hooks/utils.js#L85). In my application, I have one dropdown on a page that modifies the available options for another dropdown further down the page. (This isn't ideal from an accessibility standpoint, but [the WCAG docs](https://www.w3.org/WAI/WCAG21/Understanding/on-input) do say we can do that if we warn users that it's going to happen, and it will take a while before we can design out all the instances of it across multiple applications.) I wanted to write a custom `getA11ySelectionMessage` function that would determine when it's one of those incidentally changed dropdowns rather than the one the user is interacting with so that only the desired `${itemToString(selectedItem)} has been selected.` gets printed to the a11y-message div. However, due to the debouncing, none of the other `getA11ySelectionMessage` functions even get called except for the last one, which is the one I don't want to announce. If Downshift called those `getA11yMessage` functions instead of passing them to `updateA11yStatus` and then ignored them if they returned, say, `undefined`, this plan would work. But right now the agency from each individual dropdown is taken from it to determine whether its status message should be announced. It's getting lost in the debounce.

* Get rid of new function that didn't work

See previous commit

* Actually, give full control to user-defined functions

If our users are defining a `getA11yStatusMessage` function, it's because they want to control it.

* [DO-NOT-MERGE] Test code in story

* Revert "[DO-NOT-MERGE] Test code in story"

This reverts commit 405fc07.

packages/design-system/src/components/Dropdown/Dropdown.tsx

@@ -87,6 +87,11 @@ export interface BaseDropdownProps extends Omit<FormFieldProps, 'id'> {
    * aria-live during certain interactions. [Read more on downshift docs.](https://github.com/downshift-js/downshift/tree/master/src/hooks/useSelect#geta11ystatusmessage)
    */
   getA11yStatusMessage?: UseSelectProps<any>['getA11yStatusMessage'];
+  /**
+   * Customize the default status messages announced to screen reader users via
+   * aria-live when a selection is made. [Read more on downshift docs.](https://github.com/downshift-js/downshift/tree/master/src/hooks/useSelect#geta11yselectionmessage)
+   */
+  getA11ySelectionMessage?: UseSelectProps<any>['getA11ySelectionMessage'];
 }
 
 type OptionsOrChildren =
@@ -129,6 +134,8 @@ export const Dropdown: React.FC<DropdownProps> = (props: DropdownProps) => {
     defaultValue,
     value,
     inputRef,
+    getA11yStatusMessage,
+    getA11ySelectionMessage,
     ...extraProps
   } = props;
 
@@ -172,6 +179,8 @@ export const Dropdown: React.FC<DropdownProps> = (props: DropdownProps) => {
     }
   }
 
+  const highlightStatusMessageFn = useHighlightStatusMessageFn();
+
   const {
     isOpen,
     selectedItem,
@@ -187,7 +196,8 @@ export const Dropdown: React.FC<DropdownProps> = (props: DropdownProps) => {
     menuId,
     items,
     itemToString,
-    getA11yStatusMessage: useHighlightStatusMessageFn(),
+    getA11yStatusMessage: getA11yStatusMessage ?? highlightStatusMessageFn,
+    ...(getA11ySelectionMessage ? { getA11ySelectionMessage } : {}),
     onSelectedItemChange:
       onChange &&
       ((changes: UseSelectStateChangeOptions<any>) => {