@cerebruminc/cerebellum 17.3.7 → 17.3.8

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # react-component-lib-boilerplate
 
+## [17.3.8](https://github.com/cerebruminc/cerebellum/compare/v17.3.7...v17.3.8) (2026-06-25)
+
+
+### Bug Fixes
+
+* **input:** add id's to input erro messages ([6e131e3](https://github.com/cerebruminc/cerebellum/commit/6e131e3dc2c8f713ce3ba3f2156562d15af91a40))
+* **toggle:** support explicit labelling for interactive switches ([6a18319](https://github.com/cerebruminc/cerebellum/commit/6a18319cacabd10148e663d0c8db97f76f6dc587))
+
 ## [17.3.7](https://github.com/cerebruminc/cerebellum/compare/v17.3.6...v17.3.7) (2026-06-23)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cerebruminc/cerebellum",
-  "version": "17.3.7",
+  "version": "17.3.8",
   "description": "Cerebrum's React Component Library",
   "type": "module",
   "main": "src/index.ts",

package/src/components/DescriptiveSwitchMenu/DescriptiveSwitchMenu.test.tsx

@@ -60,8 +60,9 @@ describe("DescriptiveSwitchMenu", () => {
 
   test("Toggle enum displays toggles", () => {
     render(<ThemedDescriptiveSwitchMenu options={options} switchType={SwitchTypeEnum.Toggle} isClickable />);
-    const toggles = screen.getAllByRole("switch");
+    const toggles = screen.getAllByRole("checkbox");
     expect(toggles.length).toEqual(options.length);
+    expect(screen.queryByRole("switch")).not.toBeInTheDocument();
   });
 
   test("active option is checked", () => {

package/src/components/InlineInput/InlineInput.tsx

@@ -66,6 +66,7 @@ export const InlineInput: FC<InlineInputType> = ({
   trailingText,
   trailingTextColor,
   type = "text",
+  validationMessageId,
   value = "",
 }) => {
   const theme = useTheme();
@@ -191,6 +192,7 @@ export const InlineInput: FC<InlineInputType> = ({
         $showValidationMessage={showValidationMessage}
         $sidePadding={sidePadding}
         step={type === "number" ? step : undefined}
+        aria-describedby={showValidationMessage && validationMessageId ? validationMessageId : undefined}
         aria-invalid={showValidationMessage ? "true" : undefined}
         aria-required={required ? "true" : undefined}
         required={required}

package/src/components/InlineInput/types.ts

@@ -5,6 +5,8 @@ import { InputTheme } from "../../sharedTypes/enums";
 export interface InlineInputType {
   /** Sets HTML attribute `autofocus`, which will focus the input on load */
   autofocus?: boolean;
+  /** An id pointing to the validation message element. Used internally by Input to set `aria-describedby` on the input when validation is shown. */
+  validationMessageId?: string;
   /** Maximum number of characters the input will accept */
   characterLimit?: number;
   /** Enables the clear button feature, which displays an X in the right side to easily clear the input */

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

@@ -71,6 +71,24 @@ describe("Input", () => {
     expect(input).not.toHaveAttribute("aria-invalid");
   });
 
+  test("input has aria-describedby pointing to validation message when showValidationMessage is true", () => {
+    const label = "Test input";
+    const validationMessage = "This field is required";
+    render(<ThemedInput value="" inputLabel={label} showValidationMessage validationMessage={validationMessage} />);
+    const input = screen.getByLabelText(label);
+    const describedById = input.getAttribute("aria-describedby");
+    expect(describedById).toBeTruthy();
+    const validationElement = document.getElementById(describedById!);
+    expect(validationElement).toHaveTextContent(validationMessage);
+  });
+
+  test("input does not have aria-describedby when showValidationMessage is false", () => {
+    const label = "Test input";
+    render(<ThemedInput value="" inputLabel={label} validationMessage="Error" />);
+    const input = screen.getByLabelText(label);
+    expect(input).not.toHaveAttribute("aria-describedby");
+  });
+
   // ------ 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/Input/Input.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useEffect, useRef, useState } from "react";
+import React, { FC, useEffect, useId, useRef, useState } from "react";
 import { InlineInput } from "../InlineInput";
 import useMeasure from "../../hooks/useMeasure";
 
@@ -24,9 +24,11 @@ export const Input: FC<InputType> = (props: InputType) => {
     validationMessage,
   } = props;
 
+  const reactId = useId();
+  const validationId = `${reactId}-validation`;
   const labelBoxRef = useRef<HTMLDivElement>(null);
   const [inputGroupRef, inputGroupMeasure] = useMeasure();
-  const validationRef = useRef<HTMLDivElement>(null);
+  const validationRef = useRef<HTMLParagraphElement>(null);
   const [designSwitch, setDesignSwitch] = useState(false);
   const helperTextVisible = !showValidationMessage || !designSwitch;
 
@@ -47,8 +49,9 @@ export const Input: FC<InputType> = (props: InputType) => {
         {showLabel({ inputLabel, disabled, disabledColor, labelColor, htmlFor: id, removePaddingRight: required })}
         {required && <Asterisk $asteriskColor={asteriskColor}>*</Asterisk>}
       </LabelBox>
-      <InlineInput {...props} trailingTextColor={helperTextColor} />
+      <InlineInput {...props} trailingTextColor={helperTextColor} validationMessageId={validationId} />
       <ValidationText
+        id={validationId}
         ref={validationRef}
         $showValidationMessage={showValidationMessage}
         $disabled={disabled}

package/src/components/Textarea/InlineTextarea.tsx

@@ -32,11 +32,13 @@ export const InlineTextarea: FC<InlineTextareaType> = ({
   textareaRef,
   textFontSize,
   // theme = InputTheme.Default,
+  validationMessageId,
   value,
 }) => {
   return (
     <PositionWrapper $width={inputWidth}>
       <TextareaElement
+        aria-describedby={showValidationMessage && validationMessageId ? validationMessageId : undefined}
         aria-invalid={showValidationMessage ? "true" : undefined}
         id={htmlId}
         ref={textareaRef}

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

@@ -103,6 +103,22 @@ describe("Textarea", () => {
     expect(textarea).not.toHaveAttribute("aria-invalid");
   });
 
+  test("textarea has aria-describedby pointing to validation message when showValidationMessage is true", () => {
+    const validationMessage = "This field is required";
+    render(<ThemedTextarea showValidationMessage validationMessage={validationMessage} value={"Foo"} />);
+    const textarea = screen.getByRole("textbox");
+    const describedById = textarea.getAttribute("aria-describedby");
+    expect(describedById).toBeTruthy();
+    const validationElement = document.getElementById(describedById!);
+    expect(validationElement).toHaveTextContent(validationMessage);
+  });
+
+  test("textarea does not have aria-describedby when showValidationMessage is false", () => {
+    render(<ThemedTextarea validationMessage="Error" value={"Foo"} />);
+    const textarea = screen.getByRole("textbox");
+    expect(textarea).not.toHaveAttribute("aria-describedby");
+  });
+
   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/Textarea.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useEffect, useRef, useState } from "react";
+import React, { FC, useEffect, useId, useRef, useState } from "react";
 
 import useMeasure from "../../hooks/useMeasure";
 import { showLabel } from "../../sharedHelpers/showLabel";
@@ -25,6 +25,8 @@ export const Textarea: FC<TextareaType> = (props) => {
     validationMessage,
   } = props;
 
+  const reactId = useId();
+  const validationId = `${reactId}-validation`;
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const labelBoxRef = useRef<HTMLDivElement>(null);
   const [inputGroupRef, inputGroupMeasure] = useMeasure();
@@ -62,13 +64,14 @@ export const Textarea: FC<TextareaType> = (props) => {
           {showLabel({ inputLabel, disabled, disabledColor, labelColor, htmlFor: htmlId, removePaddingRight: required })}
           {required && <Asterisk $asteriskColor={asteriskColor}>*</Asterisk>}
         </LabelBox>
-        <InlineTextarea htmlId={htmlId} {...props} textareaRef={textareaRef} />
+        <InlineTextarea htmlId={htmlId} {...props} textareaRef={textareaRef} validationMessageId={validationId} />
         {helperTextVisible && (
           <HelperText $disabled={disabled} $helperTextColor={helperTextColor} $disabledColor={disabledColor} data-sentry-unmask>
             {helperText}
           </HelperText>
         )}
         <ValidationText
+          id={validationId}
           ref={validationRef}
           $disabled={disabled}
           $showValidationMessage={showValidationMessage}

package/src/components/Textarea/types.ts

@@ -4,6 +4,8 @@ import { InputTheme } from "../../sharedTypes/enums";
 export interface InlineTextareaType {
   /** Restricts Textarea to this number of characters. No limit applied if undefined. */
   characterLimit?: number;
+  /** An id pointing to the validation message element. Used internally by Textarea to set `aria-describedby` on the textarea when validation is shown. */
+  validationMessageId?: string;
   /** Puts Textarea into a disabled state. */
   disabled?: boolean;
   /** An id for the textarea html element - needed in case there are multiple textareas in a page (for screenreaders) */

package/src/components/Toggle/Toggle.mdx

@@ -10,12 +10,13 @@ import * as ToggleStories from "./Toggle.stories";
 ## Toggle Usage
 
 ```jsx
-import React from "react";
+import React, { useState } from "react";
 
 import { Toggle } from "@cerebruminc/cerebellum";
 
-const Example = ({ active }) => {
-  return <Toggle active={active} />;
+const Example = () => {
+  const [active, setActive] = useState(false);
+  return <Toggle active={active} onToggle={() => setActive((prev) => !prev)} aria-label="Dark mode" />;
 };
 ```
 

package/src/components/Toggle/Toggle.stories.tsx

@@ -1,12 +1,14 @@
 import { Meta, StoryObj } from "@storybook/react";
 import React from "react";
 import { colors } from "../../const/colors";
-import { BodyMEmphasis } from "../../const/text";
+import { BodyMEmphasis, BodySPrimary } from "../../const/text";
 import { Toggle } from "./Toggle";
 
 /**
  * A simple toggle switch. Please note that this is not an `<input>` element, and will not work with some form generators. `ToggleItem` and `ToggleGroup` both use `<input>` elements.
 
+When `Toggle` is interactive, provide either `aria-label` or `aria-labelledby`. A wrapping `<label>` does not name a custom `role="switch"` element.
+
 **Note:** You must handle the active state externally.
  */
 const meta: Meta<typeof Toggle> = { component: Toggle, title: "components/Toggles/Toggle" };
@@ -35,12 +37,30 @@ export const WithChildren: Story = {
   },
 };
 
+/**
+ * Use `aria-labelledby` when the visible label is rendered separately from the custom switch element.
+ */
+export const WithSeparateLabel: Story = {
+  render: (args) => (
+    <div style={{ alignItems: "center", display: "flex", gap: "12px" }}>
+      <BodySPrimary id="toggle-separate-label">High contrast theme</BodySPrimary>
+      <Toggle {...args} aria-labelledby="toggle-separate-label" />
+    </div>
+  ),
+  args: {
+    active: true,
+    disabled: false,
+    onToggle: () => console.log("ToggleClick"),
+  },
+};
+
 /**
  * You can override the theme if you need to. Make sure you know what you're doing, or something awful could happnen:
  */
 export const OverrideTheTheme: Story = {
   args: {
     active: true,
+    "aria-label": "Toggle switch",
     disabled: false,
     onToggle: () => console.log("ToggleClick"),
     knobColor: colors.RED_10,

package/src/components/Toggle/Toggle.test.tsx

@@ -38,6 +38,17 @@ describe("Toggle", () => {
     expect(toggle).toBeInTheDocument();
   });
 
+  test("uses aria-labelledby when provided", () => {
+    render(
+      <>
+        <span id="dark-mode-label">Dark mode</span>
+        <ThemedToggle active onToggle={jest.fn()} aria-labelledby="dark-mode-label" />
+      </>
+    );
+    const toggle = screen.getByRole("switch", { name: "Dark mode" });
+    expect(toggle).toBeInTheDocument();
+  });
+
   test("toggles on Space key press", async () => {
     const mockOnToggle = jest.fn();
     render(<ThemedToggle active onToggle={mockOnToggle} />);
@@ -63,4 +74,10 @@ describe("Toggle", () => {
     await expect(() => userEvent.click(toggle)).rejects.toThrow();
     expect(mockOnClick).toHaveBeenCalledTimes(0);
   });
+
+  test("renders as decorative when onToggle is not provided", () => {
+    render(<ThemedToggle active />);
+    expect(screen.queryByRole("switch")).not.toBeInTheDocument();
+    expect(screen.getByTestId("toggle-component")).toHaveAttribute("aria-hidden", "true");
+  });
 });

package/src/components/Toggle/Toggle.tsx

@@ -8,6 +8,7 @@ import { ToggleType } from "./types";
 export const Toggle: FC<ToggleType> = ({
   active,
   "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
   clickPadding = 15,
   children,
   disabled,
@@ -24,6 +25,8 @@ export const Toggle: FC<ToggleType> = ({
   trackHeight,
   width,
 }) => {
+  const isInteractive = !!onToggle;
+
   return (
     <ClickPadding
       data-testid="toggle-component"
@@ -41,11 +44,13 @@ export const Toggle: FC<ToggleType> = ({
         }
       }}
       $disabled={disabled}
-      role="switch"
-      aria-checked={active}
-      aria-disabled={disabled}
-      aria-label={ariaLabel}
-      tabIndex={!onToggle || disabled ? -1 : 0}
+      role={isInteractive ? "switch" : undefined}
+      aria-checked={isInteractive ? active : undefined}
+      aria-disabled={isInteractive ? disabled : undefined}
+      aria-hidden={isInteractive ? undefined : true}
+      aria-label={isInteractive ? ariaLabel : undefined}
+      aria-labelledby={isInteractive ? ariaLabelledBy : undefined}
+      tabIndex={!isInteractive || disabled ? -1 : 0}
     >
       <Base disabled={disabled} $knobSize={knobSize} $trackHeight={trackHeight} $width={width}>
         <Knob $active={active} $knobSize={knobSize} $width={width}>

package/src/components/Toggle/types.ts

@@ -3,8 +3,10 @@ import { KeyboardEvent, MouseEvent } from "react";
 export interface ToggleType {
   /** The current state of the Toggle  */
   active: boolean;
-  /** Accessible label for the toggle switch. Required when Toggle is used without a visible label or wrapping <label> element. */
+  /** Accessible label for an interactive toggle switch. Required when Toggle is used without a separate visible label element. */
   "aria-label"?: string;
+  /** Id of the visible label for an interactive toggle switch. Prefer this when the label text is already rendered elsewhere. */
+  "aria-labelledby"?: string;
   children?: React.ReactNode;
   /** Clickable space added around Toggle, in pixels. Pass `0` to disable  */
   clickPadding?: number | string;

package/src/components/ToggleItem/ToggleItem.test.tsx

@@ -11,8 +11,9 @@ describe("ToggleItem", () => {
     const text = "Unique ToggleItem text";
     render(<ThemedToggleItem active={true} value={text} onToggle={jest.fn()} />);
 
-    const toggle = screen.getByText(text);
+    const toggle = screen.getByRole("checkbox", { name: text });
     expect(toggle).toBeInTheDocument();
+    expect(screen.queryByRole("switch")).not.toBeInTheDocument();
   });
 
   test("disabled checkbox is not clickable", async () => {