From 4e82c4c2f7d12e36a4ffca44ad33b4c3357dc353 Mon Sep 17 00:00:00 2001
From: Bea Esguerra <beaesguerra@users.noreply.github.com>
Date: Tue, 25 Jun 2024 09:40:09 -0600
Subject: [PATCH] Improve a11y attributes and support for id props in dropdown
 components (#2257)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary:
- ActionMenu: Adds new optional props: `id` and `dropdownId`. If not provided, they are auto-generated. Ids are applied and the dropdownId is now used for the `aria-controls` attribute for the opener
- SingleSelect and MultiSelect: Adds optional `dropdownId` prop. If `id` or `dropdownId` props are not provided, ids for these will be auto-generated. The opener's `aria-controls` attribute is set to the dropdown id
- Make sure default and custom openers have all the correct attributes (`aria-haspopup`, `aria-expanded`). This addresses warnings in the Storybook a11y add on

Issue: WB-1714

## Test plan:
- Review documentation ActionMenu, SingleSelect, and MultiSelect
  - `id` and `dropdownId` props
  - Docs for `With Custom Opener` example
- Confirm in ActionMenu, SingleSelect, and MultiSelect:
  - When the `id` and `dropdownId` props are not set, there is an auto-generated id for each of these on the opener and the dropdown. The opener should also have `aria-controls` set to the dropdown id
  - When the `id` and `dropdownId` props are set, they should be the id on the opener and the dropdown elements. The opener should also have `aria-controls` set to the provided `dropdownId`
  - The opener should have the `aria-haspopup` and `aria-expanded` attributes set
  - All of the above should apply also when a custom opener is used

Author: beaesguerra

Reviewers: jandrade

Required Reviewers:

Approved By: jandrade

Checks: ✅ codecov/project, ✅ Lint (ubuntu-latest, 20.x), ✅ Check build sizes (ubuntu-latest, 20.x), ✅ Test (ubuntu-latest, 20.x, 2/2), ✅ Test (ubuntu-latest, 20.x, 1/2), ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 20.x), ✅ gerald, ✅ Chromatic - Get results on regular PRs (ubuntu-latest, 20.x), ✅ Test (ubuntu-latest, 20.x, 2/2), ✅ Lint (ubuntu-latest, 20.x), ✅ Test (ubuntu-latest, 20.x, 1/2), ✅ Check build sizes (ubuntu-latest, 20.x), ✅ Chromatic - Build on regular PRs / chromatic (ubuntu-latest, 20.x), ⏭️  Publish npm snapshot, ⏭️  Chromatic - Skip on Release PR (changesets), ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ gerald, ⏭️  dependabot

Pull Request URL: https://github.com/Khan/wonder-blocks/pull/2257
---
 .changeset/ninety-dogs-push.md                |  17 +
 .../action-menu.stories.tsx                   |   4 +
 .../base-select.argtypes.ts                   |  18 +-
 .../multi-select.stories.tsx                  |   3 +
 .../single-select.stories.tsx                 |   3 +
 .../components/__tests__/action-menu.test.tsx | 309 ++++++++++++++++--
 .../__tests__/multi-select.test.tsx           | 293 +++++++++++++++++
 .../__tests__/single-select.test.tsx          | 306 +++++++++++++++++
 .../src/components/action-menu.tsx            | 123 ++++---
 .../src/components/dropdown-core.tsx          |   6 +
 .../src/components/dropdown-opener.tsx        |  18 +-
 .../src/components/multi-select.tsx           | 155 +++++----
 .../src/components/single-select.tsx          | 144 ++++----
 13 files changed, 1210 insertions(+), 189 deletions(-)
 create mode 100644 .changeset/ninety-dogs-push.md

diff --git a/.changeset/ninety-dogs-push.md b/.changeset/ninety-dogs-push.md
new file mode 100644
index 000000000..935fd5c00
--- /dev/null
+++ b/.changeset/ninety-dogs-push.md
@@ -0,0 +1,17 @@
+---
+"@khanacademy/wonder-blocks-dropdown": minor
+---
+
+Improves support for providing ids to the opener and dropdown elements. These ids are auto-generated if they are not provided.
+
+Also applies attributes to elements automatically for improved accessibility (`aria-controls`, `aria-haspopup`, `aria-expanded`).
+
+- `ActionMenu`
+  - Adds new `dropdownId` and `id` props. If these are not provided, these ids will be generated automatically
+  - `aria-controls` is set to the dropdown id for both default and custom openers
+  - Ensure `aria-haspopup` and `aria-expanded` attributes are set on both default and custom openers
+- `SingleSelect` and `MultiSelect`
+  - Adds new `dropdownId` prop. If this is not provided, an id will be generated automatically
+  - If the `id` prop is not provided, an id for the component is now generated automatically
+  - `aria-controls` is set to the dropdown id for both default and custom openers
+  - Ensure `id`, `aria-haspopup` and `aria-expanded` attributes are set on both default and custom openers
diff --git a/__docs__/wonder-blocks-dropdown/action-menu.stories.tsx b/__docs__/wonder-blocks-dropdown/action-menu.stories.tsx
index 9618c9c80..4aef5bc08 100644
--- a/__docs__/wonder-blocks-dropdown/action-menu.stories.tsx
+++ b/__docs__/wonder-blocks-dropdown/action-menu.stories.tsx
@@ -358,6 +358,9 @@ export const Controlled: StoryComponentType = {
  *
  * **Note:** If you need to use a custom ID for testing the opener, make sure to
  * pass the testId prop inside the opener component/element.
+ *
+ * **Accessibility:** When a custom opener is used, the following attributes are
+ * added automatically: `aria-expanded`, `aria-haspopup`, and `aria-controls`.
  */
 
 export const CustomOpener: StoryComponentType = {
@@ -375,6 +378,7 @@ export const CustomOpener: StoryComponentType = {
                     hovered && styles.hovered,
                     pressed && styles.pressed,
                 ]}
+                role="button"
             >
                 {text}
             </LabelLarge>
diff --git a/__docs__/wonder-blocks-dropdown/base-select.argtypes.ts b/__docs__/wonder-blocks-dropdown/base-select.argtypes.ts
index de194e6ba..d15d74d64 100644
--- a/__docs__/wonder-blocks-dropdown/base-select.argtypes.ts
+++ b/__docs__/wonder-blocks-dropdown/base-select.argtypes.ts
@@ -117,8 +117,22 @@ const argTypes: ArgTypes = {
         control: {type: "text"},
         description: `Unique identifier attached to the field control. If used,
             we need to guarantee that the ID is unique within everything
-            rendered on a page. Used to match \`<label>\` with \`<button>\`
-            elements for screenreaders.`,
+            rendered on a page. If one is not provided, one is auto-generated.
+            Used to match \`<label>\` with \`<button>\` elements for
+            screenreaders.`,
+        table: {
+            type: {summary: "string"},
+        },
+        type: {name: "string", required: false},
+    },
+
+    dropdownId: {
+        control: {type: "text"},
+        description: `Unique identifier attached to the dropdown. If used,
+            we need to guarantee that the ID is unique within everything
+            rendered on a page. If one is not provided, one is auto-generated.
+            It is used for the opener's \`aria-controls\` attribute for
+            screenreaders.`,
         table: {
             type: {summary: "string"},
         },
diff --git a/__docs__/wonder-blocks-dropdown/multi-select.stories.tsx b/__docs__/wonder-blocks-dropdown/multi-select.stories.tsx
index 0a169500c..366d305a6 100644
--- a/__docs__/wonder-blocks-dropdown/multi-select.stories.tsx
+++ b/__docs__/wonder-blocks-dropdown/multi-select.stories.tsx
@@ -502,6 +502,9 @@ export const VirtualizedFilterable: StoryComponentType = {
  *
  * **Note:** If you need to use a custom ID for testing the opener, make sure to
  * pass the testId prop inside the opener component/element.
+ *
+ * **Accessibility:** When a custom opener is used, the following attributes are
+ * added automatically: `aria-expanded`, `aria-haspopup`, and `aria-controls`.
  */
 export const CustomOpener: StoryComponentType = {
     render: Template,
diff --git a/__docs__/wonder-blocks-dropdown/single-select.stories.tsx b/__docs__/wonder-blocks-dropdown/single-select.stories.tsx
index 50048360c..26780d7fd 100644
--- a/__docs__/wonder-blocks-dropdown/single-select.stories.tsx
+++ b/__docs__/wonder-blocks-dropdown/single-select.stories.tsx
@@ -660,6 +660,9 @@ export const DropdownInModal: StoryComponentType = {
  *
  * **Note:** If you need to use a custom ID for testing the opener, make sure to
  * pass the testId prop inside the opener component/element.
+ *
+ * **Accessibility:** When a custom opener is used, the following attributes are
+ * added automatically: `aria-expanded`, `aria-haspopup`, and `aria-controls`.
  */
 export const CustomOpener: StoryComponentType = {
     render: Template,
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 8bc04d628..d113deb3e 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
@@ -1,3 +1,4 @@
+/* eslint-disable max-lines */
 import * as React from "react";
 import {render, screen} from "@testing-library/react";
 import {PointerEventsCheckLevel, userEvent} from "@testing-library/user-event";
@@ -145,29 +146,6 @@ describe("ActionMenu", () => {
         expect(screen.queryByRole("menu")).not.toBeInTheDocument();
     });
 
-    it("updates the aria-expanded value when opening", async () => {
-        // Arrange
-        render(
-            <ActionMenu
-                menuText={"Action menu!"}
-                testId="openTest"
-                onChange={onChange}
-                selectedValues={[]}
-            >
-                <ActionItem label="Action" onClick={onClick} />
-                <SeparatorItem />
-                <OptionItem label="Toggle" value="toggle" onClick={onToggle} />
-            </ActionMenu>,
-        );
-
-        // Act
-        const opener = await screen.findByRole("button");
-        await userEvent.click(opener);
-
-        // Assert
-        expect(opener).toHaveAttribute("aria-expanded", "true");
-    });
-
     it("triggers actions", async () => {
         // Arrange
         const onChange = jest.fn();
@@ -916,4 +894,289 @@ describe("ActionMenu", () => {
             });
         });
     });
+
+    describe("Ids", () => {
+        it("Should auto-generate an id for the opener if `id` prop is not provided", async () => {
+            // Arrange
+            render(
+                <ActionMenu menuText={"Action menu!"}>
+                    <ActionItem label="Create" />
+                </ActionMenu>,
+            );
+
+            // Act
+            const opener = await screen.findByRole("button");
+
+            // Assert
+            // Expect autogenerated id to be in the form uid-action-menu-opener-[number]-wb-id
+            expect(opener).toHaveAttribute(
+                "id",
+                expect.stringMatching(/^uid-action-menu-opener-\d+-wb-id$/),
+            );
+        });
+
+        it("Should use the `id` prop if provided", async () => {
+            // Arrange
+            const id = "test-id";
+            render(
+                <ActionMenu menuText={"Action menu!"} id={id}>
+                    <ActionItem label="Create" />
+                </ActionMenu>,
+            );
+
+            // Act
+            const opener = await screen.findByRole("button");
+
+            // Assert
+            expect(opener).toHaveAttribute("id", id);
+        });
+        it("Should auto-generate an id for the dropdown if `dropdownId` prop is not provided", async () => {
+            // Arrange
+            render(
+                <ActionMenu menuText={"Action menu!"}>
+                    <ActionItem label="Create" />
+                </ActionMenu>,
+            );
+
+            // Act
+            // Open the dropdown
+            const opener = await screen.findByRole("button");
+            await userEvent.click(opener);
+
+            // Assert
+            expect(
+                await screen.findByRole("menu", {hidden: true}),
+            ).toHaveAttribute(
+                "id",
+                expect.stringMatching(/^uid-action-menu-dropdown-\d+-wb-id$/),
+            );
+        });
+
+        it("Should use the `dropdownId` prop if provided", async () => {
+            // Arrange
+            const dropdownId = "test-id";
+            render(
+                <ActionMenu menuText={"Action menu!"} dropdownId={dropdownId}>
+                    <ActionItem label="Create" />
+                </ActionMenu>,
+            );
+
+            // Act
+            // Open the dropdown
+            const opener = await screen.findByRole("button");
+            await userEvent.click(opener);
+
+            // Assert
+            expect(
+                await screen.findByRole("menu", {hidden: true}),
+            ).toHaveAttribute("id", dropdownId);
+        });
+    });
+
+    describe("a11y > aria-controls", () => {
+        it("Should set the `aria-controls` attribute on the default opener to the provided dropdownId prop", async () => {
+            // Arrange
+            const dropdownId = "test-id";
+            render(
+                <ActionMenu menuText={"Action menu!"} dropdownId={dropdownId}>
+                    <ActionItem label="Create" />
+                </ActionMenu>,
+            );
+
+            // Act
+            const opener = await screen.findByRole("button");
+            await userEvent.click(opener);
+            const dropdown = await screen.findByRole("menu", {hidden: true});
+
+            // Assert
+            expect(opener).toHaveAttribute("aria-controls", dropdown.id);
+            expect(opener).toHaveAttribute("aria-controls", dropdownId);
+        });
+
+        it("Should set the `aria-controls` attribute on the default opener to the auto-generated dropdownId", async () => {
+            // Arrange
+            render(
+                <ActionMenu menuText={"Action menu!"}>
+                    <ActionItem label="Create" />
+                </ActionMenu>,
+            );
+
+            // Act
+            const opener = await screen.findByRole("button");
+            await userEvent.click(opener);
+            const dropdown = await screen.findByRole("menu", {hidden: true});
+
+            // Assert
+            expect(opener).toHaveAttribute("aria-controls", dropdown.id);
+            expect(opener).toHaveAttribute(
+                "aria-controls",
+                expect.stringMatching(/^uid-action-menu-dropdown-\d+-wb-id$/),
+            );
+        });
+
+        it("Should set the `aria-controls` attribute on the custom opener to the provided dropdownId prop", async () => {
+            // Arrange
+            const dropdownId = "test-id";
+            render(
+                <ActionMenu
+                    menuText={"Action menu!"}
+                    dropdownId={dropdownId}
+                    opener={() => (
+                        <button aria-label="Search" onClick={jest.fn()} />
+                    )}
+                >
+                    <ActionItem label="Action" onClick={onClick} />
+                </ActionMenu>,
+            );
+
+            // Act
+            const opener = await screen.findByLabelText("Search");
+            await userEvent.click(opener);
+            const dropdown = await screen.findByRole("menu", {hidden: true});
+
+            // Assert
+            expect(opener).toHaveAttribute("aria-controls", dropdown.id);
+            expect(opener).toHaveAttribute("aria-controls", dropdownId);
+        });
+
+        it("Should set the `aria-controls` attribute on the custom opener to the auto-generated dropdownId", async () => {
+            // Arrange
+            render(
+                <ActionMenu
+                    menuText={"Action menu!"}
+                    opener={() => (
+                        <button aria-label="Search" onClick={jest.fn()} />
+                    )}
+                >
+                    <ActionItem label="Action" onClick={onClick} />
+                </ActionMenu>,
+            );
+
+            // Act
+            const opener = await screen.findByLabelText("Search");
+            await userEvent.click(opener);
+            const dropdown = await screen.findByRole("menu", {hidden: true});
+
+            // Assert
+            expect(opener).toHaveAttribute("aria-controls", dropdown.id);
+            expect(opener).toHaveAttribute(
+                "aria-controls",
+                expect.stringMatching(/^uid-action-menu-dropdown-\d+-wb-id$/),
+            );
+        });
+    });
+
+    describe("a11y > aria-haspopup", () => {
+        it("should have aria-haspopup set on the opener", async () => {
+            // Arrange
+            render(
+                <ActionMenu menuText={"Action menu!"} onChange={onChange}>
+                    <ActionItem label="Action" onClick={onClick} />
+                </ActionMenu>,
+            );
+
+            // Act
+            const opener = await screen.findByRole("button");
+
+            // Assert
+            expect(opener).toHaveAttribute("aria-haspopup", "menu");
+        });
+
+        it("should have aria-haspopup set on the custom opener", async () => {
+            // Arrange
+            render(
+                <ActionMenu
+                    menuText={"Action menu!"}
+                    onChange={onChange}
+                    opener={() => (
+                        <button aria-label="Search" onClick={jest.fn()} />
+                    )}
+                >
+                    <ActionItem label="Action" onClick={onClick} />
+                </ActionMenu>,
+            );
+
+            // Act
+            const opener = await screen.findByLabelText("Search");
+
+            // Assert
+            expect(opener).toHaveAttribute("aria-haspopup", "menu");
+        });
+    });
+
+    describe("a11y > aria-expanded", () => {
+        it("should have aria-expanded=false when closed", async () => {
+            // Arrange
+            render(
+                <ActionMenu menuText={"Action menu!"} onChange={onChange}>
+                    <ActionItem label="Action" onClick={onClick} />
+                </ActionMenu>,
+            );
+
+            // Act
+            const opener = await screen.findByRole("button");
+
+            // Assert
+            expect(opener).toHaveAttribute("aria-expanded", "false");
+        });
+
+        it("updates the aria-expanded value when opening", async () => {
+            // Arrange
+            render(
+                <ActionMenu menuText={"Action menu!"} onChange={onChange}>
+                    <ActionItem label="Action" onClick={onClick} />
+                </ActionMenu>,
+            );
+
+            // Act
+            const opener = await screen.findByRole("button");
+            await userEvent.click(opener);
+
+            // Assert
+            expect(opener).toHaveAttribute("aria-expanded", "true");
+        });
+
+        it("should have aria-expanded=false when closed and using a custom opener", async () => {
+            // Arrange
+            render(
+                <ActionMenu
+                    menuText={"Action menu!"}
+                    onChange={onChange}
+                    opener={() => (
+                        <button aria-label="Search" onClick={jest.fn()} />
+                    )}
+                >
+                    <ActionItem label="Action" onClick={onClick} />
+                </ActionMenu>,
+            );
+
+            // Act
+            const opener = await screen.findByLabelText("Search");
+
+            // Assert
+            expect(opener).toHaveAttribute("aria-expanded", "false");
+        });
+
+        it("updates the aria-expanded value when opening and using a custom opener", async () => {
+            // Arrange
+            render(
+                <ActionMenu
+                    menuText={"Action menu!"}
+                    onChange={onChange}
+                    opener={() => (
+                        <button aria-label="Search" onClick={jest.fn()} />
+                    )}
+                >
+                    <ActionItem label="Action" onClick={onClick} />
+                </ActionMenu>,
+            );
+
+            // Act
+            const opener = await screen.findByLabelText("Search");
+            await userEvent.click(opener);
+
+            // Assert
+            expect(opener).toHaveAttribute("aria-expanded", "true");
+        });
+    });
 });
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 98da98a61..2989923bf 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
@@ -1777,4 +1777,297 @@ describe("MultiSelect", () => {
             expect(multiSelect).not.toHaveAttribute("disabled");
         });
     });
+
+    describe("Ids", () => {
+        it("Should auto-generate an id for the opener if `id` prop is not provided", async () => {
+            // Arrange
+            doRender(
+                <MultiSelect onChange={jest.fn()}>
+                    <OptionItem label="item 1" value="1" />
+                    <OptionItem label="item 2" value="2" />
+                </MultiSelect>,
+            );
+
+            // Act
+            const opener = await screen.findByRole("button");
+
+            // Assert
+            expect(opener).toHaveAttribute(
+                "id",
+                expect.stringMatching(/^uid-multi-select-opener-\d+-wb-id$/),
+            );
+        });
+        it("Should use the `id` prop if provided", async () => {
+            // Arrange
+            const id = "test-id";
+            doRender(
+                <MultiSelect onChange={jest.fn()} id={id}>
+                    <OptionItem label="item 1" value="1" />
+                    <OptionItem label="item 2" value="2" />
+                </MultiSelect>,
+            );
+
+            // Act
+            const opener = await screen.findByRole("button");
+
+            // Assert
+            expect(opener).toHaveAttribute("id", id);
+        });
+        it("Should auto-generate an id for the dropdown if `dropdownId` prop is not provided", async () => {
+            // Arrange
+            const {userEvent} = doRender(
+                <MultiSelect onChange={jest.fn()}>
+                    <OptionItem label="item 1" value="1" />
+                    <OptionItem label="item 2" value="2" />
+                </MultiSelect>,
+            );
+
+            // Act
+            // Open the dropdown
+            const opener = await screen.findByRole("button");
+            await userEvent.click(opener);
+
+            // Assert
+            expect(
+                await screen.findByRole("listbox", {hidden: true}),
+            ).toHaveAttribute(
+                "id",
+                expect.stringMatching(/^uid-multi-select-dropdown-\d+-wb-id$/),
+            );
+        });
+        it("Should use the `dropdownId` prop if provided", async () => {
+            // Arrange
+            const dropdownId = "test-id";
+            const {userEvent} = doRender(
+                <MultiSelect onChange={jest.fn()} dropdownId={dropdownId}>
+                    <OptionItem label="item 1" value="1" />
+                    <OptionItem label="item 2" value="2" />
+                </MultiSelect>,
+            );
+
+            // Act
+            // Open the dropdown
+            const opener = await screen.findByRole("button");
+            await userEvent.click(opener);
+
+            // Assert
+            expect(
+                await screen.findByRole("listbox", {hidden: true}),
+            ).toHaveAttribute("id", dropdownId);
+        });
+    });
+
+    describe("a11y > aria-controls", () => {
+        it("Should set the `aria-controls` attribute on the default opener to the provided dropdownId prop", async () => {
+            // Arrange
+            const dropdownId = "test-id";
+            const {userEvent} = doRender(
+                <MultiSelect onChange={jest.fn()} dropdownId={dropdownId}>
+                    <OptionItem label="item 1" value="1" />
+                    <OptionItem label="item 2" value="2" />
+                </MultiSelect>,
+            );
+
+            // Act
+            const opener = await screen.findByRole("button");
+            await userEvent.click(opener);
+            const dropdown = await screen.findByRole("listbox", {hidden: true});
+
+            // Assert
+            expect(opener).toHaveAttribute("aria-controls", dropdown.id);
+            expect(opener).toHaveAttribute("aria-controls", dropdownId);
+        });
+
+        it("Should set the `aria-controls` attribute on the default opener to the auto-generated dropdownId", async () => {
+            // Arrange
+            const {userEvent} = doRender(
+                <MultiSelect onChange={jest.fn()}>
+                    <OptionItem label="item 1" value="1" />
+                    <OptionItem label="item 2" value="2" />
+                </MultiSelect>,
+            );
+
+            // Act
+            const opener = await screen.findByRole("button");
+            await userEvent.click(opener);
+            const dropdown = await screen.findByRole("listbox", {hidden: true});
+
+            // Assert
+            expect(opener).toHaveAttribute("aria-controls", dropdown.id);
+            expect(opener).toHaveAttribute(
+                "aria-controls",
+                expect.stringMatching(/^uid-multi-select-dropdown-\d+-wb-id$/),
+            );
+        });
+
+        it("Should set the `aria-controls` attribute on the custom opener to the provided dropdownId prop", async () => {
+            // Arrange
+            const dropdownId = "test-id";
+            const {userEvent} = doRender(
+                <MultiSelect
+                    onChange={jest.fn()}
+                    dropdownId={dropdownId}
+                    opener={() => (
+                        <button aria-label="Search" onClick={jest.fn()} />
+                    )}
+                >
+                    <OptionItem label="item 1" value="1" />
+                    <OptionItem label="item 2" value="2" />
+                </MultiSelect>,
+            );
+
+            // Act
+            const opener = await screen.findByLabelText("Search");
+            await userEvent.click(opener);
+            const dropdown = await screen.findByRole("listbox", {hidden: true});
+
+            // Assert
+            expect(opener).toHaveAttribute("aria-controls", dropdown.id);
+            expect(opener).toHaveAttribute("aria-controls", dropdownId);
+        });
+
+        it("Should set the `aria-controls` attribute on the custom opener to the auto-generated dropdownId", async () => {
+            // Arrange
+            const {userEvent} = doRender(
+                <MultiSelect
+                    onChange={jest.fn()}
+                    opener={() => (
+                        <button aria-label="Search" onClick={jest.fn()} />
+                    )}
+                >
+                    <OptionItem label="item 1" value="1" />
+                    <OptionItem label="item 2" value="2" />
+                </MultiSelect>,
+            );
+
+            // Act
+            const opener = await screen.findByLabelText("Search");
+            await userEvent.click(opener);
+            const dropdown = await screen.findByRole("listbox", {hidden: true});
+
+            // Assert
+            expect(opener).toHaveAttribute("aria-controls", dropdown.id);
+            expect(opener).toHaveAttribute(
+                "aria-controls",
+                expect.stringMatching(/^uid-multi-select-dropdown-\d+-wb-id$/),
+            );
+        });
+    });
+
+    describe("a11y > aria-haspopup", () => {
+        it("should have aria-haspopup set on the opener", async () => {
+            // Arrange
+            doRender(
+                <MultiSelect onChange={jest.fn()}>
+                    <OptionItem label="item 1" value="1" />
+                    <OptionItem label="item 2" value="2" />
+                </MultiSelect>,
+            );
+
+            // Act
+            const opener = await screen.findByRole("button");
+
+            // Assert
+            expect(opener).toHaveAttribute("aria-haspopup", "listbox");
+        });
+
+        it("should have aria-haspopup set on the custom opener", async () => {
+            // Arrange
+            doRender(
+                <MultiSelect
+                    onChange={jest.fn()}
+                    opener={() => (
+                        <button aria-label="Search" onClick={jest.fn()} />
+                    )}
+                >
+                    <OptionItem label="item 1" value="1" />
+                    <OptionItem label="item 2" value="2" />
+                </MultiSelect>,
+            );
+
+            // Act
+            const opener = await screen.findByLabelText("Search");
+
+            // Assert
+            expect(opener).toHaveAttribute("aria-haspopup", "listbox");
+        });
+    });
+
+    describe("a11y > aria-expanded", () => {
+        it("should have aria-expanded=false when closed", async () => {
+            // Arrange
+            doRender(
+                <MultiSelect onChange={jest.fn()}>
+                    <OptionItem label="item 1" value="1" />
+                    <OptionItem label="item 2" value="2" />
+                </MultiSelect>,
+            );
+
+            // Act
+            const opener = await screen.findByRole("button");
+
+            // Assert
+            expect(opener).toHaveAttribute("aria-expanded", "false");
+        });
+
+        it("updates the aria-expanded value when opening", async () => {
+            // Arrange
+            const {userEvent} = doRender(
+                <MultiSelect onChange={jest.fn()}>
+                    <OptionItem label="item 1" value="1" />
+                    <OptionItem label="item 2" value="2" />
+                </MultiSelect>,
+            );
+
+            // Act
+            const opener = await screen.findByRole("button");
+            await userEvent.click(opener);
+
+            // Assert
+            expect(opener).toHaveAttribute("aria-expanded", "true");
+        });
+
+        it("should have aria-expanded=false when closed and using a custom opener", async () => {
+            // Arrange
+            doRender(
+                <MultiSelect
+                    onChange={jest.fn()}
+                    opener={() => (
+                        <button aria-label="Search" onClick={jest.fn()} />
+                    )}
+                >
+                    <OptionItem label="item 1" value="1" />
+                    <OptionItem label="item 2" value="2" />
+                </MultiSelect>,
+            );
+
+            // Act
+            const opener = await screen.findByLabelText("Search");
+
+            // Assert
+            expect(opener).toHaveAttribute("aria-expanded", "false");
+        });
+
+        it("updates the aria-expanded value when opening and using a custom opener", async () => {
+            // Arrange
+            const {userEvent} = doRender(
+                <MultiSelect
+                    onChange={jest.fn()}
+                    opener={() => (
+                        <button aria-label="Search" onClick={jest.fn()} />
+                    )}
+                >
+                    <OptionItem label="item 1" value="1" />
+                    <OptionItem label="item 2" value="2" />
+                </MultiSelect>,
+            );
+
+            // Act
+            const opener = await screen.findByLabelText("Search");
+            await userEvent.click(opener);
+
+            // Assert
+            expect(opener).toHaveAttribute("aria-expanded", "true");
+        });
+    });
 });
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 3be3bd1e0..deb11b651 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
@@ -1340,4 +1340,310 @@ describe("SingleSelect", () => {
             expect(singleSelect).not.toHaveAttribute("disabled");
         });
     });
+
+    describe("Ids", () => {
+        it("Should auto-generate an id for the opener if `id` prop is not provided", async () => {
+            // Arrange
+            doRender(
+                <SingleSelect placeholder="Choose" onChange={jest.fn()}>
+                    <OptionItem label="item 1" value="1" />
+                    <OptionItem label="item 2" value="2" />
+                </SingleSelect>,
+            );
+
+            // Act
+            const opener = await screen.findByRole("button");
+
+            // Assert
+            expect(opener).toHaveAttribute(
+                "id",
+                expect.stringMatching(/^uid-single-select-opener-\d+-wb-id$/),
+            );
+        });
+        it("Should use the `id` prop if provided", async () => {
+            // Arrange
+            const id = "test-id";
+            doRender(
+                <SingleSelect placeholder="Choose" onChange={jest.fn()} id={id}>
+                    <OptionItem label="item 1" value="1" />
+                    <OptionItem label="item 2" value="2" />
+                </SingleSelect>,
+            );
+
+            // Act
+            const opener = await screen.findByRole("button");
+
+            // Assert
+            expect(opener).toHaveAttribute("id", id);
+        });
+        it("Should auto-generate an id for the dropdown if `dropdownId` prop is not provided", async () => {
+            // Arrange
+            const userEvent = doRender(
+                <SingleSelect placeholder="Choose" onChange={jest.fn()}>
+                    <OptionItem label="item 1" value="1" />
+                    <OptionItem label="item 2" value="2" />
+                </SingleSelect>,
+            );
+
+            // Act
+            // Open the dropdown
+            const opener = await screen.findByRole("button");
+            await userEvent.click(opener);
+
+            // Assert
+            expect(
+                await screen.findByRole("listbox", {hidden: true}),
+            ).toHaveAttribute(
+                "id",
+                expect.stringMatching(/^uid-single-select-dropdown-\d+-wb-id$/),
+            );
+        });
+        it("Should use the `dropdownId` prop if provided", async () => {
+            // Arrange
+            const dropdownId = "test-id";
+            const userEvent = doRender(
+                <SingleSelect
+                    placeholder="Choose"
+                    onChange={jest.fn()}
+                    dropdownId={dropdownId}
+                >
+                    <OptionItem label="item 1" value="1" />
+                    <OptionItem label="item 2" value="2" />
+                </SingleSelect>,
+            );
+
+            // Act
+            // Open the dropdown
+            const opener = await screen.findByRole("button");
+            await userEvent.click(opener);
+
+            // Assert
+            expect(
+                await screen.findByRole("listbox", {hidden: true}),
+            ).toHaveAttribute("id", dropdownId);
+        });
+    });
+
+    describe("a11y > aria-controls", () => {
+        it("Should set the `aria-controls` attribute on the default opener to the provided dropdownId prop", async () => {
+            // Arrange
+            const dropdownId = "test-id";
+            const userEvent = doRender(
+                <SingleSelect
+                    placeholder="Choose"
+                    onChange={jest.fn()}
+                    dropdownId={dropdownId}
+                >
+                    <OptionItem label="item 1" value="1" />
+                    <OptionItem label="item 2" value="2" />
+                </SingleSelect>,
+            );
+
+            // Act
+            const opener = await screen.findByRole("button");
+            await userEvent.click(opener);
+            const dropdown = await screen.findByRole("listbox", {hidden: true});
+
+            // Assert
+            expect(opener).toHaveAttribute("aria-controls", dropdown.id);
+            expect(opener).toHaveAttribute("aria-controls", dropdownId);
+        });
+
+        it("Should set the `aria-controls` attribute on the default opener to the auto-generated dropdownId", async () => {
+            // Arrange
+            const userEvent = doRender(
+                <SingleSelect placeholder="Choose" onChange={jest.fn()}>
+                    <OptionItem label="item 1" value="1" />
+                    <OptionItem label="item 2" value="2" />
+                </SingleSelect>,
+            );
+
+            // Act
+            const opener = await screen.findByRole("button");
+            await userEvent.click(opener);
+            const dropdown = await screen.findByRole("listbox", {hidden: true});
+
+            // Assert
+            expect(opener).toHaveAttribute("aria-controls", dropdown.id);
+            expect(opener).toHaveAttribute(
+                "aria-controls",
+                expect.stringMatching(/^uid-single-select-dropdown-\d+-wb-id$/),
+            );
+        });
+
+        it("Should set the `aria-controls` attribute on the custom opener to the provided dropdownId prop", async () => {
+            // Arrange
+            const dropdownId = "test-id";
+            const userEvent = doRender(
+                <SingleSelect
+                    placeholder="Choose"
+                    onChange={jest.fn()}
+                    dropdownId={dropdownId}
+                    opener={() => (
+                        <button aria-label="Search" onClick={jest.fn()} />
+                    )}
+                >
+                    <OptionItem label="item 1" value="1" />
+                    <OptionItem label="item 2" value="2" />
+                </SingleSelect>,
+            );
+
+            // Act
+            const opener = await screen.findByLabelText("Search");
+            await userEvent.click(opener);
+            const dropdown = await screen.findByRole("listbox", {hidden: true});
+
+            // Assert
+            expect(opener).toHaveAttribute("aria-controls", dropdown.id);
+            expect(opener).toHaveAttribute("aria-controls", dropdownId);
+        });
+
+        it("Should set the `aria-controls` attribute on the custom opener to the auto-generated dropdownId", async () => {
+            // Arrange
+            const userEvent = doRender(
+                <SingleSelect
+                    placeholder="Choose"
+                    onChange={jest.fn()}
+                    opener={() => (
+                        <button aria-label="Search" onClick={jest.fn()} />
+                    )}
+                >
+                    <OptionItem label="item 1" value="1" />
+                    <OptionItem label="item 2" value="2" />
+                </SingleSelect>,
+            );
+
+            // Act
+            const opener = await screen.findByLabelText("Search");
+            await userEvent.click(opener);
+            const dropdown = await screen.findByRole("listbox", {hidden: true});
+
+            // Assert
+            expect(opener).toHaveAttribute("aria-controls", dropdown.id);
+            expect(opener).toHaveAttribute(
+                "aria-controls",
+                expect.stringMatching(/^uid-single-select-dropdown-\d+-wb-id$/),
+            );
+        });
+    });
+
+    describe("a11y > aria-haspopup", () => {
+        it("should have aria-haspopup set on the opener", async () => {
+            // Arrange
+            doRender(
+                <SingleSelect placeholder="Choose" onChange={jest.fn()}>
+                    <OptionItem label="item 1" value="1" />
+                    <OptionItem label="item 2" value="2" />
+                </SingleSelect>,
+            );
+
+            // Act
+            const opener = await screen.findByRole("button");
+
+            // Assert
+            expect(opener).toHaveAttribute("aria-haspopup", "listbox");
+        });
+
+        it("should have aria-haspopup set on the custom opener", async () => {
+            // Arrange
+            doRender(
+                <SingleSelect
+                    placeholder="Choose"
+                    onChange={jest.fn()}
+                    opener={() => (
+                        <button aria-label="Search" onClick={jest.fn()} />
+                    )}
+                >
+                    <OptionItem label="item 1" value="1" />
+                    <OptionItem label="item 2" value="2" />
+                </SingleSelect>,
+            );
+
+            // Act
+            const opener = await screen.findByLabelText("Search");
+
+            // Assert
+            expect(opener).toHaveAttribute("aria-haspopup", "listbox");
+        });
+    });
+
+    describe("a11y > aria-expanded", () => {
+        it("should have aria-expanded=false when closed", async () => {
+            // Arrange
+            doRender(
+                <SingleSelect placeholder="Choose" onChange={jest.fn()}>
+                    <OptionItem label="item 1" value="1" />
+                    <OptionItem label="item 2" value="2" />
+                </SingleSelect>,
+            );
+
+            // Act
+            const opener = await screen.findByRole("button");
+
+            // Assert
+            expect(opener).toHaveAttribute("aria-expanded", "false");
+        });
+
+        it("updates the aria-expanded value when opening", async () => {
+            // Arrange
+            const userEvent = doRender(
+                <SingleSelect placeholder="Choose" onChange={jest.fn()}>
+                    <OptionItem label="item 1" value="1" />
+                    <OptionItem label="item 2" value="2" />
+                </SingleSelect>,
+            );
+
+            // Act
+            const opener = await screen.findByRole("button");
+            await userEvent.click(opener);
+
+            // Assert
+            expect(opener).toHaveAttribute("aria-expanded", "true");
+        });
+
+        it("should have aria-expanded=false when closed and using a custom opener", async () => {
+            // Arrange
+            doRender(
+                <SingleSelect
+                    placeholder="Choose"
+                    onChange={jest.fn()}
+                    opener={() => (
+                        <button aria-label="Search" onClick={jest.fn()} />
+                    )}
+                >
+                    <OptionItem label="item 1" value="1" />
+                    <OptionItem label="item 2" value="2" />
+                </SingleSelect>,
+            );
+
+            // Act
+            const opener = await screen.findByLabelText("Search");
+
+            // Assert
+            expect(opener).toHaveAttribute("aria-expanded", "false");
+        });
+
+        it("updates the aria-expanded value when opening and using a custom opener", async () => {
+            // Arrange
+            const userEvent = doRender(
+                <SingleSelect
+                    placeholder="Choose"
+                    onChange={jest.fn()}
+                    opener={() => (
+                        <button aria-label="Search" onClick={jest.fn()} />
+                    )}
+                >
+                    <OptionItem label="item 1" value="1" />
+                    <OptionItem label="item 2" value="2" />
+                </SingleSelect>,
+            );
+
+            // Act
+            const opener = await screen.findByLabelText("Search");
+            await userEvent.click(opener);
+
+            // Assert
+            expect(opener).toHaveAttribute("aria-expanded", "true");
+        });
+    });
 });
diff --git a/packages/wonder-blocks-dropdown/src/components/action-menu.tsx b/packages/wonder-blocks-dropdown/src/components/action-menu.tsx
index 7e92d3d88..ffbe93099 100644
--- a/packages/wonder-blocks-dropdown/src/components/action-menu.tsx
+++ b/packages/wonder-blocks-dropdown/src/components/action-menu.tsx
@@ -1,7 +1,11 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 import {StyleSheet} from "aphrodite";
-import type {AriaProps, StyleType} from "@khanacademy/wonder-blocks-core";
+import {
+    IDProvider,
+    type AriaProps,
+    type StyleType,
+} from "@khanacademy/wonder-blocks-core";
 import DropdownOpener from "./dropdown-opener";
 import ActionItem from "./action-item";
 import OptionItem from "./option-item";
@@ -72,6 +76,19 @@ type Props = AriaProps &
          * element to access pointer event state.
          */
         opener?: (openerProps: OpenerProps) => React.ReactElement<any>;
+        /**
+         * Unique identifier attached to the menu dropdown. If used, we need to
+         * guarantee that the ID is unique within everything rendered on a page.
+         * If one is not provided, one is auto-generated. It is used for the
+         * opener's `aria-controls` attribute for screenreaders.
+         */
+        dropdownId?: string;
+        /**
+         * Unique identifier attached to the field control. If used, we need to
+         * guarantee that the ID is unique within everything rendered on a page.
+         * If one is not provided, one is auto-generated.
+         */
+        id?: string;
     }>;
 
 type State = Readonly<{
@@ -233,61 +250,77 @@ export default class ActionMenu extends React.Component<Props, State> {
 
     renderOpener(
         numItems: number,
+        dropdownId: string,
     ): React.ReactElement<React.ComponentProps<typeof DropdownOpener>> {
-        const {disabled, menuText, opener, testId} = this.props;
+        const {disabled, menuText, opener, testId, id} = this.props;
 
         return (
-            <DropdownOpener
-                onClick={this.handleClick}
-                disabled={numItems === 0 || disabled}
-                text={menuText}
-                ref={this.handleOpenerRef}
-                testId={opener ? undefined : testId}
-                opened={this.state.opened}
-            >
-                {opener
-                    ? opener
-                    : (openerProps) => {
-                          const {
-                              // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                              text,
-                              opened,
-                              ...eventState
-                          } = openerProps;
-                          return (
-                              <ActionMenuOpenerCore
-                                  {...eventState}
-                                  disabled={disabled}
-                                  opened={!!opened}
-                                  testId={testId}
-                              >
-                                  {menuText}
-                              </ActionMenuOpenerCore>
-                          );
-                      }}
-            </DropdownOpener>
+            <IDProvider id={id} scope="action-menu-opener">
+                {(uniqueOpenerId) => (
+                    <DropdownOpener
+                        id={uniqueOpenerId}
+                        aria-controls={dropdownId}
+                        aria-haspopup="menu"
+                        onClick={this.handleClick}
+                        disabled={numItems === 0 || disabled}
+                        text={menuText}
+                        ref={this.handleOpenerRef}
+                        testId={opener ? undefined : testId}
+                        opened={this.state.opened}
+                    >
+                        {opener
+                            ? opener
+                            : (openerProps) => {
+                                  const {
+                                      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                                      text,
+                                      opened,
+                                      ...eventState
+                                  } = openerProps;
+                                  return (
+                                      <ActionMenuOpenerCore
+                                          {...eventState}
+                                          disabled={disabled}
+                                          opened={!!opened}
+                                          testId={testId}
+                                      >
+                                          {menuText}
+                                      </ActionMenuOpenerCore>
+                                  );
+                              }}
+                    </DropdownOpener>
+                )}
+            </IDProvider>
         );
     }
 
     render(): React.ReactNode {
-        const {alignment, dropdownStyle, style, className} = this.props;
+        const {alignment, dropdownStyle, style, className, dropdownId} =
+            this.props;
 
         const items = this.getMenuItems();
-        const dropdownOpener = this.renderOpener(items.length);
 
         return (
-            <DropdownCore
-                role="menu"
-                style={style}
-                className={className}
-                opener={dropdownOpener}
-                alignment={alignment}
-                open={this.state.opened}
-                items={items}
-                openerElement={this.openerElement}
-                onOpenChanged={this.handleOpenChanged}
-                dropdownStyle={[styles.menuTopSpace, dropdownStyle]}
-            />
+            <IDProvider id={dropdownId} scope="action-menu-dropdown">
+                {(uniqueDropdownId) => (
+                    <DropdownCore
+                        id={uniqueDropdownId}
+                        role="menu"
+                        style={style}
+                        className={className}
+                        opener={this.renderOpener(
+                            items.length,
+                            uniqueDropdownId,
+                        )}
+                        alignment={alignment}
+                        open={this.state.opened}
+                        items={items}
+                        openerElement={this.openerElement}
+                        onOpenChanged={this.handleOpenChanged}
+                        dropdownStyle={[styles.menuTopSpace, dropdownStyle]}
+                    />
+                )}
+            </IDProvider>
         );
     }
 }
diff --git a/packages/wonder-blocks-dropdown/src/components/dropdown-core.tsx b/packages/wonder-blocks-dropdown/src/components/dropdown-core.tsx
index 1df3b7e67..58643887e 100644
--- a/packages/wonder-blocks-dropdown/src/components/dropdown-core.tsx
+++ b/packages/wonder-blocks-dropdown/src/components/dropdown-core.tsx
@@ -173,6 +173,10 @@ type ExportProps = Readonly<{
      * Whether the dropdown and it's interactions should be disabled.
      */
     disabled?: boolean;
+    /**
+     * Unique identifier attached to the dropdown.
+     */
+    id?: string;
 
     // Optional props with defaults
     /**
@@ -953,6 +957,7 @@ class DropdownCore extends React.Component<Props, State> {
             light,
             openerElement,
             role,
+            id,
         } = this.props;
 
         // The dropdown width is at least the width of the opener.
@@ -978,6 +983,7 @@ class DropdownCore extends React.Component<Props, State> {
             >
                 {isFilterable && this.renderSearchField()}
                 <View
+                    id={id}
                     role={role}
                     style={[
                         styles.listboxOrMenu,
diff --git a/packages/wonder-blocks-dropdown/src/components/dropdown-opener.tsx b/packages/wonder-blocks-dropdown/src/components/dropdown-opener.tsx
index c7195c398..b85dcc3b6 100644
--- a/packages/wonder-blocks-dropdown/src/components/dropdown-opener.tsx
+++ b/packages/wonder-blocks-dropdown/src/components/dropdown-opener.tsx
@@ -39,6 +39,10 @@ type Props = Partial<Omit<AriaProps, "aria-disabled">> & {
      * Whether the dropdown is opened.
      */
     opened: boolean;
+    /**
+     * The unique identifier for the opener.
+     */
+    id?: string;
 };
 
 type DefaultProps = {
@@ -58,7 +62,15 @@ class DropdownOpener extends React.Component<Props> {
         eventState: ClickableState,
         clickableChildrenProps: ChildrenProps,
     ): React.ReactElement {
-        const {disabled, testId, text, opened} = this.props;
+        const {
+            disabled,
+            testId,
+            text,
+            opened,
+            "aria-controls": ariaControls,
+            "aria-haspopup": ariaHasPopUp,
+            id,
+        } = this.props;
         const renderedChildren = this.props.children({
             ...eventState,
             text,
@@ -70,6 +82,10 @@ class DropdownOpener extends React.Component<Props> {
         return React.cloneElement(renderedChildren, {
             ...clickableChildrenProps,
             disabled,
+            "aria-controls": ariaControls,
+            id,
+            "aria-expanded": opened ? "true" : "false",
+            "aria-haspopup": ariaHasPopUp,
             onClick: childrenProps.onClick
                 ? (e: React.MouseEvent) => {
                       // This is done to avoid overriding a
diff --git a/packages/wonder-blocks-dropdown/src/components/multi-select.tsx b/packages/wonder-blocks-dropdown/src/components/multi-select.tsx
index 5e2d62a0b..2545dc6b3 100644
--- a/packages/wonder-blocks-dropdown/src/components/multi-select.tsx
+++ b/packages/wonder-blocks-dropdown/src/components/multi-select.tsx
@@ -1,7 +1,11 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 
-import type {AriaProps, StyleType} from "@khanacademy/wonder-blocks-core";
+import {
+    IDProvider,
+    type AriaProps,
+    type StyleType,
+} from "@khanacademy/wonder-blocks-core";
 
 import ActionItem from "./action-item";
 import DropdownCore from "./dropdown-core";
@@ -158,6 +162,13 @@ type Props = AriaProps &
          * Test ID used for e2e testing.
          */
         testId?: string;
+        /**
+         * Unique identifier attached to the listbox dropdown. If used, we need to
+         * guarantee that the ID is unique within everything rendered on a page.
+         * If one is not provided, one is auto-generated. It is used for the
+         * opener's `aria-controls` attribute for screenreaders.
+         */
+        dropdownId?: string;
     }>;
 
 type State = Readonly<{
@@ -479,6 +490,7 @@ export default class MultiSelect extends React.Component<Props, State> {
             React.ComponentProps<typeof OptionItem>
         >[],
         isDisabled: boolean,
+        dropdownId: string,
     ):
         | React.ReactElement<React.ComponentProps<typeof DropdownOpener>>
         | React.ReactElement<React.ComponentProps<typeof SelectOpener>> {
@@ -511,30 +523,40 @@ export default class MultiSelect extends React.Component<Props, State> {
 
         const menuText = this.getMenuText(allChildren);
 
-        const dropdownOpener = opener ? (
-            <DropdownOpener
-                onClick={this.handleClick}
-                disabled={isDisabled}
-                ref={this.handleOpenerRef}
-                text={menuText}
-                opened={this.state.open}
-            >
-                {opener}
-            </DropdownOpener>
-        ) : (
-            <SelectOpener
-                {...sharedProps}
-                disabled={isDisabled}
-                id={id}
-                isPlaceholder={menuText === noneSelected}
-                light={light}
-                onOpenChanged={this.handleOpenChanged}
-                open={this.state.open}
-                ref={this.handleOpenerRef}
-                testId={testId}
-            >
-                {menuText}
-            </SelectOpener>
+        const dropdownOpener = (
+            <IDProvider id={id} scope="multi-select-opener">
+                {(uniqueOpenerId) => {
+                    return opener ? (
+                        <DropdownOpener
+                            id={uniqueOpenerId}
+                            aria-controls={dropdownId}
+                            aria-haspopup="listbox"
+                            onClick={this.handleClick}
+                            disabled={isDisabled}
+                            ref={this.handleOpenerRef}
+                            text={menuText}
+                            opened={this.state.open}
+                        >
+                            {opener}
+                        </DropdownOpener>
+                    ) : (
+                        <SelectOpener
+                            {...sharedProps}
+                            disabled={isDisabled}
+                            id={uniqueOpenerId}
+                            aria-controls={dropdownId}
+                            isPlaceholder={menuText === noneSelected}
+                            light={light}
+                            onOpenChanged={this.handleOpenChanged}
+                            open={this.state.open}
+                            ref={this.handleOpenerRef}
+                            testId={testId}
+                        >
+                            {menuText}
+                        </SelectOpener>
+                    );
+                }}
+            </IDProvider>
         );
 
         return dropdownOpener;
@@ -552,6 +574,7 @@ export default class MultiSelect extends React.Component<Props, State> {
             "aria-invalid": ariaInvalid,
             "aria-required": ariaRequired,
             disabled,
+            dropdownId,
         } = this.props;
         const {open, searchText} = this.state;
         const {clearSearch, filter, noResults, someSelected} =
@@ -567,44 +590,54 @@ export default class MultiSelect extends React.Component<Props, State> {
         ).length;
         const filteredItems = this.getMenuItems(allChildren);
         const isDisabled = numEnabledOptions === 0 || disabled;
-        const opener = this.renderOpener(allChildren, isDisabled);
 
         return (
-            <DropdownCore
-                role="listbox"
-                alignment={alignment}
-                dropdownStyle={[
-                    isFilterable && filterableDropdownStyle,
-                    selectDropdownStyle,
-                    dropdownStyle,
-                ]}
-                isFilterable={isFilterable}
-                items={[
-                    ...this.getShortcuts(numEnabledOptions),
-                    ...filteredItems,
-                ]}
-                light={light}
-                onOpenChanged={this.handleOpenChanged}
-                open={open}
-                opener={opener}
-                openerElement={this.state.openerElement}
-                selectionType="multi"
-                style={style}
-                className={className}
-                onSearchTextChanged={
-                    isFilterable ? this.handleSearchTextChanged : undefined
-                }
-                searchText={isFilterable ? searchText : ""}
-                labels={{
-                    clearSearch,
-                    filter,
-                    noResults,
-                    someResults: someSelected,
-                }}
-                aria-invalid={ariaInvalid}
-                aria-required={ariaRequired}
-                disabled={isDisabled}
-            />
+            <IDProvider id={dropdownId} scope="multi-select-dropdown">
+                {(uniqueDropdownId) => (
+                    <DropdownCore
+                        id={uniqueDropdownId}
+                        role="listbox"
+                        alignment={alignment}
+                        dropdownStyle={[
+                            isFilterable && filterableDropdownStyle,
+                            selectDropdownStyle,
+                            dropdownStyle,
+                        ]}
+                        isFilterable={isFilterable}
+                        items={[
+                            ...this.getShortcuts(numEnabledOptions),
+                            ...filteredItems,
+                        ]}
+                        light={light}
+                        onOpenChanged={this.handleOpenChanged}
+                        open={open}
+                        opener={this.renderOpener(
+                            allChildren,
+                            isDisabled,
+                            uniqueDropdownId,
+                        )}
+                        openerElement={this.state.openerElement}
+                        selectionType="multi"
+                        style={style}
+                        className={className}
+                        onSearchTextChanged={
+                            isFilterable
+                                ? this.handleSearchTextChanged
+                                : undefined
+                        }
+                        searchText={isFilterable ? searchText : ""}
+                        labels={{
+                            clearSearch,
+                            filter,
+                            noResults,
+                            someResults: someSelected,
+                        }}
+                        aria-invalid={ariaInvalid}
+                        aria-required={ariaRequired}
+                        disabled={isDisabled}
+                    />
+                )}
+            </IDProvider>
         );
     }
 }
diff --git a/packages/wonder-blocks-dropdown/src/components/single-select.tsx b/packages/wonder-blocks-dropdown/src/components/single-select.tsx
index bff80f256..52cb8be21 100644
--- a/packages/wonder-blocks-dropdown/src/components/single-select.tsx
+++ b/packages/wonder-blocks-dropdown/src/components/single-select.tsx
@@ -1,7 +1,11 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 
-import type {AriaProps, StyleType} from "@khanacademy/wonder-blocks-core";
+import {
+    IDProvider,
+    type AriaProps,
+    type StyleType,
+} from "@khanacademy/wonder-blocks-core";
 
 import DropdownCore from "./dropdown-core";
 import DropdownOpener from "./dropdown-opener";
@@ -150,6 +154,13 @@ type Props = AriaProps &
          * top. The items will be filtered by the input.
          */
         isFilterable?: boolean;
+        /**
+         * Unique identifier attached to the listbox dropdown. If used, we need to
+         * guarantee that the ID is unique within everything rendered on a page.
+         * If one is not provided, one is auto-generated. It is used for the
+         * opener's `aria-controls` attribute for screenreaders.
+         */
+        dropdownId?: string;
     }>;
 
 type State = Readonly<{
@@ -366,6 +377,7 @@ export default class SingleSelect extends React.Component<Props, State> {
 
     renderOpener(
         isDisabled: boolean,
+        dropdownId: string,
     ):
         | React.ReactElement<React.ComponentProps<typeof DropdownOpener>>
         | React.ReactElement<React.ComponentProps<typeof SelectOpener>> {
@@ -409,32 +421,43 @@ export default class SingleSelect extends React.Component<Props, State> {
             ? getLabel(selectedItem.props)
             : placeholder;
 
-        const dropdownOpener = opener ? (
-            <DropdownOpener
-                onClick={this.handleClick}
-                disabled={isDisabled}
-                ref={this.handleOpenerRef}
-                text={menuText}
-                opened={this.state.open}
-            >
-                {opener}
-            </DropdownOpener>
-        ) : (
-            <SelectOpener
-                {...sharedProps}
-                disabled={isDisabled}
-                id={id}
-                error={error}
-                isPlaceholder={!selectedItem}
-                light={light}
-                onOpenChanged={this.handleOpenChanged}
-                open={this.state.open}
-                ref={this.handleOpenerRef}
-                testId={testId}
-            >
-                {menuText}
-            </SelectOpener>
+        const dropdownOpener = (
+            <IDProvider id={id} scope="single-select-opener">
+                {(uniqueOpenerId) => {
+                    return opener ? (
+                        <DropdownOpener
+                            id={uniqueOpenerId}
+                            aria-controls={dropdownId}
+                            aria-haspopup="listbox"
+                            onClick={this.handleClick}
+                            disabled={isDisabled}
+                            ref={this.handleOpenerRef}
+                            text={menuText}
+                            opened={this.state.open}
+                        >
+                            {opener}
+                        </DropdownOpener>
+                    ) : (
+                        <SelectOpener
+                            {...sharedProps}
+                            aria-controls={dropdownId}
+                            disabled={isDisabled}
+                            id={uniqueOpenerId}
+                            error={error}
+                            isPlaceholder={!selectedItem}
+                            light={light}
+                            onOpenChanged={this.handleOpenChanged}
+                            open={this.state.open}
+                            ref={this.handleOpenerRef}
+                            testId={testId}
+                        >
+                            {menuText}
+                        </SelectOpener>
+                    );
+                }}
+            </IDProvider>
         );
+
         return dropdownOpener;
     }
 
@@ -453,6 +476,7 @@ export default class SingleSelect extends React.Component<Props, State> {
             "aria-invalid": ariaInvalid,
             "aria-required": ariaRequired,
             disabled,
+            dropdownId,
         } = this.props;
         const {searchText} = this.state;
         const allChildren = (
@@ -465,39 +489,45 @@ export default class SingleSelect extends React.Component<Props, State> {
         ).length;
         const items = this.getMenuItems(allChildren);
         const isDisabled = numEnabledOptions === 0 || disabled;
-        const opener = this.renderOpener(isDisabled);
 
         return (
-            <DropdownCore
-                role="listbox"
-                selectionType="single"
-                alignment={alignment}
-                autoFocus={autoFocus}
-                enableTypeAhead={enableTypeAhead}
-                dropdownStyle={[
-                    isFilterable && filterableDropdownStyle,
-                    selectDropdownStyle,
-                    dropdownStyle,
-                ]}
-                initialFocusedIndex={this.selectedIndex}
-                items={items}
-                light={light}
-                onOpenChanged={this.handleOpenChanged}
-                open={this.state.open}
-                opener={opener}
-                openerElement={this.state.openerElement}
-                style={style}
-                className={className}
-                isFilterable={isFilterable}
-                onSearchTextChanged={
-                    isFilterable ? this.handleSearchTextChanged : undefined
-                }
-                searchText={isFilterable ? searchText : ""}
-                labels={labels}
-                aria-invalid={ariaInvalid}
-                aria-required={ariaRequired}
-                disabled={isDisabled}
-            />
+            <IDProvider id={dropdownId} scope="single-select-dropdown">
+                {(uniqueDropdownId) => (
+                    <DropdownCore
+                        id={uniqueDropdownId}
+                        role="listbox"
+                        selectionType="single"
+                        alignment={alignment}
+                        autoFocus={autoFocus}
+                        enableTypeAhead={enableTypeAhead}
+                        dropdownStyle={[
+                            isFilterable && filterableDropdownStyle,
+                            selectDropdownStyle,
+                            dropdownStyle,
+                        ]}
+                        initialFocusedIndex={this.selectedIndex}
+                        items={items}
+                        light={light}
+                        onOpenChanged={this.handleOpenChanged}
+                        open={this.state.open}
+                        opener={this.renderOpener(isDisabled, uniqueDropdownId)}
+                        openerElement={this.state.openerElement}
+                        style={style}
+                        className={className}
+                        isFilterable={isFilterable}
+                        onSearchTextChanged={
+                            isFilterable
+                                ? this.handleSearchTextChanged
+                                : undefined
+                        }
+                        searchText={isFilterable ? searchText : ""}
+                        labels={labels}
+                        aria-invalid={ariaInvalid}
+                        aria-required={ariaRequired}
+                        disabled={isDisabled}
+                    />
+                )}
+            </IDProvider>
         );
     }
 }