chore(downshift): update downshift to v8.x (#14276)

* chore(downshift): update downshift to v8.x

* fix(dropdown): fix typescript errors from downshift update

* fix(multiselect): fix issues from downshift update

* fix(downshift): wip work on fixing multiselect keyboard navigation and onKeyDown handler

* fix(Multiselect): fix issue with clearing on esc key

* test(Multiselect): update tests

* chore(test): update snapshots, yarn dedupe

* fix(Dropdown): update AVT test to look for class rather than selected

* fix(Multiselect): fix arrow key navigation, update tests

* fix(Multiselect): more changes

* fix(Downshift): fix various voiceover issues

* test(snapshot): update snapshots

* fix(ListBox): align open / selection behavior between components

* fix(Downshift): imporive keyboard functionality Dropdown, Mulitselect

* fix(dropdown): manually call scrollIntoView through the stateReducer

* fix(dropdown): remove unused menuItemOptionRefs

* fix(multiselect): refactor onStateChange usage to stateReducer

* fix(Multiselect): adjust highlighted index, use semantic list elements

* chore(test): update snapshots

---------

Co-authored-by: TJ Egan <tw15egan@gmail.com>

e2e/components/Dropdown/Dropdown-test.avt.e2e.js

@@ -53,35 +53,42 @@ test.describe('Dropdown @avt', () => {
         theme: 'white',
       },
     });
-    await expect(page.getByRole('combobox')).toBeVisible();
+    const toggleButton = page.getByRole('combobox');
+    const menu = page.getByRole('listbox');
 
+    await expect(toggleButton).toBeVisible();
     // Tab and open the Dropdown with Arrow Down
     await page.keyboard.press('Tab');
-    const toggleButton = page.getByRole('combobox');
     await expect(toggleButton).toBeFocused();
     await page.keyboard.press('ArrowDown');
-    await expect(page.getByRole('listbox')).toBeVisible();
+    await expect(menu).toBeVisible();
+    // Close with Escape, retain focus, and open with Space
+    await page.keyboard.press('Escape');
+    await page.keyboard.press('Space');
+    await expect(menu).toBeVisible();
     // Close with Escape, retain focus, and open with Enter
     await page.keyboard.press('Escape');
-    await expect(page.getByRole('listbox')).not.toBeVisible();
+    await expect(menu).not.toBeVisible();
     await expect(toggleButton).toBeFocused();
     await page.keyboard.press('Enter');
     // Navigation inside the menu
     await page.keyboard.press('ArrowDown');
     await expect(
       page.getByRole('option', {
         name: 'Lorem, ipsum dolor sit amet consectetur adipisicing elit.',
-        selected: true,
       })
-    ).toBeVisible();
+    ).toHaveClass(
+      'cds--list-box__menu-item cds--list-box__menu-item--highlighted'
+    );
     // move to second option
     await page.keyboard.press('ArrowDown');
     await expect(
       page.getByRole('option', {
         name: 'Option 1',
-        selected: true,
       })
-    ).toBeVisible();
+    ).toHaveClass(
+      'cds--list-box__menu-item cds--list-box__menu-item--highlighted'
+    );
     // select second option
     await page.keyboard.press('Enter');
     // focus comes back to the toggle button

e2e/components/MultiSelect/MultiSelect-test.avt.e2e.js

@@ -44,16 +44,14 @@ test.describe('MultiSelect @avt', () => {
         theme: 'white',
       },
     });
-    const toggleButton = page.getByRole('button');
-    const menu = page.getByRole('listbox');
+    const toggleButton = page.getByRole('combobox');
 
     await expect(toggleButton).toBeVisible();
     // Tab and open the MultiSelect
     await page.keyboard.press('Tab');
     await expect(toggleButton).toBeFocused();
     await page.keyboard.press('Enter');
     await expect(page.getByRole('combobox', { expanded: true })).toBeVisible;
-    await expect(menu).toBeFocused();
 
     await expect(page).toHaveNoACViolations('MultiSelect-open');
   });
@@ -67,16 +65,14 @@ test.describe('MultiSelect @avt', () => {
         theme: 'white',
       },
     });
-    const toggleButton = page.getByRole('button');
-    const menu = page.getByRole('listbox');
+    const toggleButton = page.getByRole('combobox');
 
     await expect(toggleButton).toBeVisible();
     // Tab and open the MultiSelect
     await page.keyboard.press('Tab');
     await expect(toggleButton).toBeFocused();
     await page.keyboard.press('Enter');
     await expect(page.getByRole('combobox', { expanded: true })).toBeVisible;
-    await expect(menu).toBeFocused();
 
     await expect(page).toHaveNoACViolations('MultiSelect-open');
   });
@@ -89,9 +85,8 @@ test.describe('MultiSelect @avt', () => {
         theme: 'white',
       },
     });
-    const toggleButton = page.getByRole('button', {
+    const toggleButton = page.getByRole('combobox', {
       expanded: false,
-      name: 'Multiselect Label',
     });
     const selection = page.getByRole('button', {
       name: 'Clear all selected items',
@@ -127,7 +122,14 @@ test.describe('MultiSelect @avt', () => {
     ).toHaveClass(
       'cds--list-box__menu-item cds--list-box__menu-item--highlighted'
     );
-    // select first option (should only select with space bar)
+    // select first option (should select with enter and space)
+    await page.keyboard.press('Enter');
+    await expect(
+      page.getByRole('option', {
+        name: 'An example option that is really long to show what should be done to handle long text',
+        selected: true,
+      })
+    ).toBeVisible();
     await page.keyboard.press('Enter');
     await expect(
       page.getByRole('option', {