@khanacademy/wonder-blocks-form 4.0.7 → 4.0.9

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];
 
 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

@@ -9,13 +9,6 @@ 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;
-};
-
 const {blue, red, white, offWhite, offBlack16, offBlack32, offBlack50} = Color;
 
 const StyledInput = addStyle("input");
@@ -27,7 +20,7 @@ const checkboxCheck: IconAsset = {
 /**
  * The internal stateless ☑️ Checkbox
  */
-export default class CheckboxCore extends React.Component<Props> {
+export default class CheckboxCore extends React.Component<ChoiceCoreProps> {
     handleChange: () => void = () => {
         // Empty because change is handled by ClickableBehavior
         return;
@@ -41,10 +34,6 @@ export default class CheckboxCore extends React.Component<Props> {
             groupName,
             id,
             testId,
-            hovered,
-            focused,
-            pressed,
-            waiting: _,
             ...sharedProps
         } = this.props;
 
@@ -53,11 +42,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,
         ];
 
@@ -165,13 +150,21 @@ const _generateStyles = (checked: boolean, error: boolean) => {
             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 +172,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/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";
@@ -69,12 +68,6 @@ type DefaultProps = {
         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 +84,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 +106,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 +137,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 +168,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

package/src/components/radio-core.tsx

@@ -6,20 +6,13 @@ import {addStyle} from "@khanacademy/wonder-blocks-core";
 
 import type {ChoiceCoreProps} from "../util/types";
 
-type Props = ChoiceCoreProps & {
-    hovered: boolean;
-    focused: boolean;
-    pressed: boolean;
-    waiting: boolean;
-};
-
 const {blue, red, white, offWhite, offBlack16, offBlack32, offBlack50} = Color;
 
 const StyledInput = addStyle("input");
 
 /**
  * The internal stateless 🔘 Radio button
- */ export default class RadioCore extends React.Component<Props> {
+ */ export default class RadioCore extends React.Component<ChoiceCoreProps> {
     handleChange: () => void = () => {
         // Empty because change is handled by ClickableBehavior
         return;
@@ -33,21 +26,13 @@ const StyledInput = addStyle("input");
             groupName,
             id,
             testId,
-            hovered,
-            focused,
-            pressed,
-            waiting: _,
             ...sharedProps
         } = this.props;
         const stateStyles = _generateStyles(checked, error);
         const defaultStyle = [
             sharedStyles.inputReset,
             sharedStyles.default,
-            stateStyles.default,
-            !disabled &&
-                (pressed
-                    ? stateStyles.active
-                    : (hovered || focused) && stateStyles.focus),
+            !disabled && stateStyles.default,
             disabled && sharedStyles.disabled,
         ];
         const props = {
@@ -141,13 +126,21 @@ const _generateStyles = (checked: boolean, error: boolean) => {
                 backgroundColor: white,
                 borderColor: palette.base,
                 borderWidth: size / 4,
-            },
-            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}`,
-                borderColor: 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}`,
+                    borderColor: palette.active,
+                },
             },
         };
     } else {
@@ -155,16 +148,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/radio-group.tsx

@@ -58,8 +58,8 @@ type RadioGroupProps = {
     testId?: string;
 };
 
-const StyledFieldset = addStyle<"fieldset">("fieldset");
-const StyledLegend = addStyle<"legend">("legend");
+const StyledFieldset = addStyle("fieldset");
+const StyledLegend = addStyle("legend");
 
 /**
  * A radio group allows only single selection. Like CheckboxGroup, this

package/src/components/text-field.tsx

@@ -1,9 +1,11 @@
 import * as React from "react";
-import {StyleSheet, css} from "aphrodite";
+import {StyleSheet} from "aphrodite";
 
 import Color, {mix, fade} from "@khanacademy/wonder-blocks-color";
+import {addStyle} from "@khanacademy/wonder-blocks-core";
 import Spacing from "@khanacademy/wonder-blocks-spacing";
 import {styles as typographyStyles} from "@khanacademy/wonder-blocks-typography";
+
 import type {StyleType, AriaProps} from "@khanacademy/wonder-blocks-core";
 
 export type TextFieldType = "text" | "password" | "email" | "number" | "tel";
@@ -14,6 +16,8 @@ type WithForwardRef = {
 
 const defaultErrorMessage = "This field is required.";
 
+const StyledInput = addStyle("input");
+
 type Props = AriaProps & {
     /**
      * The unique identifier for the input.
@@ -233,12 +237,10 @@ class TextField extends React.Component<PropsWithForwardRef, State> {
             // Should only include Aria related props
             ...otherProps
         } = this.props;
+
         return (
-            <input
-                // @ts-expect-error: we shouldn't be passing `style` to `css()`
-                // here b/c `style` allows nested arrays of styles, but `css()`
-                // only allows a flat array.
-                className={css([
+            <StyledInput
+                style={[
                     styles.input,
                     typographyStyles.LabelMedium,
                     styles.default,
@@ -247,12 +249,15 @@ class TextField extends React.Component<PropsWithForwardRef, State> {
                         ? styles.disabled
                         : this.state.focused
                         ? [styles.focused, light && styles.defaultLight]
-                        : this.state.error && [
+                        : !!this.state.error && [
                               styles.error,
                               light && styles.errorLight,
                           ],
+                    // Cast `this.state.error` into boolean since it's being
+                    // used as a conditional
+                    !!this.state.error && styles.error,
                     style && style,
-                ])}
+                ]}
                 id={id}
                 type={type}
                 placeholder={placeholder}

package/src/util/types.ts

@@ -22,6 +22,8 @@ export type ChoiceCoreProps = AriaProps & {
     id?: string;
     /** Optional test ID for e2e testing */
     testId?: string;
+    /** Function that executes when the choice is clicked. */
+    onClick: () => void;
 };
 
 // Props for checkbox and radio button