diff --git a/.changeset/mean-cherries-press.md b/.changeset/mean-cherries-press.md
new file mode 100644
index 0000000000..ecb7905e50
--- /dev/null
+++ b/.changeset/mean-cherries-press.md
@@ -0,0 +1,7 @@
+---
+"@khanacademy/wonder-blocks-clickable": major
+"@khanacademy/wonder-blocks-dropdown": major
+"@khanacademy/wonder-blocks-core": major
+---
+
+Fixes keyboard tests in Dropdown and Clickable with specific key events. We now check `event.key` instead of `event.which` or `event.keyCode` to remove deprecated event properties and match the keys returned from Testing Library/userEvent.
diff --git a/.changeset/tasty-rockets-mix.md b/.changeset/tasty-rockets-mix.md
new file mode 100644
index 0000000000..9068c82edb
--- /dev/null
+++ b/.changeset/tasty-rockets-mix.md
@@ -0,0 +1,7 @@
+---
+"@khanacademy/wonder-blocks-dropdown": major
+---
+
+1. Updates dropdown openers for SingleSelect and MultiSelect to use `role="combobox"` instead of `button`.
+2. SingleSelect and MultiSelect should have a paired `<label>` element or `aria-label` attribute for accessibility. They no longer fall back to text content for labeling, as those contents are now used as combobox values.
+3. Changes the type names for custom label objects from `Labels` to `LabelsValues` and `SingleSelectLabels` to `SingleSelectLabelsValues`, respectively.
diff --git a/__docs__/wonder-blocks-dropdown/multi-select.accessibility.mdx b/__docs__/wonder-blocks-dropdown/multi-select.accessibility.mdx
new file mode 100644
index 0000000000..bc0ef13657
--- /dev/null
+++ b/__docs__/wonder-blocks-dropdown/multi-select.accessibility.mdx
@@ -0,0 +1,46 @@
+import {Meta, Story, Canvas} from "@storybook/blocks";
+import * as MultiSelectAccessibilityStories from './multi-select.accessibility.stories';
+
+import {OptionItem, MultiSelect} from "@khanacademy/wonder-blocks-dropdown";
+import {View} from "@khanacademy/wonder-blocks-core";
+import {LabeledField} from "@khanacademy/wonder-blocks-labeled-field";
+
+<Meta of={MultiSelectAccessibilityStories} />
+
+# Accessibility
+
+## Using `LabeledField` with `MultiSelect`
+
+To associate a `MultiSelect` with another visible element (e.g. a `<label>`),
+wrap it in a `LabeledField` component. The label will apply to the `MultiSelect`
+opener. With `LabeledField`, you can supply label text (or a JSX node)
+using the `label` prop to generate a paired `<label>` element. It comes with
+field validation and other features baked in!
+
+If for some reason you can't use `LabeledField` for a visible label, you can still
+make `MultiSelect` accessible in a screen reader by associating it with `<label for="">`.
+Pass the `id` of the `MultiSelect` to the `for` attribute.
+
+Alternatively, you can create an accessible name for `MultiSelect` using `aria-labelledby`.
+Put `aria-labelledby` on `MultiSelect` pointing to the `id` of any other element.
+It won't give you the same enhanced click target as a paired `<label>`, but it still
+helps to create a more accessible experience.
+
+<Canvas of={MultiSelectAccessibilityStories.UsingAriaAttributes} />
+
+## Using `aria-label` for the opener and/or child options
+
+A visible label with `<LabeledField>` is preferred. However, for specific cases
+where the `MultiSelect` is not paired with a `LabeledField` or other visible
+`<label>` element, you **must** supply an `aria-label` attribute for an
+accessible name on the opener.
+
+This will ensure the `MultiSelect` as a whole has a name that describes its purpose.
+
+Also, if you need screen readers to understand relevant information on
+option items, you can use `aria-label` on each item. e.g. You can use it to let
+screen readers know the current selected/unselected status of the item when it
+receives focus. This can be useful when the options contain icons or other information
+that would need to be omitted from the visible label.
+
+<Canvas of={MultiSelectAccessibilityStories.UsingOpenerAriaLabel} />
diff --git a/__docs__/wonder-blocks-dropdown/multi-select.accessibility.stories.tsx b/__docs__/wonder-blocks-dropdown/multi-select.accessibility.stories.tsx
new file mode 100644
index 0000000000..0ce838fcdf
--- /dev/null
+++ b/__docs__/wonder-blocks-dropdown/multi-select.accessibility.stories.tsx
@@ -0,0 +1,131 @@
+import * as React from "react";
+import magnifyingGlassIcon from "@phosphor-icons/core/regular/magnifying-glass.svg";
+import {OptionItem, MultiSelect} from "@khanacademy/wonder-blocks-dropdown";
+import {LabeledField} from "@khanacademy/wonder-blocks-labeled-field";
+import {View} from "@khanacademy/wonder-blocks-core";
+import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
+
+export default {
+    title: "Packages / Dropdown / MultiSelect / Accessibility",
+    component: MultiSelect,
+
+    // Disables chromatic testing for these stories.
+    parameters: {
+        previewTabs: {
+            canvas: {
+                hidden: true,
+            },
+        },
+
+        viewMode: "docs",
+
+        chromatic: {
+            disableSnapshot: true,
+        },
+    },
+};
+
+const MultiSelectAccessibility = () => (
+    <View>
+        <LabeledField
+            label="Associated label element"
+            field={
+                <MultiSelect selectedValues={["one"]} onChange={() => {}}>
+                    <OptionItem label="First element" value="one" />
+                    <OptionItem label="Second element" value="two" />
+                </MultiSelect>
+            }
+        />
+    </View>
+);
+
+export const UsingAriaAttributes = {
+    render: MultiSelectAccessibility.bind({}),
+    name: "Using LabeledField",
+};
+
+const MultiSelectAriaLabel = () => (
+    <View>
+        <MultiSelect
+            aria-label="Class options"
+            id="unique-single-select"
+            selectedValues={["one"]}
+            onChange={() => {}}
+        >
+            <OptionItem
+                label="First element"
+                aria-label="First element, selected"
+                value="one"
+            />
+            <OptionItem
+                label="Second element"
+                aria-label="Second element, unselelected"
+                value="two"
+            />
+        </MultiSelect>
+    </View>
+);
+
+export const UsingOpenerAriaLabel = {
+    render: MultiSelectAriaLabel.bind({}),
+    name: "Using aria-label attributes",
+};
+
+const MultiSelectCustomOpenerLabeledField = () => {
+    return (
+        <View>
+            <LabeledField
+                label="Search"
+                field={
+                    <MultiSelect
+                        onChange={() => {}}
+                        opener={(eventState: any) => (
+                            <button onClick={() => {}}>
+                                <PhosphorIcon
+                                    icon={magnifyingGlassIcon}
+                                    size="medium"
+                                />
+                            </button>
+                        )}
+                    >
+                        <OptionItem label="item 1" value="1" />
+                        <OptionItem label="item 2" value="2" />
+                        <OptionItem label="item 3" value="3" />
+                    </MultiSelect>
+                }
+            />
+        </View>
+    );
+};
+
+export const UsingCustomOpenerLabeledField = {
+    render: MultiSelectCustomOpenerLabeledField.bind({}),
+    name: "Using custom opener in a LabeledField",
+};
+
+const MultiSelectCustomOpenerLabel = () => {
+    return (
+        <View>
+            <MultiSelect
+                onChange={() => {}}
+                opener={(eventState: any) => (
+                    <button aria-label="Search button" onClick={() => {}}>
+                        <PhosphorIcon
+                            icon={magnifyingGlassIcon}
+                            size="medium"
+                        />
+                    </button>
+                )}
+            >
+                <OptionItem label="item 1" value="1" />
+                <OptionItem label="item 2" value="2" />
+                <OptionItem label="item 3" value="3" />
+            </MultiSelect>
+        </View>
+    );
+};
+
+export const UsingCustomOpenerAriaLabel = {
+    render: MultiSelectCustomOpenerLabel.bind({}),
+    name: "Using aria-label on custom opener",
+};
diff --git a/__docs__/wonder-blocks-dropdown/multi-select.stories.tsx b/__docs__/wonder-blocks-dropdown/multi-select.stories.tsx
index ae53f5efd3..18311500b3 100644
--- a/__docs__/wonder-blocks-dropdown/multi-select.stories.tsx
+++ b/__docs__/wonder-blocks-dropdown/multi-select.stories.tsx
@@ -12,7 +12,7 @@ import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
 import {HeadingLarge} from "@khanacademy/wonder-blocks-typography";
 import {MultiSelect, OptionItem} from "@khanacademy/wonder-blocks-dropdown";
 import Pill from "@khanacademy/wonder-blocks-pill";
-import type {Labels} from "@khanacademy/wonder-blocks-dropdown";
+import type {LabelsValues} from "@khanacademy/wonder-blocks-dropdown";
 
 import ComponentInfo from "../components/component-info";
 import packageConfig from "../../packages/wonder-blocks-dropdown/package.json";
@@ -220,7 +220,7 @@ export const ControlledOpened: StoryComponentType = {
 };
 
 // Custom MultiSelect labels
-const dropdownLabels: Labels = {
+const dropdownLabels: LabelsValues = {
     ...defaultLabels,
     noneSelected: "Solar system",
     someSelected: (numSelectedValues) => `${numSelectedValues} planets`,
@@ -595,7 +595,7 @@ export const VirtualizedFilterable: StoryComponentType = {
  * a function with the following arguments:
  *  - `eventState`: lets you customize the style for different states, such as
  *    pressed, hovered and focused.
- *  - `text`: Passes the menu label defined in the parent component. This value
+ *  - `text`: Passes the menu value defined in the parent component. This value
  *  is passed using the placeholder prop set in the `MultiSelect` component.
  *  - `opened`: Whether the dropdown is opened.
  *
@@ -604,11 +604,16 @@ export const VirtualizedFilterable: StoryComponentType = {
  *
  * **Accessibility:** When a custom opener is used, the following attributes are
  * added automatically: `aria-expanded`, `aria-haspopup`, and `aria-controls`.
+ * With a custom opener, you are still responsible for labeling the `MultiSelect`
+ * by wrapping it in a `<LabeledField>` or using `aria-label` on the parent component
+ * to describe the purpose of the control. Because it is a combobox, the value
+ * can't also be used for the label.
  */
 export const CustomOpener: StoryComponentType = {
     render: Template,
     args: {
         selectedValues: [],
+        "aria-label": "Custom opener",
         opener: ({focused, hovered, pressed, text, opened}: OpenerProps) => {
             action(JSON.stringify({focused, hovered, pressed, opened}))(
                 "state changed!",
@@ -660,7 +665,7 @@ export const CustomLabels: StoryComponentType = {
         >([]);
         const [opened, setOpened] = React.useState(true);
 
-        const labels: Labels = {
+        const labels: LabelsValues = {
             clearSearch: "Limpiar busqueda",
             filter: "Filtrar",
             noResults: "Sin resultados",
diff --git a/__docs__/wonder-blocks-dropdown/single-select.accessibility.mdx b/__docs__/wonder-blocks-dropdown/single-select.accessibility.mdx
index 5021ba991f..a418f175b1 100644
--- a/__docs__/wonder-blocks-dropdown/single-select.accessibility.mdx
+++ b/__docs__/wonder-blocks-dropdown/single-select.accessibility.mdx
@@ -3,49 +3,49 @@ import * as SingleSelectAccessibilityStories from './single-select.accessibility
 
 import {OptionItem, SingleSelect} from "@khanacademy/wonder-blocks-dropdown";
 import {View} from "@khanacademy/wonder-blocks-core";
-import {LabelLarge} from "@khanacademy/wonder-blocks-typography";
+import {LabeledField} from "@khanacademy/wonder-blocks-labeled-field";
 
 <Meta of={SingleSelectAccessibilityStories} />
 
-export const SingleSelectAccessibility = () => (
-    <View>
-        <LabelLarge
-            tag="label"
-            id="label-for-single-select"
-            htmlFor="unique-single-select"
-        >
-            Associated label element
-        </LabelLarge>
-        <SingleSelect
-            aria-labelledby="label-for-single-select"
-            id="unique-single-select"
-            placeholder="Accessible SingleSelect"
-            selectedValue="one"
-        >
-            <OptionItem
-                label="First element"
-                aria-label="First element, selected"
-                value="one"
-            />
-            <OptionItem
-                label="Second element"
-                aria-label="Second element, unselelected"
-                value="two"
-            />
-        </SingleSelect>
-    </View>
-);
-
 # Accessibility
 
-If you need to associate this component with another element (e.g. `<label>`),
-make sure to pass the `aria-labelledby` and/or `id` props to the `SingleSelect` component.
-This way, the `opener` will receive this value and it will associate both
-elements.
+## Using `LabeledField` with `SingleSelect`
 
-Also, if you need screen readers to understand any relevant information on every
-option item, you can use `aria-label` on each item. e.g. You can use it to let
-screen readers know the current selected/unselected status of the item when it
-receives focus.
+To associate a `SingleSelect` with another visible element (e.g. a `<label>`),
+wrap it in a `LabeledField` component. The label will apply to the `SingleSelect`
+opener. With `LabeledField`, you can supply label text (or a JSX node)
+using the `label` prop to generate a paired `<label>` element. It comes with
+field validation and other features baked in!
+
+If for some reason you can't use `LabeledField` for a visible label, you can still
+make `SingleSelect` accessible in a screen reader by associating it with `<label for="">`.
+Pass the `id` of the `SingleSelect` to the `for` attribute.
+
+Alternatively, you can create an accessible name for `SingleSelect` using `aria-labelledby`.
+Put `aria-labelledby` on `SingleSelect` pointing to the `id` of any other element.
+It won't give you the same enhanced click target as a paired `<label>`, but it still
+helps to create a more accessible experience.
 
 <Canvas of={SingleSelectAccessibilityStories.UsingAriaAttributes} />
+
+## Using `aria-label` for the opener and/or child options
+
+A visible label with `<LabeledField>` is preferred. However, for specific cases
+where the `SingleSelect` is not paired with a `LabeledField` or other
+visible `<label>` element, you **must** supply an `aria-label` attribute
+for an accessible name on the opener.
+
+This will ensure the `SingleSelect` has a name that describes its purpose.
+
+For example, an `aria-label` for `SingleSelect` in a compact UI could be "Division"
+while its value would be one of the selected options, such as specific division names.
+It might also have a placeholder such as "e.g., Division I (D1)", which would go away
+when the user selected an option.
+
+Also, if you need screen readers to understand relevant information on
+option items, you can use `aria-label` on each item. e.g. You can use it to let
+screen readers know the current selected/unselected status of the item when it
+receives focus. This can be useful when the options contain icons or other information
+that would need to be omitted from the visible label.
+
+<Canvas of={SingleSelectAccessibilityStories.UsingOpenerAriaLabel} />
diff --git a/__docs__/wonder-blocks-dropdown/single-select.accessibility.stories.tsx b/__docs__/wonder-blocks-dropdown/single-select.accessibility.stories.tsx
index 08b81b89bc..9fa9af7423 100644
--- a/__docs__/wonder-blocks-dropdown/single-select.accessibility.stories.tsx
+++ b/__docs__/wonder-blocks-dropdown/single-select.accessibility.stories.tsx
@@ -1,7 +1,9 @@
 import * as React from "react";
+import caretDown from "@phosphor-icons/core/regular/caret-down.svg";
 import {OptionItem, SingleSelect} from "@khanacademy/wonder-blocks-dropdown";
 import {View} from "@khanacademy/wonder-blocks-core";
-import {LabelLarge} from "@khanacademy/wonder-blocks-typography";
+import {LabeledField} from "@khanacademy/wonder-blocks-labeled-field";
+import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
 
 export default {
     title: "Packages / Dropdown / SingleSelect / Accessibility",
@@ -25,17 +27,32 @@ export default {
 
 const SingleSelectAccessibility = () => (
     <View>
-        <LabelLarge
-            tag="label"
-            id="label-for-single-select"
-            htmlFor="unique-single-select"
-        >
-            Associated label element
-        </LabelLarge>
+        <LabeledField
+            label="Associated label element"
+            field={
+                <SingleSelect
+                    placeholder="Accessible SingleSelect"
+                    selectedValue="one"
+                    onChange={() => {}}
+                >
+                    <OptionItem label="First element" value="one" />
+                    <OptionItem label="Second element" value="two" />
+                </SingleSelect>
+            }
+        />
+    </View>
+);
+
+export const UsingAriaAttributes = {
+    render: SingleSelectAccessibility.bind({}),
+    name: "Using LabeledField",
+};
+
+const SingleSelectAriaLabel = () => (
+    <View>
         <SingleSelect
-            aria-labelledby="label-for-single-select"
-            id="unique-single-select"
-            placeholder="Accessible SingleSelect"
+            aria-label="Class options"
+            placeholder="Choose"
             selectedValue="one"
             onChange={() => {}}
         >
@@ -53,7 +70,88 @@ const SingleSelectAccessibility = () => (
     </View>
 );
 
-export const UsingAriaAttributes = {
-    render: SingleSelectAccessibility.bind({}),
-    name: "Using aria attributes",
+export const UsingOpenerAriaLabel = {
+    render: SingleSelectAriaLabel.bind({}),
+    name: "Using aria-label for opener",
+};
+
+const SingleSelectCustomOpenerLabeledField = () => {
+    return (
+        <View>
+            <LabeledField
+                label="Preferences"
+                field={
+                    <SingleSelect
+                        placeholder="Choose"
+                        onChange={() => {}}
+                        opener={(eventState: any) => (
+                            <button onClick={() => {}}>
+                                <PhosphorIcon icon={caretDown} size="medium" />
+                            </button>
+                        )}
+                    >
+                        <OptionItem label="item 1" value="1" />
+                        <OptionItem label="item 2" value="2" />
+                        <OptionItem label="item 3" value="3" />
+                    </SingleSelect>
+                }
+            />
+        </View>
+    );
+};
+
+export const UsingCustomOpenerLabeledField = {
+    render: SingleSelectCustomOpenerLabeledField.bind({}),
+    name: "Using custom opener in a LabeledField",
+};
+
+const SingleSelectCustomOpenerLabel = () => {
+    return (
+        <View>
+            <SingleSelect
+                placeholder="Choose"
+                onChange={() => {}}
+                opener={(eventState: any) => (
+                    <button aria-label="Preferences" onClick={() => {}}>
+                        <PhosphorIcon icon={caretDown} size="medium" />
+                    </button>
+                )}
+            >
+                <OptionItem label="item 1" value="1" />
+                <OptionItem label="item 2" value="2" />
+                <OptionItem label="item 3" value="3" />
+            </SingleSelect>
+        </View>
+    );
+};
+
+export const UsingCustomOpenerAriaLabel = {
+    render: SingleSelectCustomOpenerLabel.bind({}),
+    name: "Using aria-label on custom opener",
+};
+
+// This story exists for debugging automated unit tests.
+const SingleSelectKeyboardSelection = () => {
+    const [selectedValue, setSelectedValue] = React.useState("");
+    return (
+        <View>
+            <SingleSelect
+                placeholder="Choose"
+                onChange={setSelectedValue}
+                selectedValue={selectedValue}
+            >
+                <OptionItem label="apple" value="apple" />
+                <OptionItem label="orange" value="orange" />
+                <OptionItem label="pear" value="pear" />
+            </SingleSelect>
+        </View>
+    );
+};
+
+export const UsingKeyboardSelection = {
+    render: SingleSelectKeyboardSelection.bind({}),
+    name: "Using the keyboard",
+    parameters: {
+        chromatic: {disableSnapshot: true},
+    },
 };
diff --git a/__docs__/wonder-blocks-dropdown/single-select.stories.tsx b/__docs__/wonder-blocks-dropdown/single-select.stories.tsx
index 0c0a1c77fa..96f921ac6c 100644
--- a/__docs__/wonder-blocks-dropdown/single-select.stories.tsx
+++ b/__docs__/wonder-blocks-dropdown/single-select.stories.tsx
@@ -21,7 +21,7 @@ import {
     SeparatorItem,
 } from "@khanacademy/wonder-blocks-dropdown";
 
-import type {SingleSelectLabels} from "@khanacademy/wonder-blocks-dropdown";
+import type {SingleSelectLabelsValues} from "@khanacademy/wonder-blocks-dropdown";
 import packageConfig from "../../packages/wonder-blocks-dropdown/package.json";
 
 import ComponentInfo from "../components/component-info";
@@ -797,7 +797,7 @@ export const CustomLabels: StoryComponentType = {
         const [value, setValue] = React.useState<any>(null);
         const [opened, setOpened] = React.useState(true);
 
-        const translatedLabels: SingleSelectLabels = {
+        const translatedLabels: SingleSelectLabelsValues = {
             clearSearch: "Limpiar busqueda",
             filter: "Filtrar",
             noResults: "Sin resultados",
diff --git a/packages/wonder-blocks-clickable/src/components/__tests__/clickable-behavior.test.tsx b/packages/wonder-blocks-clickable/src/components/__tests__/clickable-behavior.test.tsx
index 774126f502..16e1fed0f8 100644
--- a/packages/wonder-blocks-clickable/src/components/__tests__/clickable-behavior.test.tsx
+++ b/packages/wonder-blocks-clickable/src/components/__tests__/clickable-behavior.test.tsx
@@ -4,17 +4,12 @@ import * as React from "react";
 import {render, screen, fireEvent, waitFor} from "@testing-library/react";
 import {MemoryRouter, Switch, Route} from "react-router-dom";
 import {userEvent} from "@testing-library/user-event";
+import {keys} from "@khanacademy/wonder-blocks-core";
 
 import getClickableBehavior from "../../util/get-clickable-behavior";
 import ClickableBehavior from "../clickable-behavior";
 import type {ClickableState} from "../clickable-behavior";
 
-const keyCodes = {
-    tab: 9,
-    enter: 13,
-    space: 32,
-} as const;
-
 const labelForState = (state: ClickableState): string => {
     const labels: Array<any> = [];
     if (state.hovered) {
@@ -195,8 +190,8 @@ describe("ClickableBehavior", () => {
         );
         const button = await screen.findByRole("button");
         expect(button).not.toHaveTextContent("focused");
-        fireEvent.keyDown(button, {keyCode: keyCodes.space});
-        fireEvent.keyUp(button, {keyCode: keyCodes.space});
+        fireEvent.keyDown(button, {key: keys.space});
+        fireEvent.keyUp(button, {key: keys.space});
         // NOTE(kevinb): await userEvent.click() fires other events that we don't want
         // affecting this test case.
         fireEvent.click(button);
@@ -219,8 +214,8 @@ describe("ClickableBehavior", () => {
         );
         const button = await screen.findByRole("button");
         expect(button).not.toHaveTextContent("focused");
-        fireEvent.keyDown(button, {keyCode: keyCodes.space});
-        fireEvent.keyUp(button, {keyCode: keyCodes.space});
+        await userEvent.tab();
+        await userEvent.keyboard(" ");
         // NOTE(kevinb): await userEvent.click() fires other events that we don't want
         // affecting this test case.
         fireEvent.click(button);
@@ -244,14 +239,14 @@ describe("ClickableBehavior", () => {
         );
         const button = await screen.findByRole("button");
         expect(button).not.toHaveTextContent("pressed");
-        fireEvent.keyDown(button, {keyCode: keyCodes.space});
+        fireEvent.keyDown(button, {key: keys.space});
         expect(button).toHaveTextContent("pressed");
-        fireEvent.keyUp(button, {keyCode: keyCodes.space});
+        fireEvent.keyUp(button, {key: keys.space});
         expect(button).not.toHaveTextContent("pressed");
 
-        fireEvent.keyDown(button, {keyCode: keyCodes.enter});
+        fireEvent.keyDown(button, {key: keys.enter});
         expect(button).toHaveTextContent("pressed");
-        fireEvent.keyUp(button, {keyCode: keyCodes.enter});
+        fireEvent.keyUp(button, {key: keys.enter});
         expect(button).not.toHaveTextContent("pressed");
     });
 
@@ -280,14 +275,14 @@ describe("ClickableBehavior", () => {
         );
         const link = await screen.findByRole("link");
         expect(link).not.toHaveTextContent("pressed");
-        fireEvent.keyDown(link, {keyCode: keyCodes.enter});
+        fireEvent.keyDown(link, {key: keys.enter});
         expect(link).toHaveTextContent("pressed");
-        fireEvent.keyUp(link, {keyCode: keyCodes.enter});
+        fireEvent.keyUp(link, {key: keys.enter});
         expect(link).not.toHaveTextContent("pressed");
 
-        fireEvent.keyDown(link, {keyCode: keyCodes.space});
+        fireEvent.keyDown(link, {key: keys.space});
         expect(link).not.toHaveTextContent("pressed");
-        fireEvent.keyUp(link, {keyCode: keyCodes.space});
+        fireEvent.keyUp(link, {key: keys.space});
         expect(link).not.toHaveTextContent("pressed");
     });
 
@@ -462,19 +457,19 @@ describe("ClickableBehavior", () => {
 
         expect(button).not.toHaveTextContent("focused");
         fireEvent.keyUp(button, {
-            keyCode: keyCodes.tab,
+            key: keys.tab,
         });
         expect(button).not.toHaveTextContent("focused");
-        fireEvent.keyDown(button, {keyCode: keyCodes.tab});
+        fireEvent.keyDown(button, {key: keys.tab});
         expect(button).not.toHaveTextContent("focused");
 
         expect(button).not.toHaveTextContent("pressed");
-        fireEvent.keyDown(button, {keyCode: keyCodes.space});
+        fireEvent.keyDown(button, {key: keys.space});
         expect(button).not.toHaveTextContent("pressed");
-        fireEvent.keyUp(button, {keyCode: keyCodes.space});
+        fireEvent.keyUp(button, {key: keys.space});
         expect(button).not.toHaveTextContent("pressed");
 
-        fireEvent.keyDown(button, {keyCode: keyCodes.space});
+        fireEvent.keyDown(button, {key: keys.space});
         fireEvent.blur(button);
         expect(button).not.toHaveTextContent("pressed");
 
@@ -501,9 +496,9 @@ describe("ClickableBehavior", () => {
 
         const anchor = await screen.findByRole("link");
         expect(anchor).not.toHaveTextContent("pressed");
-        fireEvent.keyDown(anchor, {keyCode: keyCodes.enter});
+        fireEvent.keyDown(anchor, {key: keys.enter});
         expect(anchor).not.toHaveTextContent("pressed");
-        fireEvent.keyUp(anchor, {keyCode: keyCodes.enter});
+        fireEvent.keyUp(anchor, {key: keys.enter});
         expect(anchor).not.toHaveTextContent("pressed");
     });
 
@@ -525,16 +520,16 @@ describe("ClickableBehavior", () => {
         await userEvent.click(button);
         expect(onClick).toHaveBeenCalledTimes(1);
 
-        fireEvent.keyDown(button, {keyCode: keyCodes.space});
-        fireEvent.keyUp(button, {keyCode: keyCodes.space});
+        fireEvent.keyDown(button, {key: keys.space});
+        fireEvent.keyUp(button, {key: keys.space});
         expect(onClick).toHaveBeenCalledTimes(2);
 
-        fireEvent.keyDown(button, {keyCode: keyCodes.enter});
-        fireEvent.keyUp(button, {keyCode: keyCodes.enter});
+        fireEvent.keyDown(button, {key: keys.enter});
+        fireEvent.keyUp(button, {key: keys.enter});
         expect(onClick).toHaveBeenCalledTimes(3);
 
-        fireEvent.touchStart(button, {keyCode: keyCodes.space});
-        fireEvent.touchEnd(button, {keyCode: keyCodes.space});
+        fireEvent.touchStart(button, {key: keys.space});
+        fireEvent.touchEnd(button, {key: keys.space});
         fireEvent.click(button);
         expect(onClick).toHaveBeenCalledTimes(4);
     });
@@ -600,21 +595,21 @@ describe("ClickableBehavior", () => {
             const link = await screen.findByRole("link");
 
             // Space press should not trigger the onClick
-            fireEvent.keyDown(link, {keyCode: keyCodes.space});
-            fireEvent.keyUp(link, {keyCode: keyCodes.space});
+            fireEvent.keyDown(link, {key: keys.space});
+            fireEvent.keyUp(link, {key: keys.space});
             expect(onClick).toHaveBeenCalledTimes(0);
 
             // Navigation didn't happen with space
             expect(window.location.assign).toHaveBeenCalledTimes(0);
 
             // Enter press should trigger the onClick after keyup
-            fireEvent.keyDown(link, {keyCode: keyCodes.enter});
+            fireEvent.keyDown(link, {key: keys.enter});
             expect(onClick).toHaveBeenCalledTimes(0);
 
             // Navigation doesn't happen until after enter is released
             expect(window.location.assign).toHaveBeenCalledTimes(0);
 
-            fireEvent.keyUp(link, {keyCode: keyCodes.enter});
+            fireEvent.keyUp(link, {key: keys.enter});
             expect(onClick).toHaveBeenCalledTimes(1);
 
             // Navigation happened after enter click
@@ -730,14 +725,14 @@ describe("ClickableBehavior", () => {
 
         // Enter press should not do anything
         const checkbox = await screen.findByRole("checkbox");
-        fireEvent.keyDown(checkbox, {keyCode: keyCodes.enter});
+        fireEvent.keyDown(checkbox, {key: keys.enter});
         expect(onClick).toHaveBeenCalledTimes(0);
-        fireEvent.keyUp(checkbox, {keyCode: keyCodes.enter});
+        fireEvent.keyUp(checkbox, {key: keys.enter});
         expect(onClick).toHaveBeenCalledTimes(0);
 
         // Space press should trigger the onClick
-        fireEvent.keyDown(checkbox, {keyCode: keyCodes.space});
-        fireEvent.keyUp(checkbox, {keyCode: keyCodes.space});
+        fireEvent.keyDown(checkbox, {key: keys.space});
+        fireEvent.keyUp(checkbox, {key: keys.space});
         expect(onClick).toHaveBeenCalledTimes(1);
     });
 
@@ -757,15 +752,15 @@ describe("ClickableBehavior", () => {
 
         // Enter press
         const button = await screen.findByRole("button");
-        fireEvent.keyDown(button, {keyCode: keyCodes.enter});
+        fireEvent.keyDown(button, {key: keys.enter});
         expect(onClick).toHaveBeenCalledTimes(0);
-        fireEvent.keyUp(button, {keyCode: keyCodes.enter});
+        fireEvent.keyUp(button, {key: keys.enter});
         expect(onClick).toHaveBeenCalledTimes(1);
 
         // Space press
-        fireEvent.keyDown(button, {keyCode: keyCodes.space});
+        fireEvent.keyDown(button, {key: keys.space});
         expect(onClick).toHaveBeenCalledTimes(1);
-        fireEvent.keyUp(button, {keyCode: keyCodes.space});
+        fireEvent.keyUp(button, {key: keys.space});
         expect(onClick).toHaveBeenCalledTimes(2);
     });
 
@@ -794,10 +789,10 @@ describe("ClickableBehavior", () => {
         }
 
         // Enter press on a div
-        fireEvent.keyDown(clickableDiv, {keyCode: keyCodes.enter});
+        fireEvent.keyDown(clickableDiv, {key: keys.enter});
         expect(onClick).toHaveBeenCalledTimes(expectedNumberTimesCalled);
         fireEvent.keyUp(clickableDiv, {
-            keyCode: keyCodes.enter,
+            key: keys.enter,
         });
         expectedNumberTimesCalled += 1;
         expect(onClick).toHaveBeenCalledTimes(expectedNumberTimesCalled);
@@ -808,9 +803,9 @@ describe("ClickableBehavior", () => {
         expect(onClick).toHaveBeenCalledTimes(expectedNumberTimesCalled);
 
         // Space press on a div
-        fireEvent.keyDown(clickableDiv, {keyCode: keyCodes.space});
+        fireEvent.keyDown(clickableDiv, {key: keys.space});
         expect(onClick).toHaveBeenCalledTimes(expectedNumberTimesCalled);
-        fireEvent.keyUp(clickableDiv, {keyCode: keyCodes.space});
+        fireEvent.keyUp(clickableDiv, {key: keys.space});
         expectedNumberTimesCalled += 1;
         expect(onClick).toHaveBeenCalledTimes(expectedNumberTimesCalled);
 
@@ -885,10 +880,10 @@ describe("ClickableBehavior", () => {
 
         const checkbox = await screen.findByRole("checkbox");
         // Enter press should not do anything
-        fireEvent.keyDown(checkbox, {keyCode: keyCodes.enter});
+        fireEvent.keyDown(checkbox, {key: keys.enter});
         // This element still wants to have a click on enter press
         fireEvent.click(checkbox);
-        fireEvent.keyUp(checkbox, {keyCode: keyCodes.enter});
+        fireEvent.keyUp(checkbox, {key: keys.enter});
         expect(onClick).toHaveBeenCalledTimes(0);
     });
 
diff --git a/packages/wonder-blocks-clickable/src/components/clickable-behavior.ts b/packages/wonder-blocks-clickable/src/components/clickable-behavior.ts
index da76b31338..aea9e7d5e3 100644
--- a/packages/wonder-blocks-clickable/src/components/clickable-behavior.ts
+++ b/packages/wonder-blocks-clickable/src/components/clickable-behavior.ts
@@ -1,4 +1,5 @@
 import * as React from "react";
+import {keys} from "@khanacademy/wonder-blocks-core";
 
 // NOTE: Potentially add to this as more cases come up.
 export type ClickableRole =
@@ -229,11 +230,6 @@ const disabledHandlers = {
     onKeyUp: () => void 0,
 } as const;
 
-const keyCodes = {
-    enter: 13,
-    space: 32,
-} as const;
-
 const startState: ClickableState = {
     hovered: false,
     focused: false,
@@ -560,13 +556,12 @@ export default class ClickableBehavior extends React.Component<
         if (onKeyDown) {
             onKeyDown(e);
         }
-
-        const keyCode = e.which || e.keyCode;
+        const keyName = e.key;
         const {triggerOnEnter, triggerOnSpace} =
             getAppropriateTriggersForRole(role);
         if (
-            (triggerOnEnter && keyCode === keyCodes.enter) ||
-            (triggerOnSpace && keyCode === keyCodes.space)
+            (triggerOnEnter && keyName === keys.enter) ||
+            (triggerOnSpace && keyName === keys.space)
         ) {
             // This prevents space from scrolling down. It also prevents the
             // space and enter keys from triggering click events. We manually
@@ -574,7 +569,7 @@ export default class ClickableBehavior extends React.Component<
             // handleKeyUp instead.
             e.preventDefault();
             this.setState({pressed: true});
-        } else if (!triggerOnEnter && keyCode === keyCodes.enter) {
+        } else if (!triggerOnEnter && keyName === keys.enter) {
             // If the component isn't supposed to trigger on enter, we have to
             // keep track of the enter keydown to negate the onClick callback
             this.enterClick = true;
@@ -587,17 +582,17 @@ export default class ClickableBehavior extends React.Component<
             onKeyUp(e);
         }
 
-        const keyCode = e.which || e.keyCode;
+        const keyName = e.key;
         const {triggerOnEnter, triggerOnSpace} =
             getAppropriateTriggersForRole(role);
         if (
-            (triggerOnEnter && keyCode === keyCodes.enter) ||
-            (triggerOnSpace && keyCode === keyCodes.space)
+            (triggerOnEnter && keyName === keys.enter) ||
+            (triggerOnSpace && keyName === keys.space)
         ) {
             this.setState({pressed: false, focused: true});
 
             this.runCallbackAndMaybeNavigate(e);
-        } else if (!triggerOnEnter && keyCode === keyCodes.enter) {
+        } else if (!triggerOnEnter && keyName === keys.enter) {
             this.enterClick = false;
         }
     };
diff --git a/packages/wonder-blocks-core/src/index.ts b/packages/wonder-blocks-core/src/index.ts
index be714657cb..758a117a7c 100644
--- a/packages/wonder-blocks-core/src/index.ts
+++ b/packages/wonder-blocks-core/src/index.ts
@@ -15,3 +15,4 @@ export {RenderStateRoot} from "./components/render-state-root";
 export {RenderState} from "./components/render-state-context";
 export type {AriaRole, AriaAttributes} from "./util/aria-types";
 export type {AriaProps, StyleType, PropsFor} from "./util/types";
+export {keys} from "./util/keys";
diff --git a/packages/wonder-blocks-core/src/util/keys.ts b/packages/wonder-blocks-core/src/util/keys.ts
new file mode 100644
index 0000000000..d953433cfe
--- /dev/null
+++ b/packages/wonder-blocks-core/src/util/keys.ts
@@ -0,0 +1,12 @@
+/**
+ * Key value mapping reference:
+ * https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values
+ */
+export const keys = {
+    enter: "Enter",
+    escape: "Escape",
+    tab: "Tab",
+    space: " ",
+    up: "ArrowUp",
+    down: "ArrowDown",
+} as const;
diff --git a/packages/wonder-blocks-dropdown/src/components/__tests__/action-menu.test.tsx b/packages/wonder-blocks-dropdown/src/components/__tests__/action-menu.test.tsx
index 61388ddaa0..b994240c3c 100644
--- a/packages/wonder-blocks-dropdown/src/components/__tests__/action-menu.test.tsx
+++ b/packages/wonder-blocks-dropdown/src/components/__tests__/action-menu.test.tsx
@@ -38,9 +38,7 @@ describe("ActionMenu", () => {
         ).toBeInTheDocument();
     });
 
-    // TODO(FEI-5533): Key press events aren't working correctly with
-    // user-event v14. We need to investigate and fix this.
-    it.skip("opens the menu on enter", async () => {
+    it("opens the menu on enter", async () => {
         // Arrange
         render(
             <ActionMenu
@@ -57,7 +55,7 @@ describe("ActionMenu", () => {
 
         // Act
         await userEvent.tab();
-        await userEvent.keyboard("{enter}");
+        await userEvent.keyboard("{Enter}");
 
         // Assert
         expect(
@@ -65,9 +63,7 @@ describe("ActionMenu", () => {
         ).toBeInTheDocument();
     });
 
-    // TODO(FEI-5533): Key press events aren't working correctly with
-    // user-event v14. We need to investigate and fix this.
-    it.skip("closes itself on escape", async () => {
+    it("closes itself on escape", async () => {
         // Arrange
         render(
             <ActionMenu
@@ -83,18 +79,16 @@ describe("ActionMenu", () => {
         );
 
         await userEvent.tab();
-        await userEvent.keyboard("{enter}");
+        await userEvent.keyboard("{Enter}");
 
         // Act
-        await userEvent.keyboard("{escape}");
+        await userEvent.keyboard("{Escape}");
 
         // Assert
         expect(screen.queryByRole("menu")).not.toBeInTheDocument();
     });
 
-    // TODO(FEI-5533): Key press events aren't working correctly with
-    // user-event v14. We need to investigate and fix this.
-    it.skip("closes itself on tab", async () => {
+    it("closes itself on tab", async () => {
         // Arrange
         render(
             <ActionMenu
@@ -110,7 +104,7 @@ describe("ActionMenu", () => {
         );
 
         await userEvent.tab();
-        await userEvent.keyboard("{enter}");
+        await userEvent.keyboard("{Enter}");
 
         // Act
         await userEvent.tab();
@@ -523,7 +517,7 @@ describe("ActionMenu", () => {
             expect(opener).not.toHaveAttribute("data-testid");
         });
 
-        it("passes the menu text to the custom opener", async () => {
+        it("passes the menu content to the custom opener", async () => {
             // Arrange
             render(
                 <ActionMenu
diff --git a/packages/wonder-blocks-dropdown/src/components/__tests__/combobox.test.tsx b/packages/wonder-blocks-dropdown/src/components/__tests__/combobox.test.tsx
index cb33014611..2c8e207f95 100644
--- a/packages/wonder-blocks-dropdown/src/components/__tests__/combobox.test.tsx
+++ b/packages/wonder-blocks-dropdown/src/components/__tests__/combobox.test.tsx
@@ -280,7 +280,7 @@ describe("Combobox", () => {
         await userEvent.type(screen.getByRole("combobox"), "3");
 
         // Act
-        await userEvent.keyboard("{enter}");
+        await userEvent.keyboard("{Enter}");
 
         // Assert
         expect(screen.getByRole("combobox")).toHaveValue("option 3");
diff --git a/packages/wonder-blocks-dropdown/src/components/__tests__/dropdown-core.test.tsx b/packages/wonder-blocks-dropdown/src/components/__tests__/dropdown-core.test.tsx
index 3f247da6fb..e54972b673 100644
--- a/packages/wonder-blocks-dropdown/src/components/__tests__/dropdown-core.test.tsx
+++ b/packages/wonder-blocks-dropdown/src/components/__tests__/dropdown-core.test.tsx
@@ -73,9 +73,7 @@ describe("DropdownCore", () => {
         expect(item).toHaveFocus();
     });
 
-    // TODO(FEI-5533): Key press events aren't working correctly with
-    // user-event v14. We need to investigate and fix this.
-    it.skip("handles basic keyboard navigation as expected", async () => {
+    it("handles basic keyboard navigation as expected", async () => {
         // Arrange
         const dummyOpener = <button />;
         const openChanged = jest.fn();
@@ -95,8 +93,8 @@ describe("DropdownCore", () => {
 
         // Act
         // navigate down two times
-        await userEvent.keyboard("{arrowdown}"); // 0 -> 1
-        await userEvent.keyboard("{arrowdown}"); // 1 -> 2
+        await userEvent.keyboard("{ArrowDown}"); // 0 -> 1
+        await userEvent.keyboard("{ArrowDown}"); // 1 -> 2
 
         // Assert
         expect(
@@ -104,9 +102,7 @@ describe("DropdownCore", () => {
         ).toHaveFocus();
     });
 
-    // TODO(FEI-5533): Key press events aren't working correctly with
-    // user-event v14. We need to investigate and fix this.
-    it.skip("keyboard works backwards as expected", async () => {
+    it("keyboard works backwards as expected", async () => {
         // Arrange
         render(
             <DropdownCore
@@ -124,13 +120,13 @@ describe("DropdownCore", () => {
 
         // Act
         // navigate down tree times
-        await userEvent.keyboard("{arrowdown}"); // 0 -> 1
-        await userEvent.keyboard("{arrowdown}"); // 1 -> 2
-        await userEvent.keyboard("{arrowdown}"); // 2 -> 0
+        await userEvent.keyboard("{ArrowDown}"); // 0 -> 1
+        await userEvent.keyboard("{ArrowDown}"); // 1 -> 2
+        await userEvent.keyboard("{ArrowDown}"); // 2 -> 0
 
         // navigate up back two times
-        await userEvent.keyboard("{arrowup}"); // 0 -> 2
-        await userEvent.keyboard("{arrowup}"); // 2 -> 1
+        await userEvent.keyboard("{ArrowUp}"); // 0 -> 2
+        await userEvent.keyboard("{ArrowUp}"); // 2 -> 1
 
         // Assert
         expect(
@@ -138,9 +134,7 @@ describe("DropdownCore", () => {
         ).toHaveFocus();
     });
 
-    // TODO(FEI-5533): Key press events aren't working correctly with
-    // user-event v14. We need to investigate and fix this.
-    it.skip("keyboard works backwards with the search field included", async () => {
+    it("keyboard works backwards with the search field included", async () => {
         // Arrange
         render(
             <DropdownCore
@@ -160,15 +154,15 @@ describe("DropdownCore", () => {
 
         // Act
         // navigate down four times
-        await userEvent.keyboard("{arrowdown}"); // 0 -> 1
-        await userEvent.keyboard("{arrowdown}"); // 1 -> 2
-        await userEvent.keyboard("{arrowdown}"); // 2 -> search field
-        await userEvent.keyboard("{arrowdown}"); // search field -> 0
+        await userEvent.keyboard("{ArrowDown}"); // 0 -> 1
+        await userEvent.keyboard("{ArrowDown}"); // 1 -> 2
+        await userEvent.keyboard("{ArrowDown}"); // 2 -> search field
+        await userEvent.keyboard("{ArrowDown}"); // search field -> 0
 
         // navigate up back three times
-        await userEvent.keyboard("{arrowup}"); // 0 -> search field
-        await userEvent.keyboard("{arrowup}"); // search field -> 2
-        await userEvent.keyboard("{arrowup}"); // 2 -> 1
+        await userEvent.keyboard("{ArrowUp}"); // 0 -> search field
+        await userEvent.keyboard("{ArrowUp}"); // search field -> 2
+        await userEvent.keyboard("{ArrowUp}"); // 2 -> 1
 
         // Assert
         expect(
@@ -179,7 +173,7 @@ describe("DropdownCore", () => {
     // NOTE(john): This fails after upgrading to user-event v14, it's not clear
     // what's wrong exactly, but tabbing no longer triggers the change, which
     // makes me think that the initial focus is different now.
-    it.skip("closes on tab as expected", async () => {
+    it("closes on tab as expected", async () => {
         // Arrange
         const handleOpenChangedMock = jest.fn();
 
@@ -204,9 +198,7 @@ describe("DropdownCore", () => {
         expect(handleOpenChangedMock).toHaveBeenNthCalledWith(1, false);
     });
 
-    // TODO(FEI-5533): Key press events aren't working correctly with
-    // user-event v14. We need to investigate and fix this.
-    it.skip("closes on escape as expected", async () => {
+    it("closes on escape as expected", async () => {
         // Arrange
         const handleOpenChangedMock = jest.fn();
 
@@ -225,7 +217,7 @@ describe("DropdownCore", () => {
 
         // Act
         // close the dropdown by pressing "Escape"
-        await userEvent.keyboard("{escape}");
+        await userEvent.keyboard("{Escape}");
 
         // Assert
         expect(handleOpenChangedMock).toHaveBeenNthCalledWith(1, false);
@@ -284,9 +276,7 @@ describe("DropdownCore", () => {
         expect(handleOpenChangedMock).toHaveBeenCalledTimes(0);
     });
 
-    // TODO(FEI-5533): Key press events aren't working correctly with
-    // user-event v14. We need to investigate and fix this.
-    it.skip("opens on down key as expected", async () => {
+    it("opens on down key as expected", async () => {
         // Arrange
         const handleOpenChangedMock = jest.fn();
         const opener = <button data-testid="opener" />;
@@ -308,7 +298,7 @@ describe("DropdownCore", () => {
         openerElement.focus();
 
         // Act
-        await userEvent.keyboard("{arrowdown}");
+        await userEvent.keyboard("{ArrowDown}");
 
         // Assert
         expect(handleOpenChangedMock).toHaveBeenNthCalledWith(1, true);
@@ -374,9 +364,7 @@ describe("DropdownCore", () => {
         expect(firstItem).toHaveFocus();
     });
 
-    // TODO(FEI-5533): Key press events aren't working correctly with
-    // user-event v14. We need to investigate and fix this.
-    it.skip("selects correct item when starting off at a different index", async () => {
+    it("selects correct item when starting off at a different index", async () => {
         // Arrange
         render(
             <DropdownCore
@@ -393,7 +381,7 @@ describe("DropdownCore", () => {
 
         // Act
         // navigate down
-        await userEvent.keyboard("{arrowdown}"); // 2 -> 0
+        await userEvent.keyboard("{ArrowDown}"); // 2 -> 0
 
         // Assert
         expect(
@@ -401,9 +389,7 @@ describe("DropdownCore", () => {
         ).toHaveFocus();
     });
 
-    // TODO(FEI-5533): Key press events aren't working correctly with
-    // user-event v14. We need to investigate and fix this.
-    it.skip("focuses correct item with clicking/pressing with initial focused of not 0", async () => {
+    it("focuses correct item with clicking/pressing with initial focused of not 0", async () => {
         // Arrange
         render(
             <DropdownCore
@@ -423,7 +409,7 @@ describe("DropdownCore", () => {
             await screen.findByRole("option", {name: "item 1"}),
         );
         // navigate down
-        await userEvent.keyboard("{arrowdown}"); // 1 -> 2
+        await userEvent.keyboard("{ArrowDown}"); // 1 -> 2
 
         // Assert
         expect(
@@ -431,9 +417,7 @@ describe("DropdownCore", () => {
         ).toHaveFocus();
     });
 
-    // TODO(FEI-5533): Key press events aren't working correctly with
-    // user-event v14. We need to investigate and fix this.
-    it.skip("focuses correct item with a disabled item", async () => {
+    it("focuses correct item with a disabled item", async () => {
         // Arrange
         render(
             <DropdownCore
@@ -477,7 +461,7 @@ describe("DropdownCore", () => {
 
         // Act
         // navigate down
-        await userEvent.keyboard("{arrowdown}"); // 0 -> 2 (1 is disabled)
+        await userEvent.keyboard("{ArrowDown}"); // 0 -> 2 (1 is disabled)
 
         // Assert
         expect(
diff --git a/packages/wonder-blocks-dropdown/src/components/__tests__/multi-select.test.tsx b/packages/wonder-blocks-dropdown/src/components/__tests__/multi-select.test.tsx
index 31b06b4bf3..7bca27f4af 100644
--- a/packages/wonder-blocks-dropdown/src/components/__tests__/multi-select.test.tsx
+++ b/packages/wonder-blocks-dropdown/src/components/__tests__/multi-select.test.tsx
@@ -19,7 +19,7 @@ import OptionItem from "../option-item";
 import MultiSelect from "../multi-select";
 import {defaultLabels as builtinLabels} from "../../util/constants";
 
-import type {Labels} from "../multi-select";
+import type {LabelsValues} from "../multi-select";
 
 const doRender = (element: React.ReactElement) => {
     return {
@@ -31,7 +31,7 @@ const doRender = (element: React.ReactElement) => {
     };
 };
 
-const defaultLabels: Labels = {
+const defaultLabels: LabelsValues = {
     ...builtinLabels,
     selectAllLabel: (numOptions: any) => `Select all (${numOptions})`,
     noneSelected: "Choose",
@@ -77,7 +77,7 @@ describe("MultiSelect", () => {
             const {userEvent} = doRender(uncontrolledMultiSelect);
 
             // Act
-            await userEvent.click(await screen.findByRole("button"));
+            await userEvent.click(await screen.findByRole("combobox"));
 
             // Assert
             expect(
@@ -85,17 +85,15 @@ describe("MultiSelect", () => {
             ).toBeInTheDocument();
         });
 
-        // TODO(FEI-5533): Key press events aren't working correctly with
-        // user-event v14. We need to investigate and fix this.
-        it.skip("closes the select on {escape}", async () => {
+        it("closes the select on {Escape}", async () => {
             // Arrange
             const {userEvent} = doRender(uncontrolledMultiSelect);
 
             await userEvent.tab();
-            await userEvent.keyboard("{enter}"); // open
+            await userEvent.keyboard("{Enter}"); // open
 
             // Act
-            await userEvent.keyboard("{escape}");
+            await userEvent.keyboard("{Escape}");
 
             // Assert
             expect(onChange).not.toHaveBeenCalled();
@@ -109,7 +107,7 @@ describe("MultiSelect", () => {
             doRender(uncontrolledMultiSelect);
 
             // Act
-            const opener = await screen.findByRole("button");
+            const opener = await screen.findByRole("combobox");
 
             // Assert
             // No items are selected, display placeholder because there is one
@@ -133,7 +131,7 @@ describe("MultiSelect", () => {
             );
 
             // Assert
-            expect(await screen.findByRole("button")).toHaveTextContent(
+            expect(await screen.findByRole("combobox")).toHaveTextContent(
                 "item 1",
             );
         });
@@ -155,7 +153,7 @@ describe("MultiSelect", () => {
             );
 
             // Assert
-            expect(await screen.findByRole("button")).toHaveTextContent(
+            expect(await screen.findByRole("combobox")).toHaveTextContent(
                 "1 student",
             );
         });
@@ -177,7 +175,7 @@ describe("MultiSelect", () => {
             );
 
             // Assert
-            expect(await screen.findByRole("button")).toHaveTextContent(
+            expect(await screen.findByRole("combobox")).toHaveTextContent(
                 "Choose",
             );
         });
@@ -200,7 +198,7 @@ describe("MultiSelect", () => {
 
             // Assert
             // More than one item is selected, display n itemTypes
-            expect(await screen.findByRole("button")).toHaveTextContent(
+            expect(await screen.findByRole("combobox")).toHaveTextContent(
                 "2 students",
             );
         });
@@ -223,7 +221,7 @@ describe("MultiSelect", () => {
 
             // Assert
             // All items are selected
-            expect(await screen.findByRole("button")).toHaveTextContent(
+            expect(await screen.findByRole("combobox")).toHaveTextContent(
                 "All students",
             );
         });
@@ -246,7 +244,7 @@ describe("MultiSelect", () => {
             );
 
             // Assert
-            expect(await screen.findByRole("button")).toHaveTextContent(
+            expect(await screen.findByRole("combobox")).toHaveTextContent(
                 "All students",
             );
         });
@@ -265,7 +263,7 @@ describe("MultiSelect", () => {
             );
 
             // Act
-            const opener = await screen.findByRole("button");
+            const opener = await screen.findByRole("combobox");
 
             // Assert
             expect(opener).toHaveAttribute("data-testid", "some-test-id");
@@ -286,12 +284,49 @@ describe("MultiSelect", () => {
             );
 
             // Act
-            const opener = await screen.findByRole("button");
+            const opener = await screen.findByRole("combobox");
             const menuLabel = within(opener).getByText("custom item 1");
 
             // Assert
             expect(menuLabel).toBeVisible();
         });
+
+        it("applies an aria-label to the opener", async () => {
+            doRender(
+                <MultiSelect onChange={jest.fn()} aria-label="Select a school">
+                    <OptionItem label="school 1" value="1" />
+                    <OptionItem label="school 2" value="2" />
+                    <OptionItem label="school 3" value="3" />
+                </MultiSelect>,
+            );
+
+            // Act
+            const opener = await screen.findByRole("combobox");
+
+            // Assert
+            expect(opener).toHaveAccessibleName("Select a school");
+        });
+
+        it("keeps the original aria-label when items are selected", async () => {
+            doRender(
+                <MultiSelect
+                    onChange={jest.fn()}
+                    selectedValues={["1", "2"]}
+                    labels={defaultLabels}
+                    aria-label="Select a school"
+                >
+                    <OptionItem label="school 1" value="1" />
+                    <OptionItem label="school 2" value="2" />
+                    <OptionItem label="school 3" value="3" />
+                </MultiSelect>,
+            );
+
+            // Act
+            const opener = await screen.findByRole("combobox");
+
+            // Assert
+            expect(opener).toHaveAccessibleName("Select a school");
+        });
     });
 
     describe("Controlled component", () => {
@@ -301,7 +336,7 @@ describe("MultiSelect", () => {
             shortcuts?: boolean;
         };
 
-        const labels: Labels = {
+        const labels: LabelsValues = {
             ...builtinLabels,
             selectAllLabel: (numOptions: any) => `Select all (${numOptions})`,
             allSelected: "All fruits",
@@ -432,7 +467,7 @@ describe("MultiSelect", () => {
             ).not.toBeInTheDocument();
         });
 
-        // NOTE(john): After upgrading to user-event v14 this test is failing.
+        // NOTE(john) FEI-5533: After upgrading to user-event v14 this test is failing.
         // We are unale to find the option with the specified text, even though
         // it exists in the document.
         it.skip("selects on item as expected", async () => {
@@ -552,7 +587,7 @@ describe("MultiSelect", () => {
 
             const {userEvent} = doRender(<ControlledMultiSelect />);
 
-            const opener = await screen.findByRole("button");
+            const opener = await screen.findByRole("combobox");
             await userEvent.click(opener);
 
             // Act
@@ -625,7 +660,7 @@ describe("MultiSelect", () => {
             // Arrange
             const {userEvent} = doRender(filterableMultiSelect);
             // open the dropdown menu
-            await userEvent.click(await screen.findByRole("button"));
+            await userEvent.click(await screen.findByRole("combobox"));
 
             // Act
             const searchInput = await screen.findByPlaceholderText("Filter");
@@ -638,7 +673,7 @@ describe("MultiSelect", () => {
             // Arrange
             const {userEvent} = doRender(filterableMultiSelect);
             // open the dropdown menu
-            await userEvent.click(await screen.findByRole("button"));
+            await userEvent.click(await screen.findByRole("combobox"));
 
             const searchInput = await screen.findByPlaceholderText("Filter");
 
@@ -655,7 +690,7 @@ describe("MultiSelect", () => {
             // Arrange
             const {userEvent} = doRender(filterableMultiSelect);
             // open the dropdown menu
-            await userEvent.click(await screen.findByRole("button"));
+            await userEvent.click(await screen.findByRole("combobox"));
 
             const searchInput = await screen.findByPlaceholderText("Filter");
 
@@ -686,7 +721,7 @@ describe("MultiSelect", () => {
 
             // Act
             // open the dropdown menu
-            await userEvent.click(await screen.findByRole("button"));
+            await userEvent.click(await screen.findByRole("combobox"));
 
             // Assert
             expect(
@@ -709,7 +744,7 @@ describe("MultiSelect", () => {
                 </MultiSelect>,
             );
             // open the dropdown menu
-            await userEvent.click(await screen.findByRole("button"));
+            await userEvent.click(await screen.findByRole("combobox"));
 
             const searchInput = await screen.findByPlaceholderText("Filter");
 
@@ -724,7 +759,7 @@ describe("MultiSelect", () => {
             // Arrange
             const {userEvent} = doRender(filterableMultiSelect);
             // open the dropdown menu
-            await userEvent.click(await screen.findByRole("button"));
+            await userEvent.click(await screen.findByRole("combobox"));
 
             // Act
             const searchInput = await screen.findByPlaceholderText("Filter");
@@ -751,7 +786,7 @@ describe("MultiSelect", () => {
 
             // Act
             // open the dropdown menu
-            await userEvent.click(await screen.findByRole("button"));
+            await userEvent.click(await screen.findByRole("combobox"));
 
             // Assert
             expect(
@@ -775,7 +810,7 @@ describe("MultiSelect", () => {
                 </MultiSelect>,
             );
 
-            await userEvent.click(await screen.findByRole("button"));
+            await userEvent.click(await screen.findByRole("combobox"));
 
             const searchInput = await screen.findByPlaceholderText("Filter");
             await userEvent.type(searchInput, "Item 2");
@@ -790,7 +825,7 @@ describe("MultiSelect", () => {
             expect(options[0]).toHaveTextContent("item 1");
         });
 
-        // NOTE(john): This isn't working after upgrading to user-event v14,
+        // NOTE(john) FEI-5533: This isn't working after upgrading to user-event v14,
         // the focus is moving to the body instead of the Clear search button.
         it.skip("should move focus to the dismiss button after pressing {tab} on the text input", async () => {
             // Arrange
@@ -807,7 +842,7 @@ describe("MultiSelect", () => {
                 </MultiSelect>,
             );
             // open the dropdown menu
-            await userEvent.click(await screen.findByRole("button"));
+            await userEvent.click(await screen.findByRole("combobox"));
 
             const searchInput = await screen.findByPlaceholderText("Filter");
             await userEvent.type(searchInput, "some text");
@@ -824,7 +859,7 @@ describe("MultiSelect", () => {
             // Arrange
             const {userEvent} = doRender(filterableMultiSelect);
             // open the dropdown menu
-            await userEvent.click(await screen.findByRole("button"));
+            await userEvent.click(await screen.findByRole("combobox"));
 
             const searchInput = await screen.findByPlaceholderText("Filter");
             await userEvent.type(searchInput, "Should be cleared");
@@ -842,7 +877,7 @@ describe("MultiSelect", () => {
             // Arrange
             const {userEvent} = doRender(filterableMultiSelect);
             // open the dropdown menu
-            const opener = await screen.findByRole("button");
+            const opener = await screen.findByRole("combobox");
             await userEvent.click(opener);
 
             const searchInput = await screen.findByPlaceholderText("Filter");
@@ -863,7 +898,7 @@ describe("MultiSelect", () => {
 
         it("should find an option after using the search filter", async () => {
             // Arrange
-            const labels: Labels = {
+            const labels: LabelsValues = {
                 ...builtinLabels,
                 someSelected: (numOptions: number): string =>
                     numOptions <= 1
@@ -893,11 +928,11 @@ describe("MultiSelect", () => {
             expect(filteredOption).toBeInTheDocument();
         });
 
-        // NOTE(john): After upgrading to user-event v14, this test is failing.
+        // NOTE(john) FEI-5533: After upgrading to user-event v14, this test is failing.
         // The Venus option is still in the document.
         it.skip("should filter out an option if it's not part of the results", async () => {
             // Arrange
-            const labels: Labels = {
+            const labels: LabelsValues = {
                 ...builtinLabels,
                 someSelected: (numOptions: number): string =>
                     numOptions <= 1
@@ -931,6 +966,53 @@ describe("MultiSelect", () => {
     });
 
     describe("Custom Opener", () => {
+        it("labels the custom opener with `aria-label` on MultiSelect", async () => {
+            // Arrange
+            doRender(
+                <MultiSelect
+                    aria-label="Search"
+                    onChange={jest.fn()}
+                    opener={(eventState: any) => <button onClick={jest.fn()} />}
+                >
+                    <OptionItem label="item 1" value="1" />
+                    <OptionItem label="item 2" value="2" />
+                    <OptionItem label="item 3" value="3" />
+                </MultiSelect>,
+            );
+
+            // Act
+            const opener = await screen.findByRole("combobox");
+
+            // Assert
+            expect(opener).toHaveAccessibleName("Search");
+        });
+
+        it("prioritizes `aria-label` on the custom opener", async () => {
+            // Arrange
+            doRender(
+                <MultiSelect
+                    aria-label="Not winning the label race"
+                    onChange={jest.fn()}
+                    opener={(eventState: any) => (
+                        <button
+                            aria-label="Search button"
+                            onClick={jest.fn()}
+                        />
+                    )}
+                >
+                    <OptionItem label="item 1" value="1" />
+                    <OptionItem label="item 2" value="2" />
+                    <OptionItem label="item 3" value="3" />
+                </MultiSelect>,
+            );
+
+            // Act
+            const opener = await screen.findByRole("combobox");
+
+            // Assert
+            expect(opener).toHaveAccessibleName("Search button");
+        });
+
         it("opens the menu when clicking on the custom opener", async () => {
             // Arrange
             const {userEvent} = doRender(
@@ -1029,9 +1111,9 @@ describe("MultiSelect", () => {
             expect(opener).not.toHaveAttribute("data-testid", "custom-opener");
         });
 
-        it("passes the current label to the custom opener (no items selected)", async () => {
+        it("passes the current value to the custom opener (no items selected)", async () => {
             // Arrange
-            const labels: Labels = {
+            const labels: LabelsValues = {
                 ...builtinLabels,
                 noneSelected: "No items selected",
             };
@@ -1060,7 +1142,7 @@ describe("MultiSelect", () => {
             expect(opener).toHaveTextContent("No items selected");
         });
 
-        it("passes the current label to the custom opener (1 item selected)", async () => {
+        it("passes the current value to the custom opener (1 item selected)", async () => {
             // Arrange
             const ControlledMultiSelect = () => {
                 const [selected, setSelected] = React.useState([]);
@@ -1101,7 +1183,7 @@ describe("MultiSelect", () => {
             expect(opener).toHaveTextContent("item 1");
         });
 
-        it("passes the current label to the custom opener (2 items selected)", async () => {
+        it("passes the current value to the custom opener (2 items selected)", async () => {
             // Arrange
             const ControlledMultiSelect = () => {
                 const [selected, setSelected] = React.useState([]);
@@ -1142,7 +1224,7 @@ describe("MultiSelect", () => {
             expect(opener).toHaveTextContent("2 items");
         });
 
-        it("passes the current label to the custom opener (all items selected)", async () => {
+        it("passes the current value to the custom opener (all items selected)", async () => {
             // Arrange
             const ControlledMultiSelect = () => {
                 const [selected, setSelected] = React.useState([]);
@@ -1185,10 +1267,10 @@ describe("MultiSelect", () => {
         });
     });
 
-    describe("Custom labels", () => {
-        it("passes the custom label to the opener", async () => {
+    describe("Custom labels and values", () => {
+        it("passes the custom value to the opener", async () => {
             // Arrange
-            const labels: Labels = {
+            const labels: LabelsValues = {
                 ...builtinLabels,
                 noneSelected: "0 escuelas",
             };
@@ -1213,7 +1295,7 @@ describe("MultiSelect", () => {
 
         it("passes the custom label to the opener (2 items selected)", async () => {
             // Arrange
-            const labels: Labels = {
+            const labels: LabelsValues = {
                 ...builtinLabels,
                 someSelected: (numSelectedValues: any) =>
                     `${numSelectedValues} escuelas`,
@@ -1238,9 +1320,9 @@ describe("MultiSelect", () => {
             expect(opener).toHaveTextContent("2 escuelas");
         });
 
-        it("passes the custom label to the opener (all items selected)", async () => {
+        it("passes the custom value to the opener (all items selected)", async () => {
             // Arrange
-            const labels: Labels = {
+            const labels: LabelsValues = {
                 ...builtinLabels,
                 allSelected: "Todas las escuelas",
             };
@@ -1266,7 +1348,7 @@ describe("MultiSelect", () => {
 
         it("passes the custom label to the dismiss icon", async () => {
             // Arrange
-            const labels: Labels = {
+            const labels: LabelsValues = {
                 ...builtinLabels,
                 clearSearch: "Limpiar busqueda",
             };
@@ -1303,7 +1385,7 @@ describe("MultiSelect", () => {
 
         it("passes the custom label to the search input field", async () => {
             // Arrange
-            const labels: Labels = {
+            const labels: LabelsValues = {
                 ...builtinLabels,
                 filter: "Filtrar",
             };
@@ -1331,9 +1413,9 @@ describe("MultiSelect", () => {
             expect(searchInput).toBeInTheDocument();
         });
 
-        it("passes the custom label to the no results label", async () => {
+        it("passes the custom value for no results", async () => {
             // Arrange
-            const labels: Labels = {
+            const labels: LabelsValues = {
                 ...builtinLabels,
                 noResults: "No hay resultados",
             };
@@ -1368,7 +1450,7 @@ describe("MultiSelect", () => {
 
         it("passes the custom label to the select all shortcut", async () => {
             // Arrange
-            const labels: Labels = {
+            const labels: LabelsValues = {
                 ...builtinLabels,
                 selectAllLabel: (numOptions: any) =>
                     `Seleccionar todas las escuelas (${numOptions})`,
@@ -1400,7 +1482,7 @@ describe("MultiSelect", () => {
 
         it("passes the custom label to the select none shortcut", async () => {
             // Arrange
-            const labels: Labels = {
+            const labels: LabelsValues = {
                 ...builtinLabels,
                 selectNoneLabel: "Deseleccionar todas las escuelas",
             };
@@ -1431,12 +1513,12 @@ describe("MultiSelect", () => {
 
         it("verifies a custom label is updated when props change", async () => {
             // Arrange
-            const initialLabels: Labels = {
+            const initialLabels: LabelsValues = {
                 ...defaultLabels,
                 selectNoneLabel: "Deseleccionar todas las escuelas",
             };
 
-            const TranslatedComponent = ({labels}: {labels: Labels}) => (
+            const TranslatedComponent = ({labels}: {labels: LabelsValues}) => (
                 <MultiSelect
                     onChange={jest.fn()}
                     isFilterable={true}
@@ -1454,7 +1536,7 @@ describe("MultiSelect", () => {
             );
 
             // update label value
-            const updatedLabels: Labels = {
+            const updatedLabels: LabelsValues = {
                 ...defaultLabels,
                 selectNoneLabel: "Ninguna seleccionada",
             };
@@ -1462,7 +1544,7 @@ describe("MultiSelect", () => {
             rerender(<TranslatedComponent labels={updatedLabels} />);
 
             // Act
-            const opener = await screen.findByRole("button");
+            const opener = await screen.findByRole("combobox");
             // open dropdown
             await userEvent.click(opener);
 
@@ -1511,7 +1593,7 @@ describe("MultiSelect", () => {
     describe("a11y > Live region", () => {
         it("should announce the number of options when the listbox is open", async () => {
             // Arrange
-            const labels: Labels = {
+            const labels: LabelsValues = {
                 ...builtinLabels,
                 someSelected: (numOptions: number): string =>
                     numOptions <= 1
@@ -1537,11 +1619,9 @@ describe("MultiSelect", () => {
             expect(container).toHaveTextContent("3 schools");
         });
 
-        // NOTE(john): This fails after upgrading to user-event v14. The text
-        // output is now: "2 planets0 items".
-        it.skip("should change the number of options after using the search filter", async () => {
+        it("should change the number of options after using the search filter", async () => {
             // Arrange
-            const labels: Labels = {
+            const labels: LabelsValues = {
                 ...builtinLabels,
                 someSelected: (numOptions: number): string =>
                     numOptions <= 1
@@ -1682,7 +1762,7 @@ describe("MultiSelect", () => {
 
             // Act
             // Press the button
-            const button = await screen.findByRole("button");
+            const button = await screen.findByRole("combobox");
             // NOTE: we need to use fireEvent here because await userEvent doesn't
             // support keyUp/Down events and we use these handlers to override
             // the default behavior of the button.
@@ -1710,7 +1790,7 @@ describe("MultiSelect", () => {
 
             // Act
             // Press the button
-            const button = await screen.findByRole("button");
+            const button = await screen.findByRole("combobox");
             // NOTE: we need to use fireEvent here because await userEvent doesn't
             // support keyUp/Down events and we use these handlers to override
             // the default behavior of the button.
@@ -1825,7 +1905,7 @@ describe("MultiSelect", () => {
             );
 
             // Act
-            const opener = await screen.findByRole("button");
+            const opener = await screen.findByRole("combobox");
 
             // Assert
             expect(opener).toHaveAttribute("id", expect.any(String));
@@ -1842,7 +1922,7 @@ describe("MultiSelect", () => {
             );
 
             // Act
-            const opener = await screen.findByRole("button");
+            const opener = await screen.findByRole("combobox");
 
             // Assert
             expect(opener).toHaveAttribute("id", id);
@@ -1859,7 +1939,7 @@ describe("MultiSelect", () => {
 
             // Act
             // Open the dropdown
-            const opener = await screen.findByRole("button");
+            const opener = await screen.findByRole("combobox");
             await userEvent.click(opener);
 
             // Assert
@@ -1880,7 +1960,7 @@ describe("MultiSelect", () => {
 
             // Act
             // Open the dropdown
-            const opener = await screen.findByRole("button");
+            const opener = await screen.findByRole("combobox");
             await userEvent.click(opener);
 
             // Assert
@@ -1902,7 +1982,7 @@ describe("MultiSelect", () => {
             );
 
             // Act
-            const opener = await screen.findByRole("button");
+            const opener = await screen.findByRole("combobox");
             await userEvent.click(opener);
             const dropdown = await screen.findByRole("listbox", {hidden: true});
 
@@ -1921,7 +2001,7 @@ describe("MultiSelect", () => {
             );
 
             // Act
-            const opener = await screen.findByRole("button");
+            const opener = await screen.findByRole("combobox");
             await userEvent.click(opener);
             const dropdown = await screen.findByRole("listbox", {hidden: true});
 
@@ -1992,7 +2072,7 @@ describe("MultiSelect", () => {
             );
 
             // Act
-            const opener = await screen.findByRole("button");
+            const opener = await screen.findByRole("combobox");
 
             // Assert
             expect(opener).toHaveAttribute("aria-haspopup", "listbox");
@@ -2031,7 +2111,7 @@ describe("MultiSelect", () => {
             );
 
             // Act
-            const opener = await screen.findByRole("button");
+            const opener = await screen.findByRole("combobox");
 
             // Assert
             expect(opener).toHaveAttribute("aria-expanded", "false");
@@ -2047,7 +2127,7 @@ describe("MultiSelect", () => {
             );
 
             // Act
-            const opener = await screen.findByRole("button");
+            const opener = await screen.findByRole("combobox");
             await userEvent.click(opener);
 
             // Assert
@@ -2110,7 +2190,7 @@ describe("MultiSelect", () => {
                 doRender(<MultiSelect onChange={jest.fn()} error={error} />);
 
                 // Act
-                const opener = await screen.findByRole("button");
+                const opener = await screen.findByRole("combobox");
 
                 // Assert
                 expect(opener).toHaveAttribute("aria-invalid", ariaInvalid);
@@ -2136,7 +2216,7 @@ describe("MultiSelect", () => {
                 );
 
                 // Act
-                const opener = await screen.findByRole("button");
+                const opener = await screen.findByRole("combobox");
 
                 // Assert
                 expect(opener).toHaveAttribute("aria-invalid", ariaInvalid);
@@ -2152,7 +2232,11 @@ describe("MultiSelect", () => {
         it("should not have any violations", async () => {
             // Arrange
             const {container} = doRender(
-                <MultiSelect onChange={jest.fn()} opened={true}>
+                <MultiSelect
+                    onChange={jest.fn()}
+                    opened={true}
+                    aria-label="Item selector"
+                >
                     <OptionItem label="item 1" value="1" />
                     <OptionItem label="item 2" value="2" />
                 </MultiSelect>,
@@ -2173,7 +2257,11 @@ describe("MultiSelect", () => {
         it("should not have any violations when it is open", async () => {
             // Arrange
             const {container} = doRender(
-                <MultiSelect onChange={jest.fn()} opened={true}>
+                <MultiSelect
+                    onChange={jest.fn()}
+                    opened={true}
+                    aria-label="Item selector"
+                >
                     <OptionItem label="item 1" value="1" />
                     <OptionItem label="item 2" value="2" />
                 </MultiSelect>,
@@ -2235,7 +2323,7 @@ describe("MultiSelect", () => {
                     const {userEvent} = doRender(
                         <ControlledMultiSelect validate={validate} />,
                     );
-                    const opener = await screen.findByRole("button");
+                    const opener = await screen.findByRole("combobox");
                     await userEvent.click(opener);
                     await userEvent.click(screen.getByText("item 1"));
                     validate.mockClear(); // Clear any calls
@@ -2257,7 +2345,7 @@ describe("MultiSelect", () => {
                             onValidate={onValidate}
                         />,
                     );
-                    const opener = await screen.findByRole("button");
+                    const opener = await screen.findByRole("combobox");
                     await userEvent.click(opener);
                     await userEvent.click(screen.getByText("item 1"));
                     onValidate.mockClear(); // Clear any calls
@@ -2276,7 +2364,7 @@ describe("MultiSelect", () => {
                     const {userEvent} = doRender(
                         <ControlledMultiSelect validate={() => "Error"} />,
                     );
-                    const opener = await screen.findByRole("button");
+                    const opener = await screen.findByRole("combobox");
                     await userEvent.click(opener);
                     await userEvent.click(screen.getByText("item 1"));
 
@@ -2320,7 +2408,7 @@ describe("MultiSelect", () => {
                 const {userEvent} = doRender(
                     <ControlledMultiSelect validate={validate} />,
                 );
-                const opener = await screen.findByRole("button");
+                const opener = await screen.findByRole("combobox");
                 await userEvent.click(opener);
 
                 // Act
@@ -2339,7 +2427,7 @@ describe("MultiSelect", () => {
                         onValidate={onValidate}
                     />,
                 );
-                const opener = await screen.findByRole("button");
+                const opener = await screen.findByRole("combobox");
                 await userEvent.click(opener);
 
                 // Act
@@ -2354,7 +2442,7 @@ describe("MultiSelect", () => {
                 const {userEvent} = doRender(
                     <ControlledMultiSelect validate={() => "Error"} />,
                 );
-                const opener = await screen.findByRole("button");
+                const opener = await screen.findByRole("combobox");
                 await userEvent.click(opener);
 
                 // Act
@@ -2395,7 +2483,7 @@ describe("MultiSelect", () => {
                     />,
                 );
                 // Assert
-                expect(await screen.findByRole("button")).toHaveAttribute(
+                expect(await screen.findByRole("combobox")).toHaveAttribute(
                     "aria-invalid",
                     "true",
                 );
@@ -2415,7 +2503,7 @@ describe("MultiSelect", () => {
                     />,
                 );
                 // Assert
-                expect(await screen.findByRole("button")).toHaveAttribute(
+                expect(await screen.findByRole("combobox")).toHaveAttribute(
                     "aria-invalid",
                     "false",
                 );
@@ -2446,7 +2534,7 @@ describe("MultiSelect", () => {
                     />,
                 );
                 // Assert
-                expect(await screen.findByRole("button")).toHaveAttribute(
+                expect(await screen.findByRole("combobox")).toHaveAttribute(
                     "aria-invalid",
                     "false",
                 );
@@ -2467,10 +2555,10 @@ describe("MultiSelect", () => {
                 );
 
                 // Act
-                await userEvent.click(await screen.findByRole("button")); // Open the dropdown
+                await userEvent.click(await screen.findByRole("combobox")); // Open the dropdown
 
                 // Assert
-                expect(await screen.findByRole("button")).toHaveAttribute(
+                expect(await screen.findByRole("combobox")).toHaveAttribute(
                     "aria-invalid",
                     "true",
                 );
@@ -2487,13 +2575,13 @@ describe("MultiSelect", () => {
                         selectedValues={["1"]}
                     />,
                 );
-                await userEvent.click(await screen.findByRole("button")); // Open the dropdown
+                await userEvent.click(await screen.findByRole("combobox")); // Open the dropdown
 
                 // Act
                 await userEvent.click(await screen.findByText("item 2")); // Pick a value
 
                 // Assert
-                expect(await screen.findByRole("button")).toHaveAttribute(
+                expect(await screen.findByRole("combobox")).toHaveAttribute(
                     "aria-invalid",
                     "false",
                 );
@@ -2510,14 +2598,14 @@ describe("MultiSelect", () => {
                         selectedValues={["1"]}
                     />,
                 );
-                await userEvent.click(await screen.findByRole("button")); // Open the dropdown
+                await userEvent.click(await screen.findByRole("combobox")); // Open the dropdown
                 await userEvent.click(await screen.findByText("item 2")); // Pick a value
 
                 // Act
-                await userEvent.click(await screen.findByRole("button")); // Close the dropdown
+                await userEvent.click(await screen.findByRole("combobox")); // Close the dropdown
 
                 // Assert
-                expect(await screen.findByRole("button")).toHaveAttribute(
+                expect(await screen.findByRole("combobox")).toHaveAttribute(
                     "aria-invalid",
                     "true",
                 );
@@ -2536,7 +2624,7 @@ describe("MultiSelect", () => {
                         onValidate={onValidate}
                     />,
                 );
-                await userEvent.click(await screen.findByRole("button")); // Open the dropdown
+                await userEvent.click(await screen.findByRole("combobox")); // Open the dropdown
                 onValidate.mockClear(); // Clear any calls
 
                 // Act
@@ -2559,7 +2647,7 @@ describe("MultiSelect", () => {
                     />,
                 );
                 // Open the dropdown
-                await userEvent.click(await screen.findByRole("button"));
+                await userEvent.click(await screen.findByRole("combobox"));
                 // Need to find item text within the listbox since the item text is also used on the opener
                 const listbox = await screen.findByRole("listbox", {
                     hidden: true,
@@ -2575,10 +2663,10 @@ describe("MultiSelect", () => {
 
                 // Act
                 // Close the dropdown
-                await userEvent.click(await screen.findByRole("button"));
+                await userEvent.click(await screen.findByRole("combobox"));
 
                 // Assert
-                expect(await screen.findByRole("button")).toHaveAttribute(
+                expect(await screen.findByRole("combobox")).toHaveAttribute(
                     "aria-invalid",
                     "true",
                 );
@@ -2598,7 +2686,7 @@ describe("MultiSelect", () => {
                         shortcuts={true}
                     />,
                 );
-                await userEvent.click(await screen.findByRole("button")); // Open the dropdown
+                await userEvent.click(await screen.findByRole("combobox")); // Open the dropdown
                 onValidate.mockClear(); // Clear any calls
 
                 // Act
@@ -2620,13 +2708,13 @@ describe("MultiSelect", () => {
                         shortcuts={true}
                     />,
                 );
-                await userEvent.click(await screen.findByRole("button")); // Open the dropdown
+                await userEvent.click(await screen.findByRole("combobox")); // Open the dropdown
 
                 // Act
                 await userEvent.click(await screen.findByText("Select none")); // Select none
 
                 // Assert
-                expect(await screen.findByRole("button")).toHaveAttribute(
+                expect(await screen.findByRole("combobox")).toHaveAttribute(
                     "aria-invalid",
                     "false",
                 );
@@ -2646,7 +2734,7 @@ describe("MultiSelect", () => {
                         shortcuts={true}
                     />,
                 );
-                await userEvent.click(await screen.findByRole("button")); // Open the dropdown
+                await userEvent.click(await screen.findByRole("combobox")); // Open the dropdown
                 onValidate.mockClear(); // Clear any calls
 
                 // Act
@@ -2670,7 +2758,7 @@ describe("MultiSelect", () => {
                         shortcuts={true}
                     />,
                 );
-                await userEvent.click(await screen.findByRole("button")); // Open the dropdown
+                await userEvent.click(await screen.findByRole("combobox")); // Open the dropdown
 
                 // Act
                 await userEvent.click(
@@ -2678,7 +2766,7 @@ describe("MultiSelect", () => {
                 ); // Select all
 
                 // Assert
-                expect(await screen.findByRole("button")).toHaveAttribute(
+                expect(await screen.findByRole("combobox")).toHaveAttribute(
                     "aria-invalid",
                     "false",
                 );
@@ -2720,7 +2808,7 @@ describe("MultiSelect", () => {
                     await userEvent.tab(); // leave the select
 
                     // Assert
-                    expect(screen.getByRole("button")).toHaveAttribute(
+                    expect(screen.getByRole("combobox")).toHaveAttribute(
                         "aria-invalid",
                         "true",
                     );
@@ -2814,7 +2902,7 @@ describe("MultiSelect", () => {
                     await userEvent.tab(); // leave the select
 
                     // Assert
-                    expect(screen.getByRole("button")).toHaveAttribute(
+                    expect(screen.getByRole("combobox")).toHaveAttribute(
                         "aria-invalid",
                         "false",
                     );
@@ -2832,10 +2920,10 @@ describe("MultiSelect", () => {
                             required={requiredMessage}
                         />,
                     );
-                    await userEvent.click(await screen.findByRole("button")); // Open the dropdown
+                    await userEvent.click(await screen.findByRole("combobox")); // Open the dropdown
 
                     // Act
-                    await userEvent.click(await screen.findByRole("button")); // Close the dropdown
+                    await userEvent.click(await screen.findByRole("combobox")); // Close the dropdown
 
                     // Assert
                     expect(onValidate).toHaveBeenCalledExactlyOnceWith(
@@ -2849,13 +2937,13 @@ describe("MultiSelect", () => {
                     const {userEvent} = doRender(
                         <ControlledMultiSelect required={requiredMessage} />,
                     );
-                    await userEvent.click(await screen.findByRole("button")); // Open the dropdown
+                    await userEvent.click(await screen.findByRole("combobox")); // Open the dropdown
 
                     // Act
-                    await userEvent.click(await screen.findByRole("button")); // Close the dropdown
+                    await userEvent.click(await screen.findByRole("combobox")); // Close the dropdown
 
                     // Assert
-                    expect(await screen.findByRole("button")).toHaveAttribute(
+                    expect(await screen.findByRole("combobox")).toHaveAttribute(
                         "aria-invalid",
                         "true",
                     );
@@ -2873,7 +2961,7 @@ describe("MultiSelect", () => {
                     );
 
                     // Act
-                    await userEvent.click(await screen.findByRole("button")); // Open the dropdown
+                    await userEvent.click(await screen.findByRole("combobox")); // Open the dropdown
 
                     // Assert
                     expect(onValidate).not.toHaveBeenCalled();
@@ -2887,10 +2975,10 @@ describe("MultiSelect", () => {
                     );
 
                     // Act
-                    await userEvent.click(await screen.findByRole("button")); // Open the dropdown
+                    await userEvent.click(await screen.findByRole("combobox")); // Open the dropdown
 
                     // Assert
-                    expect(await screen.findByRole("button")).toHaveAttribute(
+                    expect(await screen.findByRole("combobox")).toHaveAttribute(
                         "aria-invalid",
                         "false",
                     );
@@ -2909,10 +2997,10 @@ describe("MultiSelect", () => {
                         />,
                     );
                     await userEvent.tab();
-                    await userEvent.keyboard("{enter}"); // Open the dropdown
+                    await userEvent.keyboard("{Enter}"); // Open the dropdown
 
                     // Act
-                    await userEvent.keyboard("{escape}"); // Close the dropdown
+                    await userEvent.keyboard("{Escape}"); // Close the dropdown
 
                     // Assert
                     expect(onValidate).toHaveBeenCalledExactlyOnceWith(
@@ -2927,13 +3015,13 @@ describe("MultiSelect", () => {
                         <ControlledMultiSelect required={requiredMessage} />,
                     );
                     await userEvent.tab();
-                    await userEvent.keyboard("{enter}"); // Open the dropdown
+                    await userEvent.keyboard("{Enter}"); // Open the dropdown
 
                     // Act
-                    await userEvent.keyboard("{escape}"); // Close the dropdown
+                    await userEvent.keyboard("{Escape}"); // Close the dropdown
 
                     // Assert
-                    expect(await screen.findByRole("button")).toHaveAttribute(
+                    expect(await screen.findByRole("combobox")).toHaveAttribute(
                         "aria-invalid",
                         "true",
                     );
@@ -2986,10 +3074,10 @@ describe("MultiSelect", () => {
                     await userEvent.tab(); // Tab through the select to trigger error
 
                     // Act
-                    await userEvent.click(await screen.findByRole("button")); // Open the dropdown
+                    await userEvent.click(await screen.findByRole("combobox")); // Open the dropdown
 
                     // Assert
-                    expect(await screen.findByRole("button")).toHaveAttribute(
+                    expect(await screen.findByRole("combobox")).toHaveAttribute(
                         "aria-invalid",
                         "true",
                     );
@@ -3003,13 +3091,13 @@ describe("MultiSelect", () => {
                     );
                     await userEvent.tab();
                     await userEvent.tab(); // Tab through the select to trigger error
-                    await userEvent.click(await screen.findByRole("button")); // Open the dropdown
+                    await userEvent.click(await screen.findByRole("combobox")); // Open the dropdown
 
                     // Act
                     await userEvent.click(await screen.findByText("item 1")); // Pick a value
 
                     // Assert
-                    expect(await screen.findByRole("button")).toHaveAttribute(
+                    expect(await screen.findByRole("combobox")).toHaveAttribute(
                         "aria-invalid",
                         "false",
                     );
@@ -3049,7 +3137,7 @@ describe("MultiSelect", () => {
                     />,
                 );
                 // Open the dropdown
-                await userEvent.click(await screen.findByRole("button"));
+                await userEvent.click(await screen.findByRole("combobox"));
 
                 // Unselect selected option
                 const listbox = await screen.findByRole("listbox", {
@@ -3061,10 +3149,10 @@ describe("MultiSelect", () => {
 
                 // Act
                 // Close the dropdown
-                await userEvent.click(await screen.findByRole("button"));
+                await userEvent.click(await screen.findByRole("combobox"));
 
                 // Assert
-                expect(await screen.findByRole("button")).toHaveAttribute(
+                expect(await screen.findByRole("combobox")).toHaveAttribute(
                     "aria-invalid",
                     "true",
                 );
@@ -3083,7 +3171,7 @@ describe("MultiSelect", () => {
                     />,
                 );
                 // Open the dropdown
-                await userEvent.click(await screen.findByRole("button"));
+                await userEvent.click(await screen.findByRole("combobox"));
 
                 // Unselect selected option
                 const listbox = await screen.findByRole("listbox", {
@@ -3096,7 +3184,7 @@ describe("MultiSelect", () => {
 
                 // Act
                 // Close the dropdown
-                await userEvent.click(await screen.findByRole("button"));
+                await userEvent.click(await screen.findByRole("combobox"));
 
                 // Assert
                 expect(onValidate.mock.calls).toStrictEqual([
@@ -3118,7 +3206,7 @@ describe("MultiSelect", () => {
                     />,
                 );
                 // Open the dropdown
-                await userEvent.click(await screen.findByRole("button"));
+                await userEvent.click(await screen.findByRole("combobox"));
                 // Unselect selected option
                 const listbox = await screen.findByRole("listbox", {
                     hidden: true,
@@ -3130,7 +3218,7 @@ describe("MultiSelect", () => {
 
                 // Act
                 // Close the dropdown
-                await userEvent.click(await screen.findByRole("button"));
+                await userEvent.click(await screen.findByRole("combobox"));
 
                 // Assert
                 expect(onValidate).toHaveBeenCalledExactlyOnceWith(
diff --git a/packages/wonder-blocks-dropdown/src/components/__tests__/select-opener.test.tsx b/packages/wonder-blocks-dropdown/src/components/__tests__/select-opener.test.tsx
index 47537d188a..2c525f658a 100644
--- a/packages/wonder-blocks-dropdown/src/components/__tests__/select-opener.test.tsx
+++ b/packages/wonder-blocks-dropdown/src/components/__tests__/select-opener.test.tsx
@@ -1,6 +1,7 @@
 import * as React from "react";
 import {fireEvent, render, screen} from "@testing-library/react";
 import {userEvent} from "@testing-library/user-event";
+import {keys} from "@khanacademy/wonder-blocks-core";
 
 import SelectOpener from "../select-opener";
 
@@ -25,7 +26,7 @@ describe("SelectOpener", () => {
 
             // Act
             // Press the button.
-            await userEvent.click(await screen.findByRole("button"));
+            await userEvent.click(await screen.findByRole("combobox"));
 
             // Assert
             expect(onOpenMock).toHaveBeenCalledTimes(1);
@@ -49,17 +50,17 @@ describe("SelectOpener", () => {
 
             // Act
             // Press the button.
-            const button = await screen.findByRole("button");
+            const button = await screen.findByRole("combobox");
             // NOTE: we need to use fireEvent here because await userEvent doesn't
             // support keyUp/Down events and we use these handlers to override
             // the default behavior of the button.
             // eslint-disable-next-line testing-library/prefer-user-event
             fireEvent.keyDown(button, {
-                key: " ",
+                key: keys.space,
             });
             // eslint-disable-next-line testing-library/prefer-user-event
             fireEvent.keyUp(button, {
-                key: " ",
+                key: keys.space,
             });
 
             // Assert
@@ -84,7 +85,7 @@ describe("SelectOpener", () => {
 
             // Act
             // Press the button.
-            const button = await screen.findByRole("button");
+            const button = await screen.findByRole("combobox");
             // NOTE: we need to use fireEvent here because await userEvent doesn't
             // support keyUp/Down events and we use these handlers to override
             // the default behavior of the button.
@@ -127,7 +128,7 @@ describe("SelectOpener", () => {
 
             // Act
             // Press the button.
-            await userEvent.click(await screen.findByRole("button"));
+            await userEvent.click(await screen.findByRole("combobox"));
 
             // Assert
             expect(onOpenMock).toHaveBeenCalledTimes(0);
@@ -151,7 +152,7 @@ describe("SelectOpener", () => {
 
             // Act
             // Press the button.
-            const button = await screen.findByRole("button");
+            const button = await screen.findByRole("combobox");
             // NOTE: we need to use fireEvent here because await userEvent doesn't
             // support keyUp/Down events and we use these handlers to override
             // the default behavior of the button.
@@ -186,7 +187,7 @@ describe("SelectOpener", () => {
 
             // Act
             // Press the button.
-            const button = await screen.findByRole("button");
+            const button = await screen.findByRole("combobox");
             // NOTE: we need to use fireEvent here because await userEvent doesn't
             // support keyUp/Down events and we use these handlers to override
             // the default behavior of the button.
@@ -232,7 +233,7 @@ describe("SelectOpener", () => {
                     </SelectOpener>,
                 );
                 // Assert
-                expect(screen.getByRole("button")).toHaveAttribute(
+                expect(screen.getByRole("combobox")).toHaveAttribute(
                     "aria-invalid",
                     ariaInvalid,
                 );
diff --git a/packages/wonder-blocks-dropdown/src/components/__tests__/single-select.test.tsx b/packages/wonder-blocks-dropdown/src/components/__tests__/single-select.test.tsx
index 066e13c60a..4492e44b29 100644
--- a/packages/wonder-blocks-dropdown/src/components/__tests__/single-select.test.tsx
+++ b/packages/wonder-blocks-dropdown/src/components/__tests__/single-select.test.tsx
@@ -1,6 +1,12 @@
 /* eslint-disable max-lines */
 import * as React from "react";
-import {fireEvent, render, screen, within} from "@testing-library/react";
+import {
+    fireEvent,
+    render,
+    screen,
+    within,
+    waitFor,
+} from "@testing-library/react";
 import {
     userEvent as ue,
     PointerEventsCheckLevel,
@@ -9,7 +15,7 @@ import {
 import {PropsFor} from "@khanacademy/wonder-blocks-core";
 import OptionItem from "../option-item";
 import SingleSelect from "../single-select";
-import type {SingleSelectLabels} from "../single-select";
+import type {SingleSelectLabelsValues} from "../single-select";
 
 const doRender = (element: React.ReactElement) => {
     return {
@@ -21,6 +27,19 @@ const doRender = (element: React.ReactElement) => {
     };
 };
 
+jest.mock("react-popper", () => ({
+    ...jest.requireActual("react-popper"),
+    Popper: jest.fn().mockImplementation(({children}) => {
+        // Mock `isReferenceHidden` to always return false (or true for testing visibility)
+        return children({
+            ref: jest.fn(),
+            style: {},
+            placement: "bottom",
+            isReferenceHidden: false, // Mocking isReferenceHidden
+        });
+    }),
+}));
+
 describe("SingleSelect", () => {
     const onChange = jest.fn();
 
@@ -64,12 +83,55 @@ describe("SingleSelect", () => {
                 );
 
                 // Act
-                const opener = await screen.findByRole("button");
+                const opener = await screen.findByRole("combobox");
 
                 // Assert
                 expect(opener).toHaveTextContent("Default placeholder");
             });
 
+            it("should render an aria-label if passed in as a prop", async () => {
+                // Arrange
+                doRender(
+                    <SingleSelect
+                        placeholder="Default placeholder"
+                        onChange={jest.fn()}
+                        aria-label="Select a thing"
+                    >
+                        <OptionItem label="" value="" />
+                        <OptionItem label="Toggle A" value="toggle_a" />
+                        <OptionItem label="Toggle B" value="toggle_b" />
+                    </SingleSelect>,
+                );
+
+                // Act
+                const opener = await screen.findByRole("combobox");
+
+                // Assert
+                expect(opener).toHaveAccessibleName("Select a thing");
+            });
+
+            it("should preserve the original aria-label when an option is selected", async () => {
+                // Arrange
+                doRender(
+                    <SingleSelect
+                        placeholder="Default placeholder"
+                        onChange={jest.fn()}
+                        aria-label="Select a thing"
+                        selectedValue="toggle_a"
+                    >
+                        <OptionItem label="" value="" />
+                        <OptionItem label="Toggle A" value="toggle_a" />
+                        <OptionItem label="Toggle B" value="toggle_b" />
+                    </SingleSelect>,
+                );
+
+                // Act
+                const opener = await screen.findByRole("combobox");
+
+                // Assert
+                expect(opener).toHaveAccessibleName("Select a thing");
+            });
+
             it("should render empty if the selected option has an empty value", async () => {
                 // Arrange
                 doRender(
@@ -85,7 +147,7 @@ describe("SingleSelect", () => {
                 );
 
                 // Act
-                const opener = await screen.findByRole("button");
+                const opener = await screen.findByRole("combobox");
 
                 // Assert
                 expect(opener).toHaveTextContent("");
@@ -105,13 +167,13 @@ describe("SingleSelect", () => {
                 );
 
                 // Act
-                const opener = await screen.findByRole("button");
+                const opener = await screen.findByRole("combobox");
 
                 // Assert
                 expect(opener).toHaveTextContent("Toggle A");
             });
 
-            it("should render labelAsText of the selected option", async () => {
+            it("should render labelAsText of the selected option for opener value", async () => {
                 // Arrange
                 doRender(
                     <SingleSelect
@@ -133,13 +195,13 @@ describe("SingleSelect", () => {
                 );
 
                 // Act
-                const opener = await screen.findByRole("button");
+                const opener = await screen.findByRole("combobox");
 
                 // Assert
                 expect(opener).toHaveTextContent("Plain Toggle A");
             });
 
-            it("can render a Node as a label", async () => {
+            it("can render a Node as an opener value", async () => {
                 // Arrange
                 doRender(
                     <SingleSelect
@@ -162,7 +224,7 @@ describe("SingleSelect", () => {
                 );
 
                 // Act
-                const opener = await screen.findByRole("button");
+                const opener = await screen.findByRole("combobox");
                 const menuLabel = within(opener).getByText("custom item A");
 
                 // Assert
@@ -253,13 +315,13 @@ describe("SingleSelect", () => {
                 );
 
                 // Act
-                await userEvent.click(await screen.findByRole("textbox"));
+                await userEvent.click(await screen.findByRole("combobox"));
 
                 // wait for the dropdown to open
                 await screen.findByRole("listbox", {hidden: true});
 
                 // Assert
-                expect(await screen.findByRole("textbox")).toHaveFocus();
+                expect(await screen.findByRole("combobox")).toHaveFocus();
             });
         });
 
@@ -268,9 +330,7 @@ describe("SingleSelect", () => {
                 jest.useFakeTimers();
             });
 
-            // TODO(FEI-5533): Key press events aren't working correctly with
-            // user-event v14. We need to investigate and fix this.
-            describe.skip.each([{key: "{enter}"}, {key: "{space}"}])(
+            describe.each([{key: "{Enter}"}, {key: " "}])(
                 "$key",
                 ({key}: any) => {
                     it("should open when pressing the key when the default opener is focused", async () => {
@@ -282,9 +342,8 @@ describe("SingleSelect", () => {
                         await userEvent.keyboard(key);
 
                         // Assert
-                        expect(
-                            await screen.findByRole("listbox"),
-                        ).toBeInTheDocument();
+                        const listbox = await screen.findByRole("listbox");
+                        expect(listbox).toBeInTheDocument();
                     });
 
                     it("should focus the first item in the dropdown", async () => {
@@ -304,40 +363,83 @@ describe("SingleSelect", () => {
                 },
             );
 
-            // TODO(FEI-5533): Key press events aren't working correctly with
-            // user-event v14. We need to investigate and fix this.
-            it.skip("should select an item when pressing {enter}", async () => {
+            it("should focus on the first option when pressing {Enter} on the opener", async () => {
+                // Arrange
+                const {userEvent} = doRender(uncontrolledSingleSelect);
+                await userEvent.tab();
+
+                // Act
+                await userEvent.keyboard("{Enter}"); // open
+
+                // Ensure first option is focused, not the opener
+                const firstItem = await screen.findByRole("option", {
+                    name: /item 1/,
+                });
+                // Assert
+                expect(firstItem).toHaveFocus();
+            });
+
+            it("should select an item when pressing {Enter}", async () => {
                 // Arrange
                 const {userEvent} = doRender(uncontrolledSingleSelect);
                 await userEvent.tab();
-                await userEvent.keyboard("{enter}"); // open
+                await userEvent.keyboard("{Enter}"); // open
 
                 // Act
-                await userEvent.keyboard("{enter}");
+                await userEvent.keyboard("{Enter}");
 
                 // Assert
                 expect(onChange).toHaveBeenCalledWith("1");
-                expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
+
+                await waitFor(() =>
+                    expect(
+                        screen.queryByRole("listbox"),
+                    ).not.toBeInTheDocument(),
+                );
             });
 
-            // TODO(FEI-5533): Key press events aren't working correctly with
-            // user-event v14. We need to investigate and fix this.
-            it.skip("should select an item when pressing {space}", async () => {
+            it("should focus on the first option when pressing {Space} on the opener", async () => {
                 // Arrange
                 const {userEvent} = doRender(uncontrolledSingleSelect);
                 await userEvent.tab();
-                await userEvent.keyboard("{enter}"); // open
 
                 // Act
-                await userEvent.keyboard("{space}");
+                await userEvent.keyboard(" "); // open
+
+                // Ensure first option is focused, not the opener
+                const firstItem = await screen.findByRole("option", {
+                    name: /item 1/,
+                });
+
+                // Assert
+                expect(firstItem).toHaveFocus();
+            });
+
+            it("should select an item when pressing {Space}", async () => {
+                // Arrange
+                const {userEvent} = doRender(uncontrolledSingleSelect);
+                await userEvent.tab();
+                await userEvent.keyboard("{Enter}"); // open
+
+                const firstItem = await screen.findByRole("option", {
+                    name: /item 1/,
+                });
+                expect(firstItem).toHaveFocus();
+
+                // Act
+                await userEvent.keyboard(" ");
 
                 // Assert
                 expect(onChange).toHaveBeenCalledWith("1");
-                expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
+                await waitFor(() => {
+                    expect(
+                        screen.queryByRole("listbox"),
+                    ).not.toBeInTheDocument();
+                });
             });
 
             /*
-            The keyboard events (I tried .keyboard and .type) are not working as
+            TODO (FEI-5533): The keyboard events (I tried .keyboard and .type) are not working as
             needed. From what I can tell, they are going to the wrong element or
             otherwise not getting handled as they would in a non-test world.
             We had this issue with elsewhere too and haven't resolved it (since
@@ -392,14 +494,14 @@ describe("SingleSelect", () => {
                 expect(onChange).not.toHaveBeenCalled();
             });
 
-            it("should dismiss the dropdown when pressing {escape}", async () => {
+            it("should dismiss the dropdown when pressing {Escape}", async () => {
                 // Arrange
                 const {userEvent} = doRender(uncontrolledSingleSelect);
                 await userEvent.tab();
-                await userEvent.keyboard("{enter}"); // open
+                await userEvent.keyboard("{Enter}"); // open
 
                 // Act
-                await userEvent.keyboard("{escape}");
+                await userEvent.keyboard("{Escape}");
 
                 // Assert
                 expect(onChange).not.toHaveBeenCalled();
@@ -432,6 +534,7 @@ describe("SingleSelect", () => {
                         onToggle={handleToggleMenu}
                         onChange={onChange}
                         placeholder="Choose"
+                        aria-label="Choose"
                     >
                         <OptionItem label="item 1" value="1" />
                         <OptionItem label="item 2" value="2" />
@@ -454,7 +557,7 @@ describe("SingleSelect", () => {
 
             // Act
             await userEvent.click(
-                await screen.findByRole("button", {name: "Choose"}),
+                await screen.findByRole("combobox", {name: /choose/i}),
             );
 
             // Assert
@@ -469,7 +572,7 @@ describe("SingleSelect", () => {
             );
             // open the menu from the outside
             await userEvent.click(
-                await screen.findByRole("button", {name: "Choose"}),
+                await screen.findByRole("combobox", {name: /choose/i}),
             );
 
             // Act
@@ -513,7 +616,9 @@ describe("SingleSelect", () => {
             const {userEvent} = doRender(<ControlledComponent />);
 
             // Act
-            const opener = await screen.findByRole("button", {name: "Choose"});
+            const opener = await screen.findByRole("combobox", {
+                name: /choose/i,
+            });
             // open the menu from the outside
             await userEvent.click(opener);
             // click on the dropdown anchor to hide the menu
@@ -527,6 +632,55 @@ describe("SingleSelect", () => {
     });
 
     describe("Custom Opener", () => {
+        it("labels the custom opener with `aria-label` on SingleSelect", async () => {
+            // Arrange
+            doRender(
+                <SingleSelect
+                    aria-label="Custom opener"
+                    placeholder="e.g. item 1"
+                    onChange={jest.fn()}
+                    opener={(eventState: any) => <button onClick={jest.fn()} />}
+                >
+                    <OptionItem label="item 1" value="1" />
+                    <OptionItem label="item 2" value="2" />
+                    <OptionItem label="item 3" value="3" />
+                </SingleSelect>,
+            );
+
+            // Act
+            const opener = await screen.findByRole("combobox");
+
+            // Assert
+            expect(opener).toHaveAccessibleName("Custom opener");
+        });
+
+        it("prioritizes `aria-label` on the custom opener", async () => {
+            // Arrange
+            doRender(
+                <SingleSelect
+                    aria-label="Not winning the label race"
+                    placeholder="Choose an item"
+                    onChange={jest.fn()}
+                    opener={(eventState: any) => (
+                        <button
+                            aria-label="Custom opener button"
+                            onClick={jest.fn()}
+                        />
+                    )}
+                >
+                    <OptionItem label="item 1" value="1" />
+                    <OptionItem label="item 2" value="2" />
+                    <OptionItem label="item 3" value="3" />
+                </SingleSelect>,
+            );
+
+            // Act
+            const opener = await screen.findByRole("combobox");
+
+            // Assert
+            expect(opener).toHaveAccessibleName("Custom opener button");
+        });
+
         it("opens the menu when clicking on the custom opener", async () => {
             // Arrange
             const {userEvent} = doRender(
@@ -606,7 +760,7 @@ describe("SingleSelect", () => {
             expect(opener).not.toHaveAttribute("data-testid");
         });
 
-        it("passes the placeholder text to the custom opener", async () => {
+        it("passes the placeholder content to the custom opener", async () => {
             // Arrange
             const {userEvent} = doRender(
                 <SingleSelect
@@ -623,7 +777,7 @@ describe("SingleSelect", () => {
             );
 
             // Act
-            const opener = await screen.findByRole("button");
+            const opener = await screen.findByRole("combobox");
             // open dropdown
             await userEvent.click(opener);
 
@@ -631,7 +785,7 @@ describe("SingleSelect", () => {
             expect(opener).toHaveTextContent("Custom placeholder");
         });
 
-        it("passes the selected label to the custom opener", async () => {
+        it("passes the selected value to the custom opener", async () => {
             // Arrange
             type Props = Record<any, any>;
 
@@ -668,13 +822,13 @@ describe("SingleSelect", () => {
             const {userEvent} = doRender(<ControlledComponent />);
 
             // Act
-            const opener = await screen.findByRole("button");
+            const opener = await screen.findByRole("combobox");
             // open dropdown
             await userEvent.click(opener);
             await userEvent.click(await screen.findByText("Toggle B"));
 
             // Assert
-            // NOTE: the opener text is only updated in response to changes to the
+            // NOTE: the opener value text is only updated in response to changes to the
             // `selectedValue` prop.
             expect(opener).toHaveTextContent("Toggle B");
         });
@@ -804,10 +958,7 @@ describe("SingleSelect", () => {
             expect(searchInput.textContent).toEqual("");
         });
 
-        // NOTE(john): This is no longer working after upgrading to user-events v14
-        // The .tab() call just moves focus to the body, rather than the Clear
-        // search (which does exist in the page).
-        it.skip("should move focus to the dismiss button after pressing {tab} on the text input", async () => {
+        it("should move focus to the dismiss button after pressing {tab} on the text input", async () => {
             // Arrange
             const {userEvent} = doRender(
                 <SingleSelect
@@ -822,7 +973,7 @@ describe("SingleSelect", () => {
                 </SingleSelect>,
             );
             // open the dropdown menu
-            await userEvent.click(await screen.findByRole("button"));
+            await userEvent.click(await screen.findByRole("combobox"));
 
             const searchInput = await screen.findByPlaceholderText("Filter");
             await userEvent.click(searchInput);
@@ -975,7 +1126,9 @@ describe("SingleSelect", () => {
     });
 
     describe("a11y > Live region", () => {
-        it("should change the number of options after using the search filter", async () => {
+        // TODO (WB-1757.2): Enable this test once the LiveRegion component
+        // is refactored.
+        it.skip("should change the number of options after using the search filter", async () => {
             // Arrange
             const {userEvent} = doRender(
                 <SingleSelect
@@ -1016,7 +1169,7 @@ describe("SingleSelect", () => {
             <OptionItem label="Mango" value="mango" />,
         ];
 
-        const enLabels: SingleSelectLabels = {
+        const enLabels: SingleSelectLabelsValues = {
             clearSearch: "Clear Search",
             filter: "Filter",
             noResults: "No Results",
@@ -1025,7 +1178,7 @@ describe("SingleSelect", () => {
 
         it("passes the custom label to the search input field", async () => {
             // Arrange
-            const labels: SingleSelectLabels = {
+            const labels: SingleSelectLabelsValues = {
                 ...enLabels,
                 filter: "Filtrar",
             };
@@ -1051,7 +1204,7 @@ describe("SingleSelect", () => {
 
         it("passes the custom label to the dismiss filter icon", async () => {
             // Arrange
-            const labels: SingleSelectLabels = {
+            const labels: SingleSelectLabelsValues = {
                 ...enLabels,
                 clearSearch: "Limpiar busqueda",
                 filter: "Filtrar",
@@ -1084,7 +1237,7 @@ describe("SingleSelect", () => {
 
         it("passes the custom label to the no results label", async () => {
             // Arrange
-            const labels: SingleSelectLabels = {
+            const labels: SingleSelectLabelsValues = {
                 ...enLabels,
                 filter: "Filtrar",
                 noResults: "No hay resultados",
@@ -1240,7 +1393,7 @@ describe("SingleSelect", () => {
 
             // Act
             // Press the button
-            const button = await screen.findByRole("button");
+            const button = await screen.findByRole("combobox");
             // NOTE: we need to use fireEvent here because await userEvent doesn't
             // support keyUp/Down events and we use these handlers to override
             // the default behavior of the button.
@@ -1271,7 +1424,7 @@ describe("SingleSelect", () => {
 
             // Act
             // Press the button
-            const button = await screen.findByRole("button");
+            const button = await screen.findByRole("combobox");
             // NOTE: we need to use fireEvent here because await userEvent doesn't
             // support keyUp/Down events and we use these handlers to override
             // the default behavior of the button.
@@ -1393,7 +1546,7 @@ describe("SingleSelect", () => {
             );
 
             // Act
-            const opener = await screen.findByRole("button");
+            const opener = await screen.findByRole("combobox");
 
             // Assert
             expect(opener).toHaveAttribute("id", expect.any(String));
@@ -1410,7 +1563,7 @@ describe("SingleSelect", () => {
             );
 
             // Act
-            const opener = await screen.findByRole("button");
+            const opener = await screen.findByRole("combobox");
 
             // Assert
             expect(opener).toHaveAttribute("id", id);
@@ -1427,7 +1580,7 @@ describe("SingleSelect", () => {
 
             // Act
             // Open the dropdown
-            const opener = await screen.findByRole("button");
+            const opener = await screen.findByRole("combobox");
             await userEvent.click(opener);
 
             // Assert
@@ -1452,7 +1605,7 @@ describe("SingleSelect", () => {
 
             // Act
             // Open the dropdown
-            const opener = await screen.findByRole("button");
+            const opener = await screen.findByRole("combobox");
             await userEvent.click(opener);
 
             // Assert
@@ -1478,7 +1631,7 @@ describe("SingleSelect", () => {
             );
 
             // Act
-            const opener = await screen.findByRole("button");
+            const opener = await screen.findByRole("combobox");
             await userEvent.click(opener);
             const dropdown = await screen.findByRole("listbox", {hidden: true});
 
@@ -1497,7 +1650,7 @@ describe("SingleSelect", () => {
             );
 
             // Act
-            const opener = await screen.findByRole("button");
+            const opener = await screen.findByRole("combobox");
             await userEvent.click(opener);
             const dropdown = await screen.findByRole("listbox", {hidden: true});
 
@@ -1570,7 +1723,7 @@ describe("SingleSelect", () => {
             );
 
             // Act
-            const opener = await screen.findByRole("button");
+            const opener = await screen.findByRole("combobox");
 
             // Assert
             expect(opener).toHaveAttribute("aria-haspopup", "listbox");
@@ -1610,7 +1763,7 @@ describe("SingleSelect", () => {
             );
 
             // Act
-            const opener = await screen.findByRole("button");
+            const opener = await screen.findByRole("combobox");
 
             // Assert
             expect(opener).toHaveAttribute("aria-expanded", "false");
@@ -1626,7 +1779,7 @@ describe("SingleSelect", () => {
             );
 
             // Act
-            const opener = await screen.findByRole("button");
+            const opener = await screen.findByRole("combobox");
             await userEvent.click(opener);
 
             // Assert
@@ -1697,7 +1850,7 @@ describe("SingleSelect", () => {
                 );
 
                 // Act
-                const opener = await screen.findByRole("button");
+                const opener = await screen.findByRole("combobox");
 
                 // Assert
                 expect(opener).toHaveAttribute("aria-invalid", ariaInvalid);
@@ -1724,7 +1877,7 @@ describe("SingleSelect", () => {
                 );
 
                 // Act
-                const opener = await screen.findByRole("button");
+                const opener = await screen.findByRole("combobox");
 
                 // Assert
                 expect(opener).toHaveAttribute("aria-invalid", ariaInvalid);
@@ -1744,6 +1897,7 @@ describe("SingleSelect", () => {
                     onChange={jest.fn()}
                     opened={true}
                     placeholder="Choose"
+                    aria-label="Choose"
                 >
                     <OptionItem label="item 1" value="1" />
                     <OptionItem label="item 2" value="2" />
@@ -1769,6 +1923,7 @@ describe("SingleSelect", () => {
                     onChange={jest.fn()}
                     opened={true}
                     placeholder="Choose"
+                    aria-label="Choose"
                 >
                     <OptionItem label="item 1" value="1" />
                     <OptionItem label="item 2" value="2" />
@@ -1798,6 +1953,7 @@ describe("SingleSelect", () => {
             return (
                 <SingleSelect
                     {...props}
+                    aria-label="Choose"
                     placeholder="Choose"
                     selectedValue={value}
                     onChange={setValue}
@@ -1814,7 +1970,7 @@ describe("SingleSelect", () => {
                 const {userEvent} = doRender(
                     <ControlledSingleSelect validate={validate} />,
                 );
-                const opener = await screen.findByRole("button");
+                const opener = await screen.findByRole("combobox");
                 await userEvent.click(opener);
 
                 // Act
@@ -1833,7 +1989,7 @@ describe("SingleSelect", () => {
                         onValidate={onValidate}
                     />,
                 );
-                const opener = await screen.findByRole("button");
+                const opener = await screen.findByRole("combobox");
                 await userEvent.click(opener);
 
                 // Act
@@ -1850,7 +2006,7 @@ describe("SingleSelect", () => {
                 const {userEvent} = doRender(
                     <ControlledSingleSelect validate={() => "Error"} />,
                 );
-                const opener = await screen.findByRole("button");
+                const opener = await screen.findByRole("combobox");
                 await userEvent.click(opener);
 
                 // Act
@@ -1910,7 +2066,7 @@ describe("SingleSelect", () => {
                     />,
                 );
                 // Assert
-                expect(await screen.findByRole("button")).toHaveAttribute(
+                expect(await screen.findByRole("combobox")).toHaveAttribute(
                     "aria-invalid",
                     "true",
                 );
@@ -1930,7 +2086,7 @@ describe("SingleSelect", () => {
                     />,
                 );
                 // Assert
-                expect(await screen.findByRole("button")).toHaveAttribute(
+                expect(await screen.findByRole("combobox")).toHaveAttribute(
                     "aria-invalid",
                     "false",
                 );
@@ -1961,7 +2117,7 @@ describe("SingleSelect", () => {
                     />,
                 );
                 // Assert
-                expect(await screen.findByRole("button")).toHaveAttribute(
+                expect(await screen.findByRole("combobox")).toHaveAttribute(
                     "aria-invalid",
                     "false",
                 );
@@ -1982,10 +2138,10 @@ describe("SingleSelect", () => {
                 );
 
                 // Act
-                await userEvent.click(await screen.findByRole("button")); // Open the dropdown
+                await userEvent.click(await screen.findByRole("combobox")); // Open the dropdown
 
                 // Assert
-                expect(await screen.findByRole("button")).toHaveAttribute(
+                expect(await screen.findByRole("combobox")).toHaveAttribute(
                     "aria-invalid",
                     "true",
                 );
@@ -2002,13 +2158,13 @@ describe("SingleSelect", () => {
                         selectedValue={"1"}
                     />,
                 );
-                await userEvent.click(await screen.findByRole("button")); // Open the dropdown
+                await userEvent.click(await screen.findByRole("combobox")); // Open the dropdown
 
                 // Act
                 await userEvent.click(await screen.findByText("item 2")); // Pick a value
 
                 // Assert
-                expect(await screen.findByRole("button")).toHaveAttribute(
+                expect(await screen.findByRole("combobox")).toHaveAttribute(
                     "aria-invalid",
                     "false",
                 );
@@ -2050,7 +2206,7 @@ describe("SingleSelect", () => {
                     await userEvent.tab(); // leave the select
 
                     // Assert
-                    expect(screen.getByRole("button")).toHaveAttribute(
+                    expect(screen.getByRole("combobox")).toHaveAttribute(
                         "aria-invalid",
                         "true",
                     );
@@ -2144,7 +2300,7 @@ describe("SingleSelect", () => {
                     await userEvent.tab(); // leave the select
 
                     // Assert
-                    expect(screen.getByRole("button")).toHaveAttribute(
+                    expect(screen.getByRole("combobox")).toHaveAttribute(
                         "aria-invalid",
                         "false",
                     );
@@ -2163,8 +2319,8 @@ describe("SingleSelect", () => {
                     );
 
                     // Act
-                    await userEvent.click(await screen.findByRole("button")); // Open the dropdown
-                    await userEvent.click(await screen.findByRole("button")); // Close the dropdown
+                    await userEvent.click(await screen.findByRole("combobox")); // Open the dropdown
+                    await userEvent.click(await screen.findByRole("combobox")); // Close the dropdown
 
                     // Assert
                     expect(onValidate).toHaveBeenCalledExactlyOnceWith(
@@ -2180,11 +2336,11 @@ describe("SingleSelect", () => {
                     );
 
                     // Act
-                    await userEvent.click(await screen.findByRole("button")); // Open the dropdown
-                    await userEvent.click(await screen.findByRole("button")); // Close the dropdown
+                    await userEvent.click(await screen.findByRole("combobox")); // Open the dropdown
+                    await userEvent.click(await screen.findByRole("combobox")); // Close the dropdown
 
                     // Assert
-                    expect(await screen.findByRole("button")).toHaveAttribute(
+                    expect(await screen.findByRole("combobox")).toHaveAttribute(
                         "aria-invalid",
                         "true",
                     );
@@ -2202,7 +2358,7 @@ describe("SingleSelect", () => {
                     );
 
                     // Act
-                    await userEvent.click(await screen.findByRole("button")); // Open the dropdown
+                    await userEvent.click(await screen.findByRole("combobox")); // Open the dropdown
 
                     // Assert
                     expect(onValidate).not.toHaveBeenCalled();
@@ -2216,10 +2372,10 @@ describe("SingleSelect", () => {
                     );
 
                     // Act
-                    await userEvent.click(await screen.findByRole("button")); // Open the dropdown
+                    await userEvent.click(await screen.findByRole("combobox")); // Open the dropdown
 
                     // Assert
-                    expect(await screen.findByRole("button")).toHaveAttribute(
+                    expect(await screen.findByRole("combobox")).toHaveAttribute(
                         "aria-invalid",
                         "false",
                     );
@@ -2240,8 +2396,8 @@ describe("SingleSelect", () => {
 
                     // Act
                     await userEvent.tab();
-                    await userEvent.keyboard("{enter}"); // Open the dropdown
-                    await userEvent.keyboard("{escape}"); // Close the dropdown
+                    await userEvent.keyboard("{Enter}"); // Open the dropdown
+                    await userEvent.keyboard("{Escape}"); // Close the dropdown
 
                     // Assert
                     expect(onValidate).toHaveBeenCalledExactlyOnceWith(
@@ -2258,11 +2414,11 @@ describe("SingleSelect", () => {
 
                     // Act
                     await userEvent.tab();
-                    await userEvent.keyboard("{enter}"); // Open the dropdown
-                    await userEvent.keyboard("{escape}"); // Close the dropdown
+                    await userEvent.keyboard("{Enter}"); // Open the dropdown
+                    await userEvent.keyboard("{Escape}"); // Close the dropdown
 
                     // Assert
-                    expect(await screen.findByRole("button")).toHaveAttribute(
+                    expect(await screen.findByRole("combobox")).toHaveAttribute(
                         "aria-invalid",
                         "true",
                     );
@@ -2317,10 +2473,10 @@ describe("SingleSelect", () => {
                     await userEvent.tab(); // Tab through the select to trigger error
 
                     // Act
-                    await userEvent.click(await screen.findByRole("button")); // Open the dropdown
+                    await userEvent.click(await screen.findByRole("combobox")); // Open the dropdown
 
                     // Assert
-                    expect(await screen.findByRole("button")).toHaveAttribute(
+                    expect(await screen.findByRole("combobox")).toHaveAttribute(
                         "aria-invalid",
                         "true",
                     );
@@ -2334,13 +2490,13 @@ describe("SingleSelect", () => {
                     );
                     await userEvent.tab();
                     await userEvent.tab(); // Tab through the select to trigger error
-                    await userEvent.click(await screen.findByRole("button")); // Open the dropdown
+                    await userEvent.click(await screen.findByRole("combobox")); // Open the dropdown
 
                     // Act
                     await userEvent.click(await screen.findByText("item 1")); // Pick a value
 
                     // Assert
-                    expect(await screen.findByRole("button")).toHaveAttribute(
+                    expect(await screen.findByRole("combobox")).toHaveAttribute(
                         "aria-invalid",
                         "false",
                     );
diff --git a/packages/wonder-blocks-dropdown/src/components/action-menu.tsx b/packages/wonder-blocks-dropdown/src/components/action-menu.tsx
index d5db71ee4c..b72f6536fa 100644
--- a/packages/wonder-blocks-dropdown/src/components/action-menu.tsx
+++ b/packages/wonder-blocks-dropdown/src/components/action-menu.tsx
@@ -267,6 +267,7 @@ export default class ActionMenu extends React.Component<Props, State> {
                         ref={this.handleOpenerRef}
                         testId={opener ? undefined : testId}
                         opened={this.state.opened}
+                        role="button"
                     >
                         {opener
                             ? opener
diff --git a/packages/wonder-blocks-dropdown/src/components/dropdown-core.tsx b/packages/wonder-blocks-dropdown/src/components/dropdown-core.tsx
index 9423bc2e11..6b8f01aa8d 100644
--- a/packages/wonder-blocks-dropdown/src/components/dropdown-core.tsx
+++ b/packages/wonder-blocks-dropdown/src/components/dropdown-core.tsx
@@ -9,7 +9,7 @@ import {VariableSizeList as List} from "react-window";
 
 import {fade, color, spacing} from "@khanacademy/wonder-blocks-tokens";
 
-import {addStyle, PropsFor, View} from "@khanacademy/wonder-blocks-core";
+import {addStyle, PropsFor, View, keys} from "@khanacademy/wonder-blocks-core";
 import SearchField from "@khanacademy/wonder-blocks-search-field";
 import {LabelMedium} from "@khanacademy/wonder-blocks-typography";
 import {withActionScheduler} from "@khanacademy/wonder-blocks-timing";
@@ -18,7 +18,7 @@ import type {AriaProps, StyleType} from "@khanacademy/wonder-blocks-core";
 import type {WithActionSchedulerProps} from "@khanacademy/wonder-blocks-timing";
 import DropdownCoreVirtualized from "./dropdown-core-virtualized";
 import SeparatorItem from "./separator-item";
-import {defaultLabels, keys} from "../util/constants";
+import {defaultLabels} from "../util/constants";
 import type {DropdownItem} from "../util/types";
 import DropdownPopper from "./dropdown-popper";
 import {debounce, getLabel, getStringForKey} from "../util/helpers";
@@ -38,7 +38,7 @@ const VIRTUALIZE_THRESHOLD = 125;
 
 const StyledSpan = addStyle("span");
 
-type Labels = {
+type LabelsValues = {
     /**
      * Label for describing the dismiss icon on the search filter.
      */
@@ -93,7 +93,7 @@ type DefaultProps = Readonly<{
     /**
      * The object containing the custom labels used inside this component.
      */
-    labels: Labels;
+    labels: LabelsValues;
     /**
      * Used to determine if we can automatically select an item using the keyboard.
      */
@@ -205,7 +205,7 @@ type ExportProps = Readonly<{
     /**
      * The object containing the custom labels used inside this component.
      */
-    labels?: Labels;
+    labels?: LabelsValues;
     /**
      * Used to determine if we can automatically select an item using the keyboard.
      */
@@ -231,7 +231,7 @@ type State = Readonly<{
     /**
      * The object containing the custom labels used inside this component.
      */
-    labels: Labels;
+    labels: LabelsValues;
     /**
      * Because getDerivedStateFromProps doesn't store previous props (in the
      * spirit of performance), we store the previous items just to be able to
diff --git a/packages/wonder-blocks-dropdown/src/components/dropdown-opener.tsx b/packages/wonder-blocks-dropdown/src/components/dropdown-opener.tsx
index 66608f31f4..16c31b658b 100644
--- a/packages/wonder-blocks-dropdown/src/components/dropdown-opener.tsx
+++ b/packages/wonder-blocks-dropdown/src/components/dropdown-opener.tsx
@@ -36,7 +36,7 @@ type Props = Partial<Omit<AriaProps, "aria-disabled">> & {
      */
     testId?: string;
     /**
-     * Text for the opener that can be passed to the child as an argument.
+     * Content for the opener that can be passed to the child as an argument.
      */
     text: OptionLabel;
     /**
@@ -51,6 +51,10 @@ type Props = Partial<Omit<AriaProps, "aria-disabled">> & {
      * If the dropdown has an error.
      */
     error?: boolean;
+    /**
+     * The role of the opener.
+     */
+    role: "combobox" | "button";
 };
 
 type DefaultProps = {
@@ -79,6 +83,7 @@ class DropdownOpener extends React.Component<Props> {
             "aria-haspopup": ariaHasPopUp,
             "aria-required": ariaRequired,
             id,
+            role,
             onBlur,
         } = this.props;
         const renderedChildren = this.props.children({
@@ -89,11 +94,18 @@ class DropdownOpener extends React.Component<Props> {
         const childrenProps = renderedChildren.props;
         const childrenTestId = this.getTestIdFromProps(childrenProps);
 
+        // If custom opener has `aria-label`, prioritize that.
+        // If parent component has `aria-label`, fall back to that next.
+        const renderedAriaLabel =
+            childrenProps["aria-label"] ?? this.props["aria-label"];
+
         return React.cloneElement(renderedChildren, {
             ...clickableChildrenProps,
+            "aria-label": renderedAriaLabel ?? undefined,
             "aria-invalid": this.props.error,
             disabled,
             "aria-controls": ariaControls,
+            role,
             id,
             "aria-expanded": opened ? "true" : "false",
             "aria-haspopup": ariaHasPopUp,
diff --git a/packages/wonder-blocks-dropdown/src/components/multi-select.tsx b/packages/wonder-blocks-dropdown/src/components/multi-select.tsx
index 749c876d96..e77e3a62b7 100644
--- a/packages/wonder-blocks-dropdown/src/components/multi-select.tsx
+++ b/packages/wonder-blocks-dropdown/src/components/multi-select.tsx
@@ -28,7 +28,7 @@ import type {
 import {getLabel, getSelectOpenerLabel} from "../util/helpers";
 import {useSelectValidation} from "../hooks/use-select-validation";
 
-export type Labels = {
+export type LabelsValues = {
     /**
      * Label for describing the dismiss icon on the search filter.
      */
@@ -38,7 +38,7 @@ export type Labels = {
      */
     filter: string;
     /**
-     * Label for when the filter returns no results.
+     * Value for when the filter returns no results.
      */
     noResults: string;
     /**
@@ -48,18 +48,17 @@ export type Labels = {
     /**
      * Label for the "select none" shortcut option
      */
-
     selectNoneLabel: string;
     /**
-     * Label for the opening component when there are no items selected.
+     * Value for the opening component when there are no items selected.
      */
     noneSelected: string;
     /**
-     * Label for the opening component when there are some items selected.
+     * Value for the opening component when there are some items selected.
      */
     someSelected: (numOptions: number) => string;
     /**
-     * Label for the opening component when all the items have been selected.
+     * Value for the opening component when all the items have been selected.
      */
     allSelected: string;
 };
@@ -88,8 +87,8 @@ type DefaultProps = Readonly<{
      */
     shortcuts?: boolean;
     /**
-     * When false, the SelectOpener can show a Node as a label. When true, the
-     * SelectOpener will use a string as a label. If using custom OptionItems, a
+     * When false, the SelectOpener can show a Node as a value. When true, the
+     * SelectOpener will use a string as a value. If using custom OptionItems, a
      * plain text label can be provided with the `labelAsText` prop.
      * Defaults to true.
      */
@@ -130,9 +129,9 @@ type Props = AriaProps &
          */
         isFilterable?: boolean;
         /**
-         * The object containing the custom labels used inside this component.
+         * The object containing the custom labels and placeholder values used inside this component.
          */
-        labels?: Labels;
+        labels?: LabelsValues;
         /**
          * Callback for when the selection changes. Parameter is an updated array of
          * the values that are now selected.
@@ -214,6 +213,9 @@ type Props = AriaProps &
  * multiple options to be selected. Clients are responsible for keeping track
  * of the selected items.
  *
+ * Clients are also responsible for labeling the select using `LabeledField`, or
+ * an `aria-label` attribute or `aria-labelledby` on the select.
+ *
  * The multi select stays open until closed by the user. The onChange callback
  * happens every time there is a change in the selection of the items.
  *
@@ -222,7 +224,7 @@ type Props = AriaProps &
  * ```jsx
  * import {OptionItem, MultiSelect} from "@khanacademy/wonder-blocks-dropdown";
  *
- * <MultiSelect onChange={setSelectedValues} selectedValues={selectedValues}>
+ * <MultiSelect aria-label="Fruits" onChange={setSelectedValues} selectedValues={selectedValues}>
  *  <OptionItem value="pear">Pear</OptionItem>
  *  <OptionItem value="mango">Mango</OptionItem>
  * </MultiSelect>
@@ -245,6 +247,7 @@ const MultiSelect = (props: Props) => {
         shortcuts = false,
         style,
         className,
+        "aria-label": ariaLabel,
         "aria-invalid": ariaInvalid,
         "aria-required": ariaRequired,
         disabled = false,
@@ -359,7 +362,7 @@ const MultiSelect = (props: Props) => {
         onSelectedValuesChangeValidation();
     };
 
-    const getMenuText = (
+    const getMenuTextOrNode = (
         children: OptionItemComponentArray,
     ): string | JSX.Element => {
         const {noneSelected, someSelected, allSelected} = labels;
@@ -538,7 +541,7 @@ const MultiSelect = (props: Props) => {
         | React.ReactElement<React.ComponentProps<typeof SelectOpener>> => {
         const {noneSelected} = labels;
 
-        const menuText = getMenuText(allChildren);
+        const menuContent = getMenuTextOrNode(allChildren);
 
         const dropdownOpener = (
             <Id id={id}>
@@ -547,13 +550,15 @@ const MultiSelect = (props: Props) => {
                         <DropdownOpener
                             id={uniqueOpenerId}
                             error={hasError}
+                            aria-label={ariaLabel}
                             aria-controls={dropdownId}
                             aria-haspopup="listbox"
                             onClick={handleClick}
                             onBlur={onOpenerBlurValidation}
                             disabled={isDisabled}
                             ref={handleOpenerRef}
-                            text={menuText}
+                            role="combobox"
+                            text={menuContent}
                             opened={open}
                         >
                             {opener}
@@ -564,15 +569,16 @@ const MultiSelect = (props: Props) => {
                             error={hasError}
                             disabled={isDisabled}
                             id={uniqueOpenerId}
+                            aria-label={ariaLabel}
                             aria-controls={dropdownId}
-                            isPlaceholder={menuText === noneSelected}
+                            isPlaceholder={menuContent === noneSelected}
                             onOpenChanged={handleOpenChanged}
                             onBlur={onOpenerBlurValidation}
                             open={open}
                             ref={handleOpenerRef}
                             testId={testId}
                         >
-                            {menuText}
+                            {menuContent}
                         </SelectOpener>
                     );
                 }}
diff --git a/packages/wonder-blocks-dropdown/src/components/option-item.tsx b/packages/wonder-blocks-dropdown/src/components/option-item.tsx
index c85070ed0b..0d60e5d97b 100644
--- a/packages/wonder-blocks-dropdown/src/components/option-item.tsx
+++ b/packages/wonder-blocks-dropdown/src/components/option-item.tsx
@@ -269,6 +269,7 @@ export default class OptionItem extends React.Component<OptionProps> {
     render(): React.ReactNode {
         const {disabled, focused, parentComponent, role, selected} = this.props;
 
+        // Only used for Combobox component, not SingleSelect/MultiSelect
         if (parentComponent === "listbox") {
             return (
                 <StyledListItem
diff --git a/packages/wonder-blocks-dropdown/src/components/select-opener.tsx b/packages/wonder-blocks-dropdown/src/components/select-opener.tsx
index acb5684bc9..ddec9288b6 100644
--- a/packages/wonder-blocks-dropdown/src/components/select-opener.tsx
+++ b/packages/wonder-blocks-dropdown/src/components/select-opener.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import {StyleSheet} from "aphrodite";
 
-import type {AriaProps} from "@khanacademy/wonder-blocks-core";
+import {keys, type AriaProps} from "@khanacademy/wonder-blocks-core";
 
 import {addStyle} from "@khanacademy/wonder-blocks-core";
 import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
@@ -41,6 +41,10 @@ type SelectOpenerProps = AriaProps & {
      * of this component. A placeholder has more faded text colors and styles.
      */
     isPlaceholder: boolean;
+    /**
+     * A label to expose on the opener, in the absence of an associated label element or `aria-labelledby`.
+     */
+    ariaLabel?: string;
     /**
      * Callback for when the SelectOpener is pressed.
      */
@@ -103,21 +107,21 @@ export default class SelectOpener extends React.Component<
     };
 
     handleKeyDown: (e: React.KeyboardEvent) => void = (e) => {
-        const keyCode = e.key;
+        const keyName = e.key;
         // Prevent default behavior for Enter key. Without this, the select
         // is only open while the Enter key is pressed.
         // Prevent default behavior for Space key. Without this, Safari stays in
         // active state visually
-        if (keyCode === "Enter" || keyCode === " ") {
+        if (keyName === keys.enter || keyName === keys.space) {
             this.setState({pressed: true});
             e.preventDefault();
         }
     };
 
     handleKeyUp: (e: React.KeyboardEvent) => void = (e) => {
-        const keyCode = e.key;
+        const keyName = e.key;
         // On key up for Enter and Space, trigger the click handler
-        if (keyCode === "Enter" || keyCode === " ") {
+        if (keyName === keys.enter || keyName === keys.space) {
             this.setState({pressed: false});
             this.handleClick(e);
         }
@@ -132,6 +136,7 @@ export default class SelectOpener extends React.Component<
             isPlaceholder,
             open,
             testId,
+            "aria-label": ariaLabel,
             "aria-required": ariaRequired,
             onBlur,
             // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -158,12 +163,13 @@ export default class SelectOpener extends React.Component<
                 aria-disabled={disabled}
                 aria-expanded={open ? "true" : "false"}
                 aria-invalid={error}
+                aria-label={ariaLabel ?? undefined}
                 aria-required={ariaRequired}
                 aria-haspopup="listbox"
                 data-testid={testId}
                 id={id}
+                role="combobox"
                 style={style}
-                type="button"
                 onClick={!disabled ? this.handleClick : undefined}
                 onKeyDown={!disabled ? this.handleKeyDown : undefined}
                 onKeyUp={!disabled ? this.handleKeyUp : undefined}
@@ -171,8 +177,10 @@ export default class SelectOpener extends React.Component<
             >
                 <LabelMedium style={styles.text}>
                     {/* Note(tamarab): Prevents unwanted vertical
-                                shift for empty selection */}
-                    {children || "\u00A0"}
+                                shift for empty selection.
+                        Note2(marcysutton): aria-hidden prevents "space"
+                                from being read in VoiceOver. */}
+                    {children || <span aria-hidden="true">&nbsp;</span>}
                 </LabelMedium>
                 <PhosphorIcon
                     icon={caretDownIcon}
diff --git a/packages/wonder-blocks-dropdown/src/components/single-select.tsx b/packages/wonder-blocks-dropdown/src/components/single-select.tsx
index ecade44825..be52987551 100644
--- a/packages/wonder-blocks-dropdown/src/components/single-select.tsx
+++ b/packages/wonder-blocks-dropdown/src/components/single-select.tsx
@@ -25,9 +25,9 @@ import type {
 import {getLabel, getSelectOpenerLabel} from "../util/helpers";
 import {useSelectValidation} from "../hooks/use-select-validation";
 
-export type SingleSelectLabels = {
+export type SingleSelectLabelsValues = {
     /**
-     * Label for describing the dismiss icon on the search filter.
+     * Label to create an accessible name for the dismiss icon on the search filter.
      */
     clearSearch: string;
     /**
@@ -35,11 +35,11 @@ export type SingleSelectLabels = {
      */
     filter: string;
     /**
-     * Label for when the filter returns no results.
+     * Value for when the filter returns no results.
      */
     noResults: string;
     /**
-     * Label for the opening component when there are some items selected.
+     * Value for the opening component when there are some items selected.
      */
     someResults: (numOptions: number) => string;
 };
@@ -78,12 +78,12 @@ type DefaultProps = Readonly<{
      */
     error?: boolean;
     /**
-     * The object containing the custom labels used inside this component.
+     * The object containing the custom labels and placeholder values used inside this component.
      */
-    labels?: SingleSelectLabels;
+    labels?: SingleSelectLabelsValues;
     /**
-     * When false, the SelectOpener can show a Node as a label. When true, the
-     * SelectOpener will use a string as a label. If using custom OptionItems, a
+     * When false, the SelectOpener can show a Node as a value. When true, the
+     * SelectOpener will use a string as a value. If using custom OptionItems, a
      * plain text label can be provided with the `labelAsText` prop.
      * Defaults to true.
      */
@@ -123,7 +123,8 @@ type Props = AriaProps &
          */
         id?: string;
         /**
-         * Placeholder for the opening component when there are no items selected.
+         * Placeholder value for the opening component when there are no items selected.
+         * Note: a label is still necessary to describe the purpose of the select.
          */
         placeholder: string;
         /**
@@ -205,6 +206,9 @@ type Props = AriaProps &
  * The single select allows the selection of one item. Clients are responsible
  * for keeping track of the selected item in the select.
  *
+ * Clients are also responsible for labeling the select using `LabeledField`, an
+ * `aria-label` attribute, or `aria-labelledby`.
+ *
  * The single select dropdown closes after the selection of an item. If the same
  * item is selected, there is no callback.
  *
@@ -221,7 +225,7 @@ type Props = AriaProps &
  *
  * const [selectedValue, setSelectedValue] = React.useState("");
  *
- * <SingleSelect placeholder="Choose a fruit" onChange={setSelectedValue} selectedValue={selectedValue}>
+ * <SingleSelect aria-label="Your Favorite Fruits" placeholder="Choose a fruit" onChange={setSelectedValue} selectedValue={selectedValue}>
  *     <OptionItem label="Pear" value="pear" />
  *     <OptionItem label="Mango" value="mango" />
  * </SingleSelect>
@@ -236,6 +240,7 @@ type Props = AriaProps &
  * const fruitArray = ["Apple", "Banana", "Orange", "Mango", "Pear"];
  *
  * <SingleSelect
+ *     aria-label="Your Favorite Fruits"
  *     placeholder="Choose a fruit"
  *     onChange={setSelectedValue}
  *     selectedValue={selectedValue}
@@ -272,6 +277,7 @@ const SingleSelect = (props: Props) => {
         opened,
         style,
         className,
+        "aria-label": ariaLabel,
         "aria-invalid": ariaInvalid,
         "aria-required": ariaRequired,
         disabled = false,
@@ -442,11 +448,13 @@ const SingleSelect = (props: Props) => {
                     return opener ? (
                         <DropdownOpener
                             id={uniqueOpenerId}
+                            aria-label={ariaLabel}
                             aria-controls={dropdownId}
                             aria-haspopup="listbox"
                             onClick={handleClick}
                             disabled={isDisabled}
                             ref={handleOpenerRef}
+                            role="combobox"
                             text={menuText}
                             opened={open}
                             error={hasError}
@@ -457,6 +465,7 @@ const SingleSelect = (props: Props) => {
                     ) : (
                         <SelectOpener
                             {...sharedProps}
+                            aria-label={ariaLabel}
                             aria-controls={dropdownId}
                             disabled={isDisabled}
                             id={uniqueOpenerId}
diff --git a/packages/wonder-blocks-dropdown/src/index.ts b/packages/wonder-blocks-dropdown/src/index.ts
index 7be68dad64..135db15361 100644
--- a/packages/wonder-blocks-dropdown/src/index.ts
+++ b/packages/wonder-blocks-dropdown/src/index.ts
@@ -7,8 +7,8 @@ import MultiSelect from "./components/multi-select";
 import Combobox from "./components/combobox";
 import Listbox from "./components/listbox";
 
-import type {Labels} from "./components/multi-select";
-import type {SingleSelectLabels} from "./components/single-select";
+import type {LabelsValues} from "./components/multi-select";
+import type {SingleSelectLabelsValues} from "./components/single-select";
 
 export {
     ActionItem,
@@ -21,4 +21,4 @@ export {
     Listbox,
 };
 
-export type {Labels, SingleSelectLabels};
+export type {LabelsValues, SingleSelectLabelsValues};
diff --git a/packages/wonder-blocks-dropdown/src/util/constants.ts b/packages/wonder-blocks-dropdown/src/util/constants.ts
index 72a3be9ff7..4f6d9b2017 100644
--- a/packages/wonder-blocks-dropdown/src/util/constants.ts
+++ b/packages/wonder-blocks-dropdown/src/util/constants.ts
@@ -1,18 +1,6 @@
 import {spacing} from "@khanacademy/wonder-blocks-tokens";
 import {ComboboxLabels} from "./types";
 
-/**
- * Key value mapping reference:
- * https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values
- */
-export const keys = {
-    escape: "Escape",
-    tab: "Tab",
-    space: " ",
-    up: "ArrowUp",
-    down: "ArrowDown",
-} as const;
-
 export const selectDropdownStyle = {
     marginTop: spacing.xSmall_8,
     marginBottom: spacing.xSmall_8,