@cerebruminc/cerebellum 17.0.2 → 17.1.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # react-component-lib-boilerplate
 
+## [17.1.0](https://github.com/cerebruminc/cerebellum/compare/v17.0.2...v17.1.0) (2026-05-19)
+
+
+### Features
+
+* **form:** add role="alert" to ValidationText for screen reader announcements ([6fb946d](https://github.com/cerebruminc/cerebellum/commit/6fb946dbdfbc6ed0ecea291cabc7b4a62bf3e99f))
+
+
+### Bug Fixes
+
+* replace JSX.Element with React.JSX.Element across type definitions ([839ce02](https://github.com/cerebruminc/cerebellum/commit/839ce0238d74e1f3d20d847b87a2c4a60288e30e))
+* resolve TypeScript errors after React 19 types upgrade ([c0b49ce](https://github.com/cerebruminc/cerebellum/commit/c0b49ce10e7be7bbedd7d89d60deef5a1b848774))
+
 ## [17.0.2](https://github.com/cerebruminc/cerebellum/compare/v17.0.1...v17.0.2) (2026-05-18)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cerebruminc/cerebellum",
-  "version": "17.0.2",
+  "version": "17.1.0",
   "description": "Cerebrum's React Component Library",
   "type": "module",
   "main": "src/index.ts",
@@ -20,7 +20,7 @@
     "clean-storybook": "rm -rf docs",
     "lint": "biome check ./src",
     "lint:fix": "biome check ./src --write",
-    "tsc": "./node_modules/.bin/tsc",
+    "tsc": "NODE_OPTIONS=--max-old-space-size=8192 tsc",
     "chromatic": "chromatic",
     "chromatic:ci": "chromatic --exit-zero-on-changes"
   },
@@ -77,8 +77,8 @@
     "@testing-library/user-event": "^14.0.0",
     "@types/jest": "^29.5.12",
     "@types/jscodeshift": "^0.12.0",
-    "@types/react": "^18.2.66",
-    "@types/react-dom": "^18.2.22",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
     "babel-jest": "^29.6.1",
     "babel-loader": "^10.0.0",
     "babel-plugin-dynamic-import-node": "^2.3.3",

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/ClickOutHandler/ClickOutHandler.tsx

@@ -3,7 +3,7 @@ import { Wrapper } from "./ClickOutHandlerStyles";
 import { ClickOutHandlerType } from "./types";
 
 export const ClickOutHandler: FC<ClickOutHandlerType> = ({ children, handleClickAway, borderRadius }: ClickOutHandlerType) => {
-  const wrapperRef = useRef<any>();
+  const wrapperRef = useRef<any>(null);
 
   useEffect(() => {
     function handleClickOutside(event: Event) {

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/DescriptiveSwitchMenu/types.ts

@@ -35,7 +35,7 @@ export interface SwitchMenuOptionsType {
   active?: boolean;
   description?: React.ReactNode;
   disabled?: boolean;
-  name?: string | JSX.Element;
+  name?: string | React.JSX.Element;
   value: string;
   [key: string]: any;
 }

package/src/components/DigitalInput/DigitalInput.stories.tsx

@@ -18,9 +18,9 @@ export const BasicExample: Story = {
     return (
       <DigitalInput
         {...args}
-        onChange={({ value }) => {
-          args.onChange?.({ value });
-          updateArgs({ value });
+        onChange={(arg) => {
+          args.onChange?.(arg);
+          updateArgs({ value: arg.value });
         }}
       />
     );
@@ -72,9 +72,9 @@ export const OnComplete: Story = {
       <>
         <DigitalInput
           {...args}
-          onChange={({ value }) => {
-            args.onChange?.({ value });
-            updateArgs({ value });
+          onChange={(arg) => {
+            args.onChange?.(arg);
+            updateArgs({ value: arg.value });
           }}
           onComplete={(value) => {
             DialogHandler.show({

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/Form/types.ts

@@ -52,7 +52,7 @@ export interface FormType<FormData extends Record<string, any> = Record<string,
   /** Hides the submit button. Not necessary for `submitOnBlur`, but useful if you want to have an external submit button. */
   hideSubmitButton?: boolean;
   /** Passthrough ref to the form. Allows for external submit and other fun */
-  innerRef?: RefObject<FormikProps<FormData>>;
+  innerRef?: RefObject<FormikProps<FormData> | null>;
   /** Aligns the titles to the left and the inputs to the right */
   leftLabels?: boolean;
   /** The width reserved for the right validation space when in left label mode, in pixels */

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/InlineInput/types.ts

@@ -22,7 +22,7 @@ export interface InlineInputType {
   /** Sets the width, in pixels. Default is 100%, with a 700px max width. */
   inputWidth?: number;
   /** Used to pass a ref to the InlineInput component */
-  innerRef?: RefObject<HTMLInputElement>;
+  innerRef?: RefObject<HTMLInputElement | null>;
   /** Left aligned icon used to further emphasize the Input Label. Accepts a Cerebellum Icon component directly, or JSX */
   LeadingIcon?: IconType | FC;
   /** HTML inputmode attribute. Used to determine keyboard type only */

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/SearchMenu/types.ts

@@ -45,7 +45,7 @@ export interface SearchMenuType {
   /** Search will include the middle of words */
   innerSearch?: boolean;
   /** Used to pass a ref to the SearchMenu parent element */
-  innerRef?: RefObject<HTMLSpanElement>;
+  innerRef?: RefObject<HTMLSpanElement | null>;
   /** Is the SearchMenu visible? This is used to reset the search on open, and to prevent `onSelect` from firing - not to show/hide the menu. */
   isVisible?: boolean;
   /** The field in each option to use instead of `label` */

package/src/components/Stepper/showFooterText.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from "react";
 import { BodyMEmphasis } from "../../const/text";
 
-export const showFooterText = ({ footerText }: { footerText?: string | FC | JSX.Element }) => {
+export const showFooterText = ({ footerText }: { footerText?: string | FC | React.JSX.Element }) => {
   if (footerText) {
     if (typeof footerText === "function") {
       const ComponentLabel = footerText;

package/src/components/Stepper/types.ts

@@ -22,7 +22,7 @@ export interface StepperType {
   /** A URL for an image. Adds a footer with this image in it. Works best with .pngs with a transparent background */
   footerImage?: string;
   /** Displays text in the footer */
-  footerText?: string | FC | JSX.Element;
+  footerText?: string | FC | React.JSX.Element;
   /** Called when a step is clicked */
   stepClick?: (id: string) => void;
   /** The options to display in your steps */

package/src/components/Table/EditCell.tsx

@@ -40,7 +40,7 @@ export const EditCell: FC<EditCellProps> = ({
   submitData,
 }) => {
   const usableInitialValue = isUsableInitialValue({ initialValue, editType });
-  const [value, setValue] = useState<string | number | boolean | JSX.Element | Array<string>>(
+  const [value, setValue] = useState<string | number | boolean | React.JSX.Element | Array<string>>(
     usableInitialValue ? initialValue : setCorrectValueType({ initialValue, editType })
   );
   const previouslyVisible = usePrevious(isVisible);

package/src/components/Table/types.ts

@@ -91,9 +91,9 @@ export interface TableType {
   /** This will enable a button in the no results state, and will be called when the button is clicked. Usually it will clear the filters or a similar action */
   noResultsFunction?: () => void;
   /** A header for the no results message */
-  noResultsHeader?: string | JSX.Element;
+  noResultsHeader?: string | React.JSX.Element;
   /** The text for the no results message */
-  noResultsText?: string | JSX.Element;
+  noResultsText?: string | React.JSX.Element;
   /** The text for the no results button. Useless unless `noResultsFunction` is passed */
   noResultsButtonText?: string;
   /** Will close menus & tooltips when this element scrolls. This must be supplied on mount. Defaults to `window` */
@@ -499,7 +499,7 @@ export interface EditCellProps {
   rightPadding?: number;
   roomForButtons?: boolean;
   rowData: RowType;
-  setCellData: (value: string | number | boolean | JSX.Element | Array<string>) => void;
+  setCellData: (value: string | number | boolean | React.JSX.Element | Array<string>) => void;
   setEditErrorTooltipPosition?: (position: PositionType) => void;
   showError?: boolean;
   submitData: (value: string | number) => void;

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/Textarea/types.ts

@@ -33,7 +33,7 @@ export interface InlineTextareaType {
   /** Styles the Textarea as if it showing a validation message */
   showValidationMessage?: boolean;
   /** A ref object for the textarea element */
-  textareaRef?: RefObject<HTMLTextAreaElement>;
+  textareaRef?: RefObject<HTMLTextAreaElement | null>;
   /** Sets the theme */
   theme?: InputTheme;
   /** Textarea value. This must always be defined. */

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/components/Tooltip/types.ts

@@ -8,7 +8,7 @@ export interface TooltipType {
   /** Wraps the component in ClickOutHandler and calls this on click out. Only useful if `clickable: true` */
   clickOut?: () => void;
   direction?: string;
-  innerRef?: RefObject<HTMLDivElement>;
+  innerRef?: RefObject<HTMLDivElement | null>;
   offset?: number;
   onOpen?: () => void;
   onMouseout?: (event: MouseEventInit) => void;

package/src/components/TooltipLabel/types.ts

@@ -13,7 +13,7 @@ export interface TooltipLabelType {
   /** Will close  the tooltip when this element scrolls. This must be supplied on mount. Defaults to `window` */
   observeScrollRef?: RefObject<HTMLElement>;
   /** Contents of the tooltip. This may be a string or a react component. */
-  tooltipText: string | FC | JSX.Element;
+  tooltipText: string | FC | React.JSX.Element;
   /** Overrides the theme style. */
   themeOverride?: ThemeOverride;
   /** Width of the tooltip, in pixels. */

package/src/components/Typography/Typography.tsx

@@ -42,7 +42,7 @@ export const Typography: FC<TypographyProps> = ({
   truncateLines,
   variant,
 }) => {
-  const textRef: RefObject<HTMLParagraphElement> = innerRef || useRef<HTMLParagraphElement>(null);
+  const textRef: RefObject<HTMLParagraphElement | null> = innerRef || useRef<HTMLParagraphElement>(null);
   const payload = truncate ? (
     <Truncate lines={truncateLines} onHover={onTruncateHover} onHoverOut={onTruncateHoverOut} sentryUnmask={sentryUnmask}>
       {children}

package/src/components/Typography/types.ts

@@ -30,7 +30,7 @@ export enum TextVariantEnum {
 export interface TypographyProps {
   children?: ReactNode;
   /** Used to pass a ref into Typography */
-  innerRef?: RefObject<HTMLParagraphElement>;
+  innerRef?: RefObject<HTMLParagraphElement | null>;
   /** The line-height, in pixels. If you need a non-pixel value, you'll need to extend the style and overwrite */
   lineHeight?: number;
   /** Truncate hover function. This will only be applied if `truncate` is passed. */

package/src/configuredComponents/DescriptiveDropdownInput/DescriptiveDropdownInput.tsx

@@ -52,7 +52,7 @@ export const DescriptiveDropdownInput: FC<DescriptiveDropdownInputType> = ({
   const [showMenu, setShowMenu] = useState(defaultOpen);
   const [activeTags, setActiveTags] = useState<OptionType[] | undefined>();
   const [taglessArray, setTaglessArray] = useState<string[]>([]);
-  const [buttonText, setButtonText] = useState<string | FC | JSX.Element>("");
+  const [buttonText, setButtonText] = useState<string | FC | React.JSX.Element>("");
   const [targetRef, targetMeasure] = useMeasureWatchResize([showMenu]);
 
   const menuWidth = themeOverride?.menuWidth;

package/src/configuredComponents/InlineDescriptiveDropdown/InlineDescriptiveDropdown.tsx

@@ -41,7 +41,7 @@ export const InlineDescriptiveDropdown: FC<InlineDescriptiveDropdownType> = ({
   const [activeId, setActiveId] = useState(defaultId);
   const [showMenu, setShowMenu] = useState(defaultOpen);
   const [taglessArray, setTaglessArray] = useState<string[]>([]);
-  const [buttonText, setButtonText] = useState<string | JSX.Element>("");
+  const [buttonText, setButtonText] = useState<string | React.JSX.Element>("");
   const [targetRef, targetMeasure] = useMeasureWatchResize([showMenu]);
 
   const menuWidth = themeOverride?.menuWidth || 397;

package/src/configuredComponents/InlineDropdown/types.ts

@@ -61,7 +61,7 @@ export interface InlineDropdownType {
   /** Padding for your link. You may need to adjust this to get your TextLink to fit with the surrouning text. Default is `"4px 20px 3px 3px"` */
   paddingString?: string;
   /** The text for the button. Uses text components from the textStyle enum if a string  */
-  text: string | JSX.Element;
+  text: string | React.JSX.Element;
   /** The style for the button text */
   textStyle?: TextStyleEnum;
   /** Underlines the link */

package/src/hocs/PropsChecker.tsx

@@ -81,7 +81,7 @@ function compFNSelection(compType: ComparaisonTypes) {
  */
 export function ReactFnCompPropsChecker<T extends Props>(props: PropsCheckerProps<T>) {
   const { children, childrenProps, compType = "SIMPLE", verbose } = props;
-  const oldPropsRef = React.useRef<T>();
+  const oldPropsRef = React.useRef<T | undefined>(undefined);
   React.useEffect(() => {
     const oldProps = oldPropsRef.current;
     if (oldProps === undefined) {

package/src/hooks/usePrevious.ts

@@ -2,7 +2,7 @@
 import { useEffect, useRef } from "react";
 
 export function usePrevious(value: any) {
-  const ref = useRef();
+  const ref = useRef(undefined);
   useEffect(() => {
     ref.current = value; //assign the value of ref to the argument
   }, [value]); //this code will run when the value of 'value' changes

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;

package/src/sharedTypes/types.ts

@@ -45,7 +45,7 @@ export interface OptionType {
 }
 
 export interface OptionComponentLabelType extends Omit<OptionType, "label"> {
-  label?: string | JSX.Element;
+  label?: string | React.JSX.Element;
 }
 
 export interface ChildlessOptionType extends Omit<OptionType, "children" | "id" | "label"> {

package/tsconfig.json

@@ -14,7 +14,8 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "preserve",
+    "noImplicitAny": false
   },
   "include": ["src/**/*", "types.d.ts"],
   "exclude": ["node_modules"]

package/tsconfig.test.json

@@ -2,7 +2,8 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "module": "commonjs",
-    "moduleResolution": "node"
+    "moduleResolution": "node",
+    "jsx": "react-jsx"
   },
   "include": ["src/**/*", "types.d.ts", "node_modules/@rjsf/**/*"]
 }