@cerebruminc/cerebellum 17.3.1 → 17.3.2

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # react-component-lib-boilerplate
 
+## [17.3.2](https://github.com/cerebruminc/cerebellum/compare/v17.3.1...v17.3.2) (2026-06-15)
+
+
+### Bug Fixes
+
+* **toggle:** add aria-checked and aria-label to Toggle switch (FRN-3162) ([06a1896](https://github.com/cerebruminc/cerebellum/commit/06a1896e1712b5accfe0d95baccdb7b23af7c75a))
+
 ## [17.3.1](https://github.com/cerebruminc/cerebellum/compare/v17.3.0...v17.3.1) (2026-06-11)
 
 

package/package.json

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

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

@@ -17,6 +17,7 @@ type Story = StoryObj<typeof Toggle>;
 export const Default: Story = {
   args: {
     active: true,
+    "aria-label": "Toggle switch",
     disabled: false,
     onToggle: () => console.log("ToggleClick"),
   },

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

@@ -20,6 +20,39 @@ describe("Toggle", () => {
     });
   });
 
+  test("has aria-checked true when active", () => {
+    render(<ThemedToggle active onToggle={jest.fn()} />);
+    const toggle = screen.getByRole("switch");
+    expect(toggle).toHaveAttribute("aria-checked", "true");
+  });
+
+  test("has aria-checked false when inactive", () => {
+    render(<ThemedToggle active={false} onToggle={jest.fn()} />);
+    const toggle = screen.getByRole("switch");
+    expect(toggle).toHaveAttribute("aria-checked", "false");
+  });
+
+  test("sets aria-label when provided", () => {
+    render(<ThemedToggle active onToggle={jest.fn()} aria-label="Dark mode" />);
+    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} />);
+    const toggle = screen.getByRole("switch");
+    toggle.focus();
+    await userEvent.keyboard(" ");
+    expect(mockOnToggle).toHaveBeenCalledTimes(1);
+  });
+
+  test("has aria-disabled true when disabled", () => {
+    render(<ThemedToggle active={false} disabled onToggle={jest.fn()} />);
+    const toggle = screen.getByRole("switch");
+    expect(toggle).toHaveAttribute("aria-disabled", "true");
+  });
+
   test("renders disabled Toggle", async () => {
     const mockOnClick = jest.fn();
     render(<ThemedToggle active={false} disabled onToggle={mockOnClick} />);

package/src/components/Toggle/Toggle.tsx

@@ -1,12 +1,13 @@
 import React, { FC, KeyboardEvent } from "react";
 
-import { pressedEnter } from "../../helpers/accessibility";
+import { pressedEnter, pressedSpacebar } from "../../helpers/accessibility";
 
 import { ActiveTrack, Base, ClickPadding, Focus, Knob, KnobColor, TrackBox } from "./ToggleStyles";
 import { ToggleType } from "./types";
 
 export const Toggle: FC<ToggleType> = ({
   active,
+  "aria-label": ariaLabel,
   clickPadding = 15,
   children,
   disabled,
@@ -33,8 +34,17 @@ export const Toggle: FC<ToggleType> = ({
           onToggle?.(event);
         }
       }}
+      onKeyDown={(event: KeyboardEvent<HTMLSpanElement>) => {
+        if (!disabled && pressedSpacebar(event)) {
+          event.preventDefault();
+          onToggle?.(event);
+        }
+      }}
       $disabled={disabled}
       role="switch"
+      aria-checked={active}
+      aria-disabled={disabled}
+      aria-label={ariaLabel}
       tabIndex={!onToggle || disabled ? -1 : 0}
     >
       <Base disabled={disabled} $knobSize={knobSize} $trackHeight={trackHeight} $width={width}>

package/src/components/Toggle/types.ts

@@ -3,6 +3,8 @@ 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. */
+  "aria-label"?: string;
   children?: React.ReactNode;
   /** Clickable space added around Toggle, in pixels. Pass `0` to disable  */
   clickPadding?: number | string;