@cerebruminc/cerebellum 17.0.1 → 17.0.2-beta.dangerous.05ab9b5

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # react-component-lib-boilerplate
 
+## [17.0.2](https://github.com/cerebruminc/cerebellum/compare/v17.0.1...v17.0.2) (2026-05-18)
+
+
+### Bug Fixes
+
+* add types as peer deps ([c9ba834](https://github.com/cerebruminc/cerebellum/commit/c9ba834cdd481c05242afd5cfbbd384dc1c61d33))
+
 ## [17.0.1](https://github.com/cerebruminc/cerebellum/compare/v17.0.0...v17.0.1) (2026-05-18)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cerebruminc/cerebellum",
-  "version": "17.0.1",
+  "version": "17.0.2-beta.dangerous.05ab9b5",
   "description": "Cerebrum's React Component Library",
   "type": "module",
   "main": "src/index.ts",
@@ -77,12 +77,8 @@
     "@testing-library/user-event": "^14.0.0",
     "@types/jest": "^29.5.12",
     "@types/jscodeshift": "^0.12.0",
-    "@types/object-path": "^0.11.4",
-    "@types/pngjs": "^6.0.5",
     "@types/react": "^18.2.66",
-    "@types/react-datepicker": "^6.0.3",
     "@types/react-dom": "^18.2.22",
-    "@types/react-places-autocomplete": "^7.2.14",
     "babel-jest": "^29.6.1",
     "babel-loader": "^10.0.0",
     "babel-plugin-dynamic-import-node": "^2.3.3",
@@ -110,6 +106,10 @@
     "@mantine/core": "^8.3.16",
     "@mantine/modals": "^8.3.16",
     "@mantine/notifications": "^8.3.16",
+    "@types/object-path": "^0.11.4",
+    "@types/pngjs": "^6.0.5",
+    "@types/react-datepicker": "^6.0.3",
+    "@types/react-places-autocomplete": "^7.2.14",
     "next": "^14.0.0 || ^15.0.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",

package/src/components/CheckboxGroup/CheckboxGroup.test.tsx

@@ -43,6 +43,35 @@ describe("CheckboxGroup", () => {
     expect(validationTextNode).toBeInTheDocument();
   });
 
+  test("validation message has role='alert' when showValidationMessage is true", () => {
+    const validationMessage = "Selection required";
+    render(
+      <ThemedCheckboxGroup onClick={jest.fn()} activeValues={[]} checkboxes={[]} label="foo" validationMessage={validationMessage} showValidationMessage />
+    );
+    const alert = screen.getByRole("alert");
+    expect(alert).toHaveTextContent(validationMessage);
+  });
+
+  test("validation message does not have role='alert' when showValidationMessage is false", () => {
+    const validationMessage = "Selection required";
+    render(<ThemedCheckboxGroup onClick={jest.fn()} activeValues={[]} checkboxes={[]} label="foo" validationMessage={validationMessage} />);
+    expect(screen.queryByRole("alert")).not.toBeInTheDocument();
+  });
+
+  test("group has aria-invalid when showValidationMessage is true", () => {
+    render(
+      <ThemedCheckboxGroup onClick={jest.fn()} activeValues={[]} checkboxes={[]} label="foo" validationMessage="Error" showValidationMessage />
+    );
+    const group = screen.getByRole("group");
+    expect(group).toHaveAttribute("aria-invalid", "true");
+  });
+
+  test("group does not have aria-invalid when showValidationMessage is false", () => {
+    render(<ThemedCheckboxGroup onClick={jest.fn()} activeValues={[]} checkboxes={[]} label="foo" />);
+    const group = screen.getByRole("group");
+    expect(group).not.toHaveAttribute("aria-invalid");
+  });
+
   test("renders multiple checkboxes text", () => {
     const text = "Multiple CheckboxGroup text";
     const labels = ["Test label 1", "Test label 2", "Test label 3"];

package/src/components/CheckboxGroup/CheckboxGroup.tsx

@@ -34,6 +34,7 @@ export const CheckboxGroup: FC<CheckboxGroupType> = ({
   noBottomPadding = false,
   onClick,
   required,
+  hasError,
   showValidationMessage = false,
   titleColor,
   validationMessage,
@@ -44,7 +45,7 @@ export const CheckboxGroup: FC<CheckboxGroupType> = ({
   const disabledTextColor = disabledLabelColor || theme.text.disabledColor;
 
   return (
-    <CheckboxGroupBase $labelGap={labelGap} $noBottomPadding={noBottomPadding} $width={checkboxGroupWidth} role="group" aria-required={required ? "true" : undefined}>
+    <CheckboxGroupBase $labelGap={labelGap} $noBottomPadding={noBottomPadding} $width={checkboxGroupWidth} role="group" aria-invalid={(hasError ?? showValidationMessage) ? "true" : undefined} aria-required={required ? "true" : undefined}>
       {label ? (
         typeof label === "string" ? (
           <BodyXSEmphasis $textColor={disableGroup ? disabledTextColor : titleColor} data-sentry-unmask>

package/src/components/CheckboxGroup/types.ts

@@ -31,6 +31,9 @@ export interface CheckboxGroupType extends Omit<CheckboxItemType, "active" | "di
   onClick: (event: ChangeEvent<HTMLInputElement>) => void;
   /** Adds an asterisk to the UI when there is also a `label` */
   required?: boolean;
+  /** Sets aria-invalid on the group independently of showValidationMessage. Useful when the inline
+   * message is suppressed (e.g. leftLabels Form layout) but the field is still in an error state. */
+  hasError?: boolean;
   /** Displays an error message under the last checkbox */
   showValidationMessage?: boolean;
   /** The title color. THEME PROP: default is colors.COOL_GREY_80 */

package/src/components/DatePicker/DatePickerStyles.tsx

@@ -119,7 +119,9 @@ export const HelperText = styled.p<HelperTextProps>`
   font-weight: 400;
   margin-top: 10px;
 `;
-export const ValidationText = styled.p<ValidationTextProps>`
+export const ValidationText = styled.p.attrs<ValidationTextProps>(({ $showValidationMessage }) => ({
+  role: $showValidationMessage ? "alert" : undefined,
+}))<ValidationTextProps>`
   color: ${(props) =>
     props.disabled ? props.$disabledColor || props.theme.datePicker?.disabledColor : props.$failColor || props.theme.datePicker?.failColor};
   display: inline-block;

package/src/components/Form/Form.test.tsx

@@ -144,6 +144,34 @@ describe("Form", () => {
     await waitFor(() => expect(screen.getByText(errorMessage)).toBeInTheDocument());
   });
 
+  test("validation error has role='alert' for screen reader announcement", async () => {
+    const errorMessage = "This field is required";
+    const submitButtonText = "Submit";
+    const fields: SingleOrMultipleFieldType[] = [{ fieldLabel: "field 1", required: true, requiredMessage: errorMessage, name: "field 1" }];
+    render(<ThemedForm submitButtonText={submitButtonText} title="foo" fields={fields} submit={jest.fn()} />);
+    expect(screen.queryByRole("alert")).not.toBeInTheDocument();
+    const button = screen.getByText(submitButtonText);
+    await waitFor(() => userEvent.click(button));
+    await waitFor(() => {
+      const alert = screen.getByRole("alert");
+      expect(alert).toHaveTextContent(errorMessage);
+    });
+  });
+
+  test("leftLabels validation error has role='alert' for screen reader announcement", async () => {
+    const errorMessage = "This field is required";
+    const submitButtonText = "Submit";
+    const fields: SingleOrMultipleFieldType[] = [{ fieldLabel: "field 1", required: true, requiredMessage: errorMessage, name: "field 1" }];
+    render(<ThemedForm leftLabels submitButtonText={submitButtonText} title="foo" fields={fields} submit={jest.fn()} />);
+    expect(screen.queryByRole("alert")).not.toBeInTheDocument();
+    const button = screen.getByText(submitButtonText);
+    await waitFor(() => userEvent.click(button));
+    await waitFor(() => {
+      const alert = screen.getByRole("alert");
+      expect(alert).toHaveTextContent(errorMessage);
+    });
+  });
+
   test("disableSubmitUntilValid disables submit button if the form is not completed", async () => {
     const onSubmit = jest.fn();
     const fields = [{ fieldLabel: "field 1", name: "bar", required: true }];

package/src/components/Form/fields/CheckboxGroupField/CheckboxGroupField.tsx

@@ -68,6 +68,7 @@ export const CheckboxGroupField: FC<CheckboxGroupFieldProps> = ({
             }
           }}
           required={required && !disabled}
+          hasError={showValidationMessage}
           showValidationMessage={!leftLabels && showValidationMessage}
           validationMessage={validationMessage}
         />

package/src/components/Form/fields/RadioGroupField/RadioGroupField.tsx

@@ -69,6 +69,7 @@ export const RadioGroupField: FC<RadioGroupFieldProps> = ({
           }}
           radioLabel={leftLabels ? undefined : fieldLabel || name}
           required={required && !disabled}
+          hasError={showValidationMessage}
           showValidationMessage={!leftLabels && showValidationMessage}
           validationMessage={validationMessage}
         />

package/src/components/Form/fields/ToggleGroupField/ToggleGroupField.tsx

@@ -68,6 +68,7 @@ export const ToggleGroupField: FC<ToggleGroupFieldProps> = ({
             }
           }}
           required={required && !disabled}
+          hasError={showValidationMessage}
           showValidationMessage={!leftLabels && showValidationMessage}
           toggleGroupLabel={leftLabels ? undefined : fieldLabel || name}
           validationMessage={validationMessage}

package/src/components/InlineInput/InlineInput.tsx

@@ -191,6 +191,7 @@ export const InlineInput: FC<InlineInputType> = ({
         $showValidationMessage={showValidationMessage}
         $sidePadding={sidePadding}
         step={type === "number" ? step : undefined}
+        aria-invalid={showValidationMessage ? "true" : undefined}
         aria-required={required ? "true" : undefined}
         required={required}
         role="textbox"

package/src/components/Input/Input.test.tsx

@@ -43,6 +43,34 @@ describe("Input", () => {
     expect(asterisk).toBeInTheDocument();
   });
 
+  // ------ Screen reader accessibility tests ------
+  test("validation message has role='alert' when showValidationMessage is true", () => {
+    const validationMessage = "This field is required";
+    render(<ThemedInput value="" validationMessage={validationMessage} showValidationMessage />);
+    const alert = screen.getByRole("alert");
+    expect(alert).toHaveTextContent(validationMessage);
+  });
+
+  test("validation message does not have role='alert' when showValidationMessage is false", () => {
+    const validationMessage = "This field is required";
+    render(<ThemedInput value="" validationMessage={validationMessage} />);
+    expect(screen.queryByRole("alert")).not.toBeInTheDocument();
+  });
+
+  test("input has aria-invalid when showValidationMessage is true", () => {
+    const label = "Test input";
+    render(<ThemedInput value="" inputLabel={label} showValidationMessage validationMessage="Error" />);
+    const input = screen.getByLabelText(label);
+    expect(input).toHaveAttribute("aria-invalid", "true");
+  });
+
+  test("input does not have aria-invalid when showValidationMessage is false", () => {
+    const label = "Test input";
+    render(<ThemedInput value="" inputLabel={label} />);
+    const input = screen.getByLabelText(label);
+    expect(input).not.toHaveAttribute("aria-invalid");
+  });
+
   // ------ The rest of these tests are redundant with InlinInput's tests, but there's not much point deleting them
   test("renders Input with the text present", () => {
     const inputValue = "foo";

package/src/components/RadioGroup/RadioGroup.test.tsx

@@ -47,6 +47,35 @@ describe("RadioGroup", () => {
     expect(validationMessage).toBeInTheDocument();
   });
 
+  test("validation message has role='alert' when showValidationMessage is true", () => {
+    const text = "Selection required";
+    render(
+      <ThemedRadioGroup activeId="" onRadioClick={jest.fn()} radios={radioExamples} showValidationMessage validationMessage={text} name="test_radio" />
+    );
+    const alert = screen.getByRole("alert");
+    expect(alert).toHaveTextContent(text);
+  });
+
+  test("validation message does not have role='alert' when showValidationMessage is false", () => {
+    const text = "Selection required";
+    render(<ThemedRadioGroup activeId="" onRadioClick={jest.fn()} radios={radioExamples} validationMessage={text} name="test_radio" />);
+    expect(screen.queryByRole("alert")).not.toBeInTheDocument();
+  });
+
+  test("radiogroup has aria-invalid when showValidationMessage is true", () => {
+    render(
+      <ThemedRadioGroup activeId="" onRadioClick={jest.fn()} radios={radioExamples} showValidationMessage validationMessage="Error" name="test_radio" />
+    );
+    const group = screen.getByRole("radiogroup");
+    expect(group).toHaveAttribute("aria-invalid", "true");
+  });
+
+  test("radiogroup does not have aria-invalid when showValidationMessage is false", () => {
+    render(<ThemedRadioGroup activeId="" onRadioClick={jest.fn()} radios={radioExamples} name="test_radio" />);
+    const group = screen.getByRole("radiogroup");
+    expect(group).not.toHaveAttribute("aria-invalid");
+  });
+
   test("multiple radios test", () => {
     const text = "Multiple RadioGroup text";
     const onClick = jest.fn();

package/src/components/RadioGroup/RadioGroup.tsx

@@ -34,6 +34,7 @@ export const RadioGroup: FC<RadioGroupType> = ({
   radioSize,
   radios,
   required,
+  hasError,
   showValidationMessage = false,
   titleColor,
   labelGap,
@@ -57,7 +58,7 @@ export const RadioGroup: FC<RadioGroupType> = ({
   };
 
   return (
-    <RadioGroupBase $labelGap={labelGap} $noBottomPadding={noBottomPadding} $width={radioGroupWidth} role="radiogroup" aria-required={required ? "true" : undefined}>
+    <RadioGroupBase $labelGap={labelGap} $noBottomPadding={noBottomPadding} $width={radioGroupWidth} role="radiogroup" aria-invalid={(hasError ?? showValidationMessage) ? "true" : undefined} aria-required={required ? "true" : undefined}>
       <LabelBox>
         {showLabel()}
         {required && <Asterisk $asteriskColor={asteriskColor}>*</Asterisk>}

package/src/components/RadioGroup/types.ts

@@ -33,6 +33,9 @@ export interface RadioGroupType extends Omit<RadioItemType, "active" | "disabled
   radioGroupWidth?: number;
   /** Adds an asterisk to the UI when there is also a `radioLabel` */
   required?: boolean;
+  /** Sets aria-invalid on the group independently of showValidationMessage. Useful when the inline
+   * message is suppressed (e.g. leftLabels Form layout) but the field is still in an error state. */
+  hasError?: boolean;
   /** Displays an error message under the last radio */
   showValidationMessage?: boolean;
   /** The title color. THEME PROP: default is colors.COOL_GREY_80 */

package/src/components/Textarea/InlineTextarea.tsx

@@ -37,6 +37,7 @@ export const InlineTextarea: FC<InlineTextareaType> = ({
   return (
     <PositionWrapper $width={inputWidth}>
       <TextareaElement
+        aria-invalid={showValidationMessage ? "true" : undefined}
         id={htmlId}
         ref={textareaRef}
         $activeBorderColor={activeBorderColor}

package/src/components/Textarea/Textarea.test.tsx

@@ -78,6 +78,31 @@ describe("Textarea", () => {
     expect(element).toBeInTheDocument();
   });
 
+  test("validation message has role='alert' when showValidationMessage is true", () => {
+    const validationMessage = "This field is required";
+    render(<ThemedTextarea showValidationMessage validationMessage={validationMessage} value={"Foo"} />);
+    const alert = screen.getByRole("alert");
+    expect(alert).toHaveTextContent(validationMessage);
+  });
+
+  test("validation message does not have role='alert' when showValidationMessage is false", () => {
+    const validationMessage = "This field is required";
+    render(<ThemedTextarea validationMessage={validationMessage} value={"Foo"} />);
+    expect(screen.queryByRole("alert")).not.toBeInTheDocument();
+  });
+
+  test("textarea has aria-invalid when showValidationMessage is true", () => {
+    render(<ThemedTextarea showValidationMessage validationMessage="Error" value={"Foo"} />);
+    const textarea = screen.getByRole("textbox");
+    expect(textarea).toHaveAttribute("aria-invalid", "true");
+  });
+
+  test("textarea does not have aria-invalid when showValidationMessage is false", () => {
+    render(<ThemedTextarea value={"Foo"} />);
+    const textarea = screen.getByRole("textbox");
+    expect(textarea).not.toHaveAttribute("aria-invalid");
+  });
+
   test("helper text is visible when received as a prop", () => {
     const helperText = "This is a helper text";
     render(<ThemedTextarea helperText={helperText} value={"Foo"} />);

package/src/components/ToggleGroup/ToggleGroup.test.tsx

@@ -35,6 +35,35 @@ describe("ToggleGroup", () => {
     expect(errorMessage).toBeInTheDocument();
   });
 
+  test("validation message has role='alert' when showValidationMessage is true", () => {
+    const validationMessage = "Selection required";
+    render(
+      <ThemedToggleGroup showValidationMessage validationMessage={validationMessage} onToggle={jest.fn()} toggles={[]} activeValues={[]} />
+    );
+    const alert = screen.getByRole("alert");
+    expect(alert).toHaveTextContent(validationMessage);
+  });
+
+  test("validation message does not have role='alert' when showValidationMessage is false", () => {
+    const validationMessage = "Selection required";
+    render(<ThemedToggleGroup validationMessage={validationMessage} onToggle={jest.fn()} toggles={[]} activeValues={[]} />);
+    expect(screen.queryByRole("alert")).not.toBeInTheDocument();
+  });
+
+  test("group has aria-invalid when showValidationMessage is true", () => {
+    render(
+      <ThemedToggleGroup showValidationMessage validationMessage="Error" onToggle={jest.fn()} toggles={[]} activeValues={[]} />
+    );
+    const group = screen.getByRole("group");
+    expect(group).toHaveAttribute("aria-invalid", "true");
+  });
+
+  test("group does not have aria-invalid when showValidationMessage is false", () => {
+    render(<ThemedToggleGroup toggleGroupLabel="label" onToggle={jest.fn()} toggles={[]} activeValues={[]} />);
+    const group = screen.getByRole("group");
+    expect(group).not.toHaveAttribute("aria-invalid");
+  });
+
   test("multiple toggles test", () => {
     const labels = ["Test label 1", "Test label 2", "Test label 3"];
     const onToggle = jest.fn();

package/src/components/ToggleGroup/ToggleGroup.tsx

@@ -23,6 +23,7 @@ export const ToggleGroup: FC<ToggleGroupType> = (props) => {
     noBottomPadding = false,
     onToggle,
     required,
+    hasError,
     showValidationMessage = false,
     toggles,
     titleColor,
@@ -35,7 +36,7 @@ export const ToggleGroup: FC<ToggleGroupType> = (props) => {
   const disabledTextColor = disabledLabelColor || theme.text.disabledColor;
 
   return (
-    <ToggleGroupBase $labelGap={labelGap} $noBottomPadding={noBottomPadding} $width={toggleGroupWidth} role="group" aria-required={required ? "true" : undefined}>
+    <ToggleGroupBase $labelGap={labelGap} $noBottomPadding={noBottomPadding} $width={toggleGroupWidth} role="group" aria-invalid={(hasError ?? showValidationMessage) ? "true" : undefined} aria-required={required ? "true" : undefined}>
       {toggleGroupLabel ? (
         typeof toggleGroupLabel === "string" ? (
           <BodyXSEmphasis $textColor={disableGroup ? disabledTextColor : titleColor} data-sentry-unmask>

package/src/components/ToggleGroup/types.ts

@@ -20,6 +20,9 @@ export interface ToggleGroupType extends Omit<ToggleItemType, "active" | "label"
   onToggle?: (event: ChangeEvent<HTMLInputElement>) => void;
   /** Adds an asterisk to the UI when there is also a `toggleGroupLabel` */
   required?: boolean;
+  /** Sets aria-invalid on the group independently of showValidationMessage. Useful when the inline
+   * message is suppressed (e.g. leftLabels Form layout) but the field is still in an error state. */
+  hasError?: boolean;
   /** Displays an error message under the last toggle */
   showValidationMessage?: boolean;
   /** The label for ToggleGroup. Not required, but strongly recommended. */

package/src/sharedStyle/Inputs.tsx

@@ -221,7 +221,9 @@ export const TrailingText = styled.p<TrailingTextProps>`
   right: ${({ $iconSpaceAfter, $passwordManagerPresent }) => ($iconSpaceAfter ? 45 : 16) + ($passwordManagerPresent ? pwWidth : 0)}px;
 `;
 
-export const ValidationText = styled.p<ValidationTextProps>`
+export const ValidationText = styled.p.attrs<ValidationTextProps>(({ $showValidationMessage }) => ({
+  role: $showValidationMessage ? "alert" : undefined,
+}))<ValidationTextProps>`
   color: ${({ $disabled, $disabledColor, theme, $failColor: failColor }) =>
     $disabled ? $disabledColor || theme.input?.disabledColor : failColor || theme.input?.failColor};
   font-size: 14px;