@khanacademy/wonder-blocks-dropdown 5.3.8 → 5.4.0

package/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");
+        });
+    });
 });

package/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");
+        });
+    });
 });