@khanacademy/wonder-blocks-dropdown 5.3.5 → 5.3.7

package/src/components/__tests__/select-opener.test.tsx

@@ -0,0 +1,220 @@
+import * as React from "react";
+import {fireEvent, render, screen} from "@testing-library/react";
+import {userEvent} from "@testing-library/user-event";
+
+import SelectOpener from "../select-opener";
+
+describe("SelectOpener", () => {
+    describe("onOpenChanged", () => {
+        const children = "text";
+        it("should trigger using the mouse", async () => {
+            // Arrange
+            const onOpenMock = jest.fn();
+
+            render(
+                <SelectOpener
+                    onOpenChanged={onOpenMock}
+                    disabled={false}
+                    error={false}
+                    isPlaceholder={false}
+                    light={false}
+                    open={false}
+                >
+                    {children}
+                </SelectOpener>,
+            );
+
+            // Act
+            // Press the button.
+            await userEvent.click(await screen.findByRole("button"));
+
+            // Assert
+            expect(onOpenMock).toHaveBeenCalledTimes(1);
+        });
+
+        it("should trigger by pressing {Space}", async () => {
+            // Arrange
+            const onOpenMock = jest.fn();
+
+            render(
+                <SelectOpener
+                    onOpenChanged={onOpenMock}
+                    disabled={false}
+                    error={false}
+                    isPlaceholder={false}
+                    light={false}
+                    open={false}
+                >
+                    {children}
+                </SelectOpener>,
+            );
+
+            // Act
+            // Press the button.
+            const button = await screen.findByRole("button");
+            // NOTE: we need to use fireEvent here because await userEvent doesn't
+            // support keyUp/Down events and we use these handlers to override
+            // the default behavior of the button.
+            // eslint-disable-next-line testing-library/prefer-user-event
+            fireEvent.keyDown(button, {
+                key: " ",
+            });
+            // eslint-disable-next-line testing-library/prefer-user-event
+            fireEvent.keyUp(button, {
+                key: " ",
+            });
+
+            // Assert
+            expect(onOpenMock).toHaveBeenCalledTimes(1);
+        });
+
+        it("should trigger by pressing {Enter}", async () => {
+            // Arrange
+            const onOpenMock = jest.fn();
+
+            render(
+                <SelectOpener
+                    onOpenChanged={onOpenMock}
+                    disabled={false}
+                    error={false}
+                    isPlaceholder={false}
+                    light={false}
+                    open={false}
+                >
+                    {children}
+                </SelectOpener>,
+            );
+
+            // Act
+            // Press the button.
+            const button = await screen.findByRole("button");
+            // NOTE: we need to use fireEvent here because await userEvent doesn't
+            // support keyUp/Down events and we use these handlers to override
+            // the default behavior of the button.
+            // eslint-disable-next-line testing-library/prefer-user-event
+            fireEvent.keyDown(button, {
+                key: "Enter",
+            });
+            // NOTE: We need to trigger multiple events to simulate the browser
+            // behavior of pressing Enter on a button. By default, browsers will
+            // trigger a click event on keyDown, but we need to trigger it on
+            // keyUp.
+            // eslint-disable-next-line testing-library/prefer-user-event
+            fireEvent.keyDown(button, {
+                key: "Enter",
+            });
+            // eslint-disable-next-line testing-library/prefer-user-event
+            fireEvent.keyUp(button, {
+                key: "Enter",
+            });
+
+            // Assert
+            expect(onOpenMock).toHaveBeenCalledTimes(1);
+        });
+
+        it("should not trigger using the mouse if it is disabled", async () => {
+            // Arrange
+            const onOpenMock = jest.fn();
+
+            render(
+                <SelectOpener
+                    onOpenChanged={onOpenMock}
+                    disabled={true}
+                    error={false}
+                    isPlaceholder={false}
+                    light={false}
+                    open={false}
+                >
+                    {children}
+                </SelectOpener>,
+            );
+
+            // Act
+            // Press the button.
+            await userEvent.click(await screen.findByRole("button"));
+
+            // Assert
+            expect(onOpenMock).toHaveBeenCalledTimes(0);
+        });
+
+        it("should not trigger by pressing {Space} if it is disabled", async () => {
+            // Arrange
+            const onOpenMock = jest.fn();
+
+            render(
+                <SelectOpener
+                    onOpenChanged={onOpenMock}
+                    disabled={true}
+                    error={false}
+                    isPlaceholder={false}
+                    light={false}
+                    open={false}
+                >
+                    {children}
+                </SelectOpener>,
+            );
+
+            // Act
+            // Press the button.
+            const button = await screen.findByRole("button");
+            // NOTE: we need to use fireEvent here because await userEvent doesn't
+            // support keyUp/Down events and we use these handlers to override
+            // the default behavior of the button.
+            // eslint-disable-next-line testing-library/prefer-user-event
+            fireEvent.keyDown(button, {
+                key: " ",
+            });
+            // eslint-disable-next-line testing-library/prefer-user-event
+            fireEvent.keyUp(button, {
+                key: " ",
+            });
+
+            // Assert
+            expect(onOpenMock).toHaveBeenCalledTimes(0);
+        });
+
+        it("should not trigger by pressing {Enter} if it is disabled", async () => {
+            // Arrange
+            const onOpenMock = jest.fn();
+
+            render(
+                <SelectOpener
+                    onOpenChanged={onOpenMock}
+                    disabled={true}
+                    error={false}
+                    isPlaceholder={false}
+                    light={false}
+                    open={false}
+                >
+                    {children}
+                </SelectOpener>,
+            );
+
+            // Act
+            // Press the button.
+            const button = await screen.findByRole("button");
+            // NOTE: we need to use fireEvent here because await userEvent doesn't
+            // support keyUp/Down events and we use these handlers to override
+            // the default behavior of the button.
+            // eslint-disable-next-line testing-library/prefer-user-event
+            fireEvent.keyDown(button, {
+                key: "Enter",
+            });
+            // NOTE: We need to trigger multiple events to simulate the browser
+            // behavior of pressing Enter on a button. By default, browsers will
+            // trigger a click event on keyDown, but we need to trigger it on
+            // keyUp.
+            // eslint-disable-next-line testing-library/prefer-user-event
+            fireEvent.keyDown(button, {
+                key: "Enter",
+            });
+            // eslint-disable-next-line testing-library/prefer-user-event
+            fireEvent.keyUp(button, {
+                key: "Enter",
+            });
+
+            // Assert
+            expect(onOpenMock).toHaveBeenCalledTimes(0);
+        });
+    });
+});

package/src/components/__tests__/single-select.test.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable max-lines */
 import * as React from "react";
-import {fireEvent, render, screen} from "@testing-library/react";
+import {render, screen} from "@testing-library/react";
 import {
     userEvent as ue,
     PointerEventsCheckLevel,
@@ -1075,57 +1075,210 @@ describe("SingleSelect", () => {
         });
     });
 
-    describe("error state styles", () => {
-        it("should apply the error styles to the dropdown on hover", async () => {
+    describe("a11y > Focusable", () => {
+        it("should be focusable", () => {
             // Arrange
-            const userEvent = doRender(
+            doRender(
                 <SingleSelect
-                    onChange={onChange}
-                    placeholder="Choose a fruit"
-                    error={true}
-                    testId="singleselect-error-hover"
+                    placeholder="Default placeholder"
+                    onChange={jest.fn()}
+                    testId="select-focus-test"
                 >
-                    {[<OptionItem label="Banana" value="banana" />]}
+                    <OptionItem label="item 1" value="1" />
+                    <OptionItem label="item 2" value="2" />
+                    <OptionItem label="item 3" value="3" />
                 </SingleSelect>,
             );
-            const dropdown = await screen.findByTestId(
-                "singleselect-error-hover",
+
+            // Act
+            const singleSelect = screen.getByTestId("select-focus-test");
+            singleSelect.focus();
+
+            // Assert
+            expect(singleSelect).toHaveFocus();
+        });
+
+        it("should be focusable when disabled", () => {
+            // Arrange
+            doRender(
+                <SingleSelect
+                    placeholder="Default placeholder"
+                    onChange={jest.fn()}
+                    testId="select-focus-test"
+                    disabled={true}
+                >
+                    <OptionItem label="item 1" value="1" />
+                    <OptionItem label="item 2" value="2" />
+                    <OptionItem label="item 3" value="3" />
+                </SingleSelect>,
             );
 
             // Act
-            await userEvent.hover(dropdown);
+            const singleSelect = screen.getByTestId("select-focus-test");
+            singleSelect.focus();
 
             // Assert
-            expect(dropdown).toHaveStyle("border-color: #d92916");
-            expect(dropdown).toHaveStyle("border-width: 2px");
+            expect(singleSelect).toHaveFocus();
         });
+    });
 
-        it("should apply the error styles to the dropdown on mouse down", async () => {
+    describe("Disabled state", () => {
+        it("should set the `aria-disabled` attribute to `true` if `disabled` prop is `true`", () => {
             // Arrange
+
+            // Act
             doRender(
                 <SingleSelect
-                    onChange={onChange}
-                    placeholder="Choose a fruit"
-                    error={true}
-                    testId="singleselect-error-active"
+                    placeholder="Default placeholder"
+                    onChange={jest.fn()}
+                    testId="select-focus-test"
+                    disabled={true}
                 >
-                    {[<OptionItem label="Banana" value="banana" />]}
+                    <OptionItem label="item 1" value="1" />
+                    <OptionItem label="item 2" value="2" />
+                    <OptionItem label="item 3" value="3" />
                 </SingleSelect>,
             );
-            const dropdown = await screen.findByTestId(
-                "singleselect-error-active",
+            const singleSelect = screen.getByTestId("select-focus-test");
+
+            // Assert
+            expect(singleSelect).toHaveAttribute("aria-disabled", "true");
+        });
+
+        it("should not set the `disabled` attribute if `disabled` prop is `true` since `aria-disabled` is used instead", () => {
+            // Arrange
+
+            // Act
+            doRender(
+                <SingleSelect
+                    placeholder="Default placeholder"
+                    onChange={jest.fn()}
+                    testId="select-focus-test"
+                    disabled={true}
+                >
+                    <OptionItem label="item 1" value="1" />
+                    <OptionItem label="item 2" value="2" />
+                    <OptionItem label="item 3" value="3" />
+                </SingleSelect>,
             );
+            const singleSelect = screen.getByTestId("select-focus-test");
+
+            // Assert
+            expect(singleSelect).not.toHaveAttribute("disabled");
+        });
+
+        it("should not be opened if it is disabled and `open` prop is set to true", () => {
+            // Arrange
 
             // Act
-            // eslint-disable-next-line testing-library/prefer-user-event
-            fireEvent.mouseDown(dropdown);
+            doRender(
+                <SingleSelect
+                    placeholder="Default placeholder"
+                    onChange={jest.fn()}
+                    disabled={true}
+                    opened={true}
+                >
+                    <OptionItem label="item 1" value="1" />
+                    <OptionItem label="item 2" value="2" />
+                    <OptionItem label="item 3" value="3" />
+                </SingleSelect>,
+            );
 
             // Assert
-            expect(dropdown).toHaveStyle("border-color: #d92916");
-            expect(dropdown).toHaveStyle("border-width: 2px");
-            expect(dropdown).toHaveStyle(
-                "background-color: rgb(243, 187, 180)",
+            expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
+        });
+    });
+
+    describe("a11y > Focusable", () => {
+        it("should be focusable", () => {
+            // Arrange
+            doRender(
+                <SingleSelect
+                    placeholder="Default placeholder"
+                    onChange={jest.fn()}
+                    testId="select-focus-test"
+                >
+                    <OptionItem label="item 1" value="1" />
+                    <OptionItem label="item 2" value="2" />
+                    <OptionItem label="item 3" value="3" />
+                </SingleSelect>,
+            );
+
+            // Act
+            const singleSelect = screen.getByTestId("select-focus-test");
+            singleSelect.focus();
+
+            // Assert
+            expect(singleSelect).toHaveFocus();
+        });
+
+        it("should be focusable when disabled", () => {
+            // Arrange
+            doRender(
+                <SingleSelect
+                    placeholder="Default placeholder"
+                    onChange={jest.fn()}
+                    testId="select-focus-test"
+                    disabled={true}
+                >
+                    <OptionItem label="item 1" value="1" />
+                    <OptionItem label="item 2" value="2" />
+                    <OptionItem label="item 3" value="3" />
+                </SingleSelect>,
+            );
+
+            // Act
+            const singleSelect = screen.getByTestId("select-focus-test");
+            singleSelect.focus();
+
+            // Assert
+            expect(singleSelect).toHaveFocus();
+        });
+    });
+
+    describe("Disabled state", () => {
+        it("should set the `aria-disabled` attribute to `true` if `disabled` prop is `true`", () => {
+            // Arrange
+
+            // Act
+            doRender(
+                <SingleSelect
+                    placeholder="Default placeholder"
+                    onChange={jest.fn()}
+                    testId="select-focus-test"
+                    disabled={true}
+                >
+                    <OptionItem label="item 1" value="1" />
+                    <OptionItem label="item 2" value="2" />
+                    <OptionItem label="item 3" value="3" />
+                </SingleSelect>,
             );
+            const singleSelect = screen.getByTestId("select-focus-test");
+
+            // Assert
+            expect(singleSelect).toHaveAttribute("aria-disabled", "true");
+        });
+
+        it("should not set the `disabled` attribute if `disabled` prop is `true` since `aria-disabled` is used instead", () => {
+            // Arrange
+
+            // Act
+            doRender(
+                <SingleSelect
+                    placeholder="Default placeholder"
+                    onChange={jest.fn()}
+                    testId="select-focus-test"
+                    disabled={true}
+                >
+                    <OptionItem label="item 1" value="1" />
+                    <OptionItem label="item 2" value="2" />
+                    <OptionItem label="item 3" value="3" />
+                </SingleSelect>,
+            );
+            const singleSelect = screen.getByTestId("select-focus-test");
+
+            // Assert
+            expect(singleSelect).not.toHaveAttribute("disabled");
         });
     });
 });

package/src/components/dropdown-core.tsx

@@ -169,6 +169,10 @@ type ExportProps = Readonly<{
      * top. The items will be filtered by the input.
      */
     isFilterable?: boolean;
+    /**
+     * Whether the dropdown and it's interactions should be disabled.
+     */
+    disabled?: boolean;
 
     // Optional props with defaults
     /**
@@ -1040,12 +1044,12 @@ class DropdownCore extends React.Component<Props, State> {
     }
 
     render(): React.ReactNode {
-        const {open, opener, style, className} = this.props;
+        const {open, opener, style, className, disabled} = this.props;
 
         return (
             <View
-                onKeyDown={this.handleKeyDown}
-                onKeyUp={this.handleKeyUp}
+                onKeyDown={!disabled ? this.handleKeyDown : undefined}
+                onKeyUp={!disabled ? this.handleKeyUp : undefined}
                 style={[styles.menuWrapper, style]}
                 className={className}
             >

package/src/components/multi-select.tsx

@@ -241,7 +241,12 @@ export default class MultiSelect extends React.Component<Props, State> {
         state: State,
     ): Partial<State> | null {
         return {
-            open: typeof props.opened === "boolean" ? props.opened : state.open,
+            // open should always be false if select is disabled
+            open: props.disabled
+                ? false
+                : typeof props.opened === "boolean"
+                ? props.opened
+                : state.open,
         };
     }
 
@@ -549,6 +554,7 @@ export default class MultiSelect extends React.Component<Props, State> {
             isFilterable,
             "aria-invalid": ariaInvalid,
             "aria-required": ariaRequired,
+            disabled,
         } = this.props;
         const {open, searchText} = this.state;
         const {clearSearch, filter, noResults, someSelected} =
@@ -599,6 +605,7 @@ export default class MultiSelect extends React.Component<Props, State> {
                 }}
                 aria-invalid={ariaInvalid}
                 aria-required={ariaRequired}
+                disabled={disabled}
             />
         );
     }