@cerebruminc/cerebellum 17.3.4 → 17.3.5

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # react-component-lib-boilerplate
 
+## [17.3.5](https://github.com/cerebruminc/cerebellum/compare/v17.3.4...v17.3.5) (2026-06-19)
+
+
+### Bug Fixes
+
+* **deps:** override postcss to ^8.5.10 to resolve CVE-2026-41305 ([8603ab7](https://github.com/cerebruminc/cerebellum/commit/8603ab74f2be7e3fddcaf6a758180b5607710af9))
+* **DigitalInput:** add accessible labels to digit inputs (WCAG 1.3.1, 4.1.2) ([080b765](https://github.com/cerebruminc/cerebellum/commit/080b765c6d2da72b6af3ccee81db622a10f19a1a))
+* **toggle-buttons:** add tabIndex support ([18ee8f9](https://github.com/cerebruminc/cerebellum/commit/18ee8f942e5fcbfb251947925da4cf37e8d82e4c))
+* **toggle-buttons:** use BLUE_130 for active text to meet WCAG AA contrast ([8d1f9ef](https://github.com/cerebruminc/cerebellum/commit/8d1f9ef6ee129e4427389a40960fb00725ab07ca))
+
 ## [17.3.4](https://github.com/cerebruminc/cerebellum/compare/v17.3.3...v17.3.4) (2026-06-17)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cerebruminc/cerebellum",
-  "version": "17.3.4",
+  "version": "17.3.5",
   "description": "Cerebrum's React Component Library",
   "type": "module",
   "main": "src/index.ts",
@@ -153,6 +153,9 @@
   "publishConfig": {
     "access": "public"
   },
+  "overrides": {
+    "postcss": "^8.5.10"
+  },
   "resolutions": {
     "**/trim": "^1.0.0"
   },

package/src/components/DigitalInput/DigitalInput.test.tsx

@@ -26,7 +26,16 @@ describe("DigitalInput", () => {
   test("Renders the label", () => {
     const label = "This is the label";
     render(<DigitalInput name="test" value="" label={label} />);
-    expect(screen.getByLabelText(label)).toBeInTheDocument();
+    expect(screen.getByText(label)).toBeInTheDocument();
+  });
+
+  test("visible label is programmatically associated with the hidden aggregated input", () => {
+    const label = "Verification code";
+    const id = "verification-code";
+    render(<DigitalInput name="test" value="" label={label} id={id} />);
+    const labelEl = screen.getByText(label);
+    expect(labelEl).toHaveAttribute("for", id);
+    expect(document.getElementById(id)).toBeInTheDocument();
   });
 
   test("Submits value onChange and changes focus", () => {
@@ -188,4 +197,33 @@ describe("DigitalInput", () => {
     // Expect focus to move to the second input
     expect(firstInput).not.toHaveFocus();
   });
+
+  test("Each digit input has an accessible label", () => {
+    const digitLength = 4;
+    render(<DigitalInput name="test" value="" digitLength={digitLength} />);
+    for (let i = 1; i <= digitLength; i++) {
+      expect(screen.getByLabelText(`Digit ${i} of ${digitLength}`)).toBeInTheDocument();
+    }
+  });
+
+  test("InputGroup has role=group with aria-label from label prop", () => {
+    const label = "Verification code";
+    render(<DigitalInput name="test" value="" label={label} />);
+    expect(screen.getByRole("group", { name: label })).toBeInTheDocument();
+  });
+
+  test("InputGroup has fallback aria-label when label is not a string", () => {
+    render(<DigitalInput name="test" value="" />);
+    expect(screen.getByRole("group", { name: "Code input" })).toBeInTheDocument();
+  });
+
+  test("InputGroup has fallback aria-label when label is an empty string", () => {
+    render(<DigitalInput name="test" value="" label="" />);
+    expect(screen.getByRole("group", { name: "Code input" })).toBeInTheDocument();
+  });
+
+  test("Prefix input has an accessible label", () => {
+    render(<DigitalInput name="test" value="" prefix="V" />);
+    expect(screen.getByLabelText("Prefix")).toBeInTheDocument();
+  });
 });

package/src/components/DigitalInput/DigitalInput.tsx

@@ -228,11 +228,12 @@ export const DigitalInput: FC<DigitalInputProps> = ({
           disabledColor: themeOverride?.disabledColor ?? theme.input.disabledColor,
           labelColor: themeOverride?.labelColor ?? theme.input.labelColor,
           removePaddingRight: required,
+          htmlFor: id,
         })}
         {required && <Asterisk $asteriskColor={themeOverride?.asteriskColor ?? theme.input.asteriskColor}>*</Asterisk>}
       </LabelBox>
       <HiddenInput
-        aria-label={typeof label === "string" ? label : "code input"}
+        aria-label={typeof label === "string" && label.trim() ? label : "Code input"}
         disabled={disabled}
         name={name}
         id={id}
@@ -242,13 +243,14 @@ export const DigitalInput: FC<DigitalInputProps> = ({
         type="text"
         value={value}
       />
-      <InputGroup $themeOverride={themeOverride}>
+      <InputGroup $themeOverride={themeOverride} role="group" aria-label={typeof label === "string" && label.trim() ? label : "Code input"}>
         {prefix && (
           <>
             <InlineInput
               key="prefixInput"
               {...getCommonInputProps()}
               clickable={false}
+              inputLabel="Prefix"
               onChange={noop}
               onClick={noop}
               onInputBlur={noop}
@@ -267,6 +269,7 @@ export const DigitalInput: FC<DigitalInputProps> = ({
             <InlineInput
               key={`digitalInput_${index}`}
               {...getCommonInputProps()}
+              inputLabel={`Digit ${index + 1} of ${digitLength}`}
               autofocus={autofocus && index === 0 ? true : undefined}
               onChange={(event) => handleInputChange({ index, event: event as unknown as React.ChangeEvent<HTMLInputElement> })}
               onClick={() => handleInputClick(index)}

package/src/components/InlineInput/InlineInput.tsx

@@ -194,7 +194,6 @@ export const InlineInput: FC<InlineInputType> = ({
         aria-invalid={showValidationMessage ? "true" : undefined}
         aria-required={required ? "true" : undefined}
         required={required}
-        role="textbox"
         $textAlign={textAlign}
         $textColor={textColor}
         $textFontSize={textFontSize}

package/src/components/ToggleButtons/ToggleButtons.test.tsx

@@ -2,6 +2,7 @@ import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import React from "react";
 import { withTheme } from "../../hocs/withTheme";
+import { ColorFamilyType } from "../../sharedTypes/types";
 import { Settings } from "../Icons";
 import { ToggleButtons } from "./ToggleButtons";
 import { ToggleButtonButtonsType } from "./types";
@@ -126,7 +127,7 @@ describe("ToggleButtons", () => {
     expect(icon).toBeInTheDocument();
   });
 
-  test("active icon uses colorGroup.hover fill by default", () => {
+  test("active icon uses colorGroup.secondaryText fill by default", () => {
     const buttonId = "1";
     const buttonText = "Foo";
     const buttons: ToggleButtonButtonsType[] = [
@@ -138,8 +139,41 @@ describe("ToggleButtons", () => {
 
     const iconBox = screen.getByTestId(`${buttonText} icon`);
     const path = iconBox.querySelector("path");
-    // Default: active icon fill = colorGroup.hover = BLUE_100
-    expect(path?.getAttribute("fill")).toBe("#4965c8");
+    // Default: active icon fill = colorGroup.secondaryText = BLUE_130
+    expect(path?.getAttribute("fill")).toBe("#4158aa");
+  });
+
+  test("active icon fill falls back to colorGroup.main when secondaryText is undefined", () => {
+    const buttonId = "1";
+    const buttonText = "Foo";
+    const buttons: ToggleButtonButtonsType[] = [
+      { id: buttonId, buttonText: buttonText, Icon: Settings },
+      { id: "2", buttonText: "Bar", Icon: Settings },
+    ];
+
+    const colorFamilyWithoutSecondaryText: ColorFamilyType = {
+      light: "#ffffff",
+      medium: "#cccccc",
+      mediumDark: "#999999",
+      dark: "#666666",
+      main: "#333333",
+      hover: "#111111",
+      text: "#ffffff",
+      // no secondaryText — should fall back to main
+    };
+
+    render(
+      <ThemedToggleButtons
+        activeId={buttonId}
+        buttons={buttons}
+        activeColorFamilyOverride={colorFamilyWithoutSecondaryText}
+      />,
+    );
+
+    const iconBox = screen.getByTestId(`${buttonText} icon`);
+    const path = iconBox.querySelector("path");
+    // secondaryText is undefined, so fill should fall back to colorGroup.main
+    expect(path?.getAttribute("fill")).toBe("#333333");
   });
 
   test("active icon uses colorGroup.light fill when invertActive is true", () => {

package/src/components/ToggleButtons/ToggleButtons.tsx

@@ -32,6 +32,7 @@ export const ToggleButtons: FC<ToggleButtonsType> = ({
             $colorGroup={colorGroup}
             disabled={isActive}
             $firstButton={index === 0}
+            tabIndex={isActive ? -1 : 0}
             $fixedButtonWidth={fixedButtonWidth}
             $invertActive={invertActive}
             $lastButton={index === buttons.length - 1}
@@ -41,7 +42,9 @@ export const ToggleButtons: FC<ToggleButtonsType> = ({
             {/* We could use title instead of data-testid, but it would be redundant with buttonText for screen readers */}
             {Icon && (
               <IconBox $iconSize={iconSize} data-testid={`${buttonText} icon`} $iconGap={iconGap}>
-                <Icon fill={isActive ? (invertActive ? colorGroup.light : colorGroup.hover) : inactiveTextColor} />
+                <Icon
+                  fill={isActive ? (invertActive ? colorGroup.light : colorGroup.secondaryText || colorGroup.main) : inactiveTextColor}
+                />
               </IconBox>
             )}
             <Text

package/src/components/ToggleButtons/ToggleButtonsStyles.tsx

@@ -10,11 +10,11 @@ export const Button = styled.button<ButtonProps>`
   align-items: center;
   background-color: ${({ $active, $colorGroup, $invertActive, $themeOverride, theme }) => {
     if (!$active) return $themeOverride?.backgroundColor || theme.toggleButtons.backgroundColor;
-    return $invertActive ? $colorGroup.hover : $colorGroup.light;
+    return $invertActive ? $colorGroup.secondaryText || $colorGroup.main : $colorGroup.light;
   }};
   border: 1px solid
     ${({ $active, $colorGroup, $themeOverride, theme }) =>
-      $active ? $colorGroup.hover : $themeOverride?.borderColor || theme.toggleButtons.borderColor};
+      $active ? $colorGroup.secondaryText || $colorGroup.main : $themeOverride?.borderColor || theme.toggleButtons.borderColor};
   border-radius: ${({ $firstButton, $lastButton, $themeOverride, theme }) => {
     const radius = `${$themeOverride?.borderRadius || theme.toggleButtons.borderRadius}px`;
     const topLeft = $firstButton ? radius : 0;
@@ -53,7 +53,7 @@ export const IconBox = styled.div<IconBoxProps>`
 export const Text = styled.span<TextProps>`
   color: ${({ $active, $colorGroup, $invertActive, $themeOverride, theme }) => {
     if (!$active) return $themeOverride?.textColor || theme.toggleButtons.textColor;
-    return $invertActive ? $colorGroup.light : $colorGroup.hover;
+    return $invertActive ? $colorGroup.light : $colorGroup.secondaryText || $colorGroup.main;
   }};
   font-size: ${({ $themeOverride, theme }) => $themeOverride?.fontSize || theme.toggleButtons.fontSize}px;
   font-weight: 600;