@khanacademy/wonder-blocks-form 4.0.8 → 4.1.0

package/src/__tests__/custom-snapshot.test.tsx

@@ -5,32 +5,24 @@ import CheckboxCore from "../components/checkbox-core";
 import RadioCore from "../components/radio-core";
 
 const states = ["default", "error", "disabled"];
-const clickableStates = ["default", "hovered", "pressed"];
-const checkedStates = [false, true];
+const checkedStates = [false, true, null];
 
 describe("CheckboxCore", () => {
     states.forEach((state: any) => {
-        clickableStates.forEach((clickableState: any) => {
-            checkedStates.forEach((checked: any) => {
-                test(`type:${state} state:${clickableState} checked:${String(
-                    checked,
-                )}`, () => {
-                    const disabled = state === "disabled";
-                    const tree = renderer
-                        .create(
-                            <CheckboxCore
-                                checked={checked}
-                                disabled={disabled}
-                                error={state === "error"}
-                                hovered={clickableState === "hovered"}
-                                pressed={clickableState === "pressed"}
-                                focused={clickableState === "focused"}
-                                waiting={false}
-                            />,
-                        )
-                        .toJSON();
-                    expect(tree).toMatchSnapshot();
-                });
+        checkedStates.forEach((checked: any) => {
+            test(`type:${state} checked:${String(checked)}`, () => {
+                const disabled = state === "disabled";
+                const tree = renderer
+                    .create(
+                        <CheckboxCore
+                            checked={checked}
+                            disabled={disabled}
+                            error={state === "error"}
+                            onClick={() => {}}
+                        />,
+                    )
+                    .toJSON();
+                expect(tree).toMatchSnapshot();
             });
         });
     });
@@ -38,27 +30,20 @@ describe("CheckboxCore", () => {
 
 describe("RadioCore", () => {
     states.forEach((state: any) => {
-        clickableStates.forEach((clickableState: any) => {
-            checkedStates.forEach((checked: any) => {
-                test(`type:${state} state:${clickableState} checked:${String(
-                    checked,
-                )}`, () => {
-                    const disabled = state === "disabled";
-                    const tree = renderer
-                        .create(
-                            <RadioCore
-                                checked={checked}
-                                disabled={disabled}
-                                error={state === "error"}
-                                hovered={clickableState === "hovered"}
-                                pressed={clickableState === "pressed"}
-                                focused={clickableState === "focused"}
-                                waiting={false}
-                            />,
-                        )
-                        .toJSON();
-                    expect(tree).toMatchSnapshot();
-                });
+        checkedStates.forEach((checked: any) => {
+            test(`type:${state} checked:${String(checked)}`, () => {
+                const disabled = state === "disabled";
+                const tree = renderer
+                    .create(
+                        <RadioCore
+                            checked={checked}
+                            disabled={disabled}
+                            error={state === "error"}
+                            onClick={() => {}}
+                        />,
+                    )
+                    .toJSON();
+                expect(tree).toMatchSnapshot();
             });
         });
     });

package/src/components/__tests__/checkbox.test.js

@@ -0,0 +1,84 @@
+//@flow
+import * as React from "react";
+import {render, screen} from "@testing-library/react";
+
+import Checkbox from "../checkbox";
+
+describe("Checkbox", () => {
+    test("uses the ID prop when it is specified", () => {
+        // Arrange, Act
+        render(
+            <Checkbox
+                id="specified-checkbox-id"
+                label="Receive assignment reminders for Algebra"
+                description="You will receive a reminder 24 hours before each deadline"
+                checked={false}
+                onChange={() => {}}
+            />,
+        );
+
+        const checkbox = screen.getByRole("checkbox");
+
+        // Assert
+        expect(checkbox).toHaveAttribute("id", "specified-checkbox-id");
+    });
+
+    test("provides a unique ID when the ID prop is not specified", () => {
+        // Arrange, Act
+        render(
+            <Checkbox
+                label="Receive assignment reminders for Algebra"
+                description="You will receive a reminder 24 hours before each deadline"
+                checked={false}
+                onChange={() => {}}
+            />,
+        );
+
+        const checkbox = screen.getByRole("checkbox");
+
+        // Assert
+        expect(checkbox).toHaveAttribute("id", "uid-choice-1-main");
+    });
+
+    test("clicking the checkbox triggers `onChange`", () => {
+        // Arrange
+        const onChangeSpy = jest.fn();
+        render(
+            <Checkbox
+                label="Receive assignment reminders for Algebra"
+                description="You will receive a reminder 24 hours before each deadline"
+                checked={false}
+                onChange={onChangeSpy}
+            />,
+        );
+
+        // Act
+        const checkbox = screen.getByRole("checkbox");
+        checkbox.click();
+
+        // Assert
+        expect(onChangeSpy).toHaveBeenCalled();
+    });
+
+    test("clicks the label triggers `onChange`", () => {
+        // Arrange
+        const onChangeSpy = jest.fn();
+        render(
+            <Checkbox
+                label="Receive assignment reminders for Algebra"
+                description="You will receive a reminder 24 hours before each deadline"
+                checked={false}
+                onChange={onChangeSpy}
+            />,
+        );
+
+        // Act
+        const checkboxLabel = screen.getByText(
+            "Receive assignment reminders for Algebra",
+        );
+        checkboxLabel.click();
+
+        // Assert
+        expect(onChangeSpy).toHaveBeenCalled();
+    });
+});

package/src/components/__tests__/labeled-text-field.test.tsx

@@ -3,6 +3,7 @@ import {render, screen, fireEvent} from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
 import {StyleSheet} from "aphrodite";
+import Color from "@khanacademy/wonder-blocks-color";
 import LabeledTextField from "../labeled-text-field";
 
 describe("LabeledTextField", () => {
@@ -392,7 +393,9 @@ describe("LabeledTextField", () => {
         textField.focus();
 
         // Assert
-        expect(textField.getAttribute("class")).toMatch(/light/i);
+        expect(textField).toHaveStyle({
+            boxShadow: `0px 0px 0px 1px ${Color.blue}, 0px 0px 0px 2px ${Color.white}`,
+        });
     });
 
     it("style prop is passed to fieldheading", async () => {

package/src/components/checkbox-core.tsx

@@ -6,28 +6,54 @@ import {addStyle} from "@khanacademy/wonder-blocks-core";
 import Icon from "@khanacademy/wonder-blocks-icon";
 
 import type {IconAsset} from "@khanacademy/wonder-blocks-icon";
-
-import type {ChoiceCoreProps} from "../util/types";
-
-type Props = ChoiceCoreProps & {
-    hovered: boolean;
-    focused: boolean;
-    pressed: boolean;
-    waiting: boolean;
-};
+import type {ChoiceCoreProps, Checked} from "../util/types";
+
+// `AriaChecked` and `mapCheckedToAriaChecked()` are used to convert the
+// `checked` prop value to a value that a screen reader can understand via the
+// `aria-checked` attribute
+type AriaChecked = "true" | "false" | "mixed";
+
+function mapCheckedToAriaChecked(value: Checked): AriaChecked {
+    switch (value) {
+        case true:
+            return "true";
+        case false:
+            return "false";
+        default:
+            return "mixed";
+    }
+}
 
 const {blue, red, white, offWhite, offBlack16, offBlack32, offBlack50} = Color;
 
 const StyledInput = addStyle("input");
 
-const checkboxCheck: IconAsset = {
+const checkPath: IconAsset = {
     small: "M11.263 4.324a1 1 0 1 1 1.474 1.352l-5.5 6a1 1 0 0 1-1.505-.036l-2.5-3a1 1 0 1 1 1.536-1.28L6.536 9.48l4.727-5.157z",
 };
 
+const indeterminatePath: IconAsset = {
+    small: "M3 8C3 7.44772 3.44772 7 4 7H12C12.5523 7 13 7.44772 13 8C13 8.55228 12.5523 9 12 9H4C3.44772 9 3 8.55228 3 8Z",
+};
+
 /**
  * The internal stateless ☑️ Checkbox
  */
-export default class CheckboxCore extends React.Component<Props> {
+export default class CheckboxCore extends React.Component<ChoiceCoreProps> {
+    componentDidMount(): void {
+        if (this.props.checked == null && this.inputRef.current != null) {
+            this.inputRef.current.indeterminate = true;
+        }
+    }
+
+    componentDidUpdate(prevProps: Readonly<ChoiceCoreProps>): void {
+        if (this.inputRef.current != null) {
+            this.inputRef.current.indeterminate = this.props.checked == null;
+        }
+    }
+
+    inputRef: React.RefObject<HTMLInputElement> = React.createRef();
+
     handleChange: () => void = () => {
         // Empty because change is handled by ClickableBehavior
         return;
@@ -41,10 +67,6 @@ export default class CheckboxCore extends React.Component<Props> {
             groupName,
             id,
             testId,
-            hovered,
-            focused,
-            pressed,
-            waiting: _,
             ...sharedProps
         } = this.props;
 
@@ -53,11 +75,7 @@ export default class CheckboxCore extends React.Component<Props> {
         const defaultStyle = [
             sharedStyles.inputReset,
             sharedStyles.default,
-            stateStyles.default,
-            !disabled &&
-                (pressed
-                    ? stateStyles.active
-                    : (hovered || focused) && stateStyles.focus),
+            !disabled && stateStyles.default,
             disabled && sharedStyles.disabled,
         ];
 
@@ -65,13 +83,26 @@ export default class CheckboxCore extends React.Component<Props> {
             "data-test-id": testId,
         } as const;
 
+        const checkboxIcon = (
+            <Icon
+                color={disabled ? offBlack32 : white}
+                icon={checked ? checkPath : indeterminatePath}
+                size="small"
+                style={sharedStyles.checkboxIcon}
+            />
+        );
+
+        const ariaChecked = mapCheckedToAriaChecked(checked);
+
         return (
             <React.Fragment>
                 <StyledInput
                     {...sharedProps}
+                    ref={this.inputRef}
                     type="checkbox"
+                    aria-checked={ariaChecked}
                     aria-invalid={error}
-                    checked={checked}
+                    checked={checked ?? undefined}
                     disabled={disabled}
                     id={id}
                     name={groupName}
@@ -81,14 +112,7 @@ export default class CheckboxCore extends React.Component<Props> {
                     style={defaultStyle}
                     {...props}
                 />
-                {checked && (
-                    <Icon
-                        color={disabled ? offBlack32 : white}
-                        icon={checkboxCheck}
-                        size="small"
-                        style={sharedStyles.checkIcon}
-                    />
-                )}
+                {checked || checked == null ? checkboxIcon : <></>}
             </React.Fragment>
         );
     }
@@ -124,7 +148,7 @@ const sharedStyles = StyleSheet.create({
         borderWidth: 1,
     },
 
-    checkIcon: {
+    checkboxIcon: {
         position: "absolute",
         pointerEvents: "none",
     },
@@ -150,7 +174,7 @@ const colors = {
 
 const styles: Record<string, any> = {};
 
-const _generateStyles = (checked: boolean, error: boolean) => {
+const _generateStyles = (checked: Checked, error: boolean) => {
     // "hash" the parameters
     const styleKey = `${String(checked)}-${String(error)}`;
     if (styles[styleKey]) {
@@ -160,18 +184,26 @@ const _generateStyles = (checked: boolean, error: boolean) => {
     const palette = error ? colors.error : colors.default;
 
     let newStyles: Record<string, any> = {};
-    if (checked) {
+    if (checked || checked == null) {
         newStyles = {
             default: {
                 backgroundColor: palette.base,
                 borderWidth: 0,
-            },
-            focus: {
-                boxShadow: `0 0 0 1px ${white}, 0 0 0 3px ${palette.base}`,
-            },
-            active: {
-                boxShadow: `0 0 0 1px ${white}, 0 0 0 3px ${palette.active}`,
-                background: palette.active,
+
+                // Focus and hover have the same style. Focus style only shows
+                // up with keyboard navigation.
+                ":focus-visible": {
+                    boxShadow: `0 0 0 1px ${white}, 0 0 0 3px ${palette.base}`,
+                },
+
+                ":hover": {
+                    boxShadow: `0 0 0 1px ${white}, 0 0 0 3px ${palette.base}`,
+                },
+
+                ":active": {
+                    boxShadow: `0 0 0 1px ${white}, 0 0 0 3px ${palette.active}`,
+                    background: palette.active,
+                },
             },
         };
     } else {
@@ -179,16 +211,26 @@ const _generateStyles = (checked: boolean, error: boolean) => {
             default: {
                 backgroundColor: error ? fadedRed : white,
                 borderColor: error ? red : offBlack50,
-            },
-            focus: {
-                backgroundColor: error ? fadedRed : white,
-                borderColor: palette.base,
-                borderWidth: 2,
-            },
-            active: {
-                backgroundColor: palette.faded,
-                borderColor: error ? activeRed : blue,
-                borderWidth: 2,
+
+                // Focus and hover have the same style. Focus style only shows
+                // up with keyboard navigation.
+                ":focus-visible": {
+                    backgroundColor: error ? fadedRed : white,
+                    borderColor: palette.base,
+                    borderWidth: 2,
+                },
+
+                ":hover": {
+                    backgroundColor: error ? fadedRed : white,
+                    borderColor: palette.base,
+                    borderWidth: 2,
+                },
+
+                ":active": {
+                    backgroundColor: palette.faded,
+                    borderColor: error ? activeRed : blue,
+                    borderWidth: 2,
+                },
             },
         };
     }

package/src/components/checkbox-group.tsx

@@ -59,8 +59,8 @@ type CheckboxGroupProps = {
     testId?: string;
 };
 
-const StyledFieldset = addStyle<"fieldset">("fieldset");
-const StyledLegend = addStyle<"legend">("legend");
+const StyledFieldset = addStyle("fieldset");
+const StyledLegend = addStyle("legend");
 
 /**
  * A checkbox group allows multiple selection. This component auto-populates

package/src/components/checkbox.tsx

@@ -1,14 +1,16 @@
 import * as React from "react";
 
 import type {AriaProps, StyleType} from "@khanacademy/wonder-blocks-core";
+import type {Checked} from "../util/types";
+
 import ChoiceInternal from "./choice-internal";
 
 // Keep synced with ChoiceComponentProps in ../util/types.js
 type ChoiceComponentProps = AriaProps & {
     /**
-     * Whether this component is checked
+     * Whether this component is checked or indeterminate
      */
-    checked: boolean;
+    checked: Checked;
     /**
      * Whether this component is disabled
      */

package/src/components/choice-internal.tsx

@@ -3,7 +3,6 @@ import {StyleSheet} from "aphrodite";
 
 import Color from "@khanacademy/wonder-blocks-color";
 import {View, UniqueIDProvider} from "@khanacademy/wonder-blocks-core";
-import {getClickableBehavior} from "@khanacademy/wonder-blocks-clickable";
 import {Strut} from "@khanacademy/wonder-blocks-layout";
 import Spacing from "@khanacademy/wonder-blocks-spacing";
 import {LabelMedium, LabelSmall} from "@khanacademy/wonder-blocks-typography";
@@ -13,7 +12,7 @@ import RadioCore from "./radio-core";
 
 type Props = AriaProps & {
     /** Whether this choice is checked. */
-    checked: boolean;
+    checked: boolean | null | undefined;
     /** Whether this choice option is disabled. */
     disabled: boolean;
     /** Whether this choice is in error mode. */
@@ -50,7 +49,6 @@ type Props = AriaProps & {
 };
 
 type DefaultProps = {
-    checked: Props["checked"];
     disabled: Props["disabled"];
     error: Props["error"];
 };
@@ -64,17 +62,10 @@ type DefaultProps = {
  * (because for Choice, that prop would be auto-populated by CheckboxGroup).
  */ export default class ChoiceInternal extends React.Component<Props> {
     static defaultProps: DefaultProps = {
-        checked: false,
         disabled: false,
         error: false,
     };
 
-    handleLabelClick: (event: React.SyntheticEvent) => void = (event) => {
-        // Browsers automatically use the for attribute to select the input,
-        // but we use ClickableBehavior to handle this.
-        event.preventDefault();
-    };
-
     handleClick: () => void = () => {
         const {checked, onChange, variant} = this.props;
         // Radio buttons cannot be unchecked
@@ -91,15 +82,13 @@ type DefaultProps = {
             return CheckboxCore;
         }
     }
-    getLabel(): React.ReactNode {
-        const {disabled, id, label} = this.props;
+    getLabel(id: string): React.ReactNode {
+        const {disabled, label} = this.props;
         return (
             <LabelMedium
                 style={[styles.label, disabled && styles.disabledLabel]}
             >
-                <label htmlFor={id} onClick={this.handleLabelClick}>
-                    {label}
-                </label>
+                <label htmlFor={id}>{label}</label>
             </LabelMedium>
         );
     }
@@ -115,18 +104,30 @@ type DefaultProps = {
         const {
             label,
             description,
+            id,
             // eslint-disable-next-line @typescript-eslint/no-unused-vars
             onChange,
             style,
             className,
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
             variant,
             ...coreProps
         } = this.props;
         const ChoiceCore = this.getChoiceCoreComponent();
-        const ClickableBehavior = getClickableBehavior();
+
         return (
             <UniqueIDProvider mockOnFirstRender={true} scope="choice">
                 {(ids) => {
+                    // A choice element should always have a unique ID set
+                    // so that the label can always refer to this element.
+                    // This guarantees that clicking on the label will
+                    // always click on the choice as well. If an ID is
+                    // passed in as a prop, use that one. Otherwise,
+                    // create a unique ID using the provider.
+                    const uniqueId = id || ids.get("main");
+
+                    // Create a unique ID for the description section to be
+                    // used by this element's `aria-describedby`.
                     const descriptionId = description
                         ? ids.get("description")
                         : undefined;
@@ -134,32 +135,22 @@ type DefaultProps = {
                     return (
                         // @ts-expect-error [FEI-5019] - TS2769 - No overload matches this call.
                         <View style={style} className={className}>
-                            <ClickableBehavior
-                                disabled={coreProps.disabled}
-                                onClick={this.handleClick}
-                                role={variant}
+                            <View
+                                style={styles.wrapper}
+                                // We are resetting the tabIndex=0 from handlers
+                                // because the ChoiceCore component will receive
+                                // focus on basis of it being an input element.
+                                tabIndex={-1}
                             >
-                                {(state, childrenProps) => {
-                                    return (
-                                        <View
-                                            style={styles.wrapper}
-                                            {...childrenProps}
-                                            // We are resetting the tabIndex=0 from handlers
-                                            // because the ChoiceCore component will receive
-                                            // focus on basis of it being an input element.
-                                            tabIndex={-1}
-                                        >
-                                            <ChoiceCore
-                                                {...coreProps}
-                                                {...state}
-                                                aria-describedby={descriptionId}
-                                            />
-                                            <Strut size={Spacing.xSmall_8} />
-                                            {label && this.getLabel()}
-                                        </View>
-                                    );
-                                }}
-                            </ClickableBehavior>
+                                <ChoiceCore
+                                    {...coreProps}
+                                    id={uniqueId}
+                                    aria-describedby={descriptionId}
+                                    onClick={this.handleClick}
+                                />
+                                <Strut size={Spacing.xSmall_8} />
+                                {label && this.getLabel(uniqueId)}
+                            </View>
                             {description && this.getDescription(descriptionId)}
                         </View>
                     );
@@ -175,7 +166,6 @@ const styles = StyleSheet.create({
         outline: "none",
     },
     label: {
-        userSelect: "none",
         // NOTE: The checkbox/radio button (height 16px) should be center
         // aligned with the first line of the label. However, LabelMedium has a
         // declared line height of 20px, so we need to adjust the top to get the