@cerebruminc/cerebellum 17.3.6 → 17.3.7-beta.dangerous.eb38f7c

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # react-component-lib-boilerplate
 
+## [17.3.7](https://github.com/cerebruminc/cerebellum/compare/v17.3.6...v17.3.7) (2026-06-23)
+
+
+### Bug Fixes
+
+* **upload-dropzone:** increase contrast in UploadDropzone ([ca12fb3](https://github.com/cerebruminc/cerebellum/commit/ca12fb3e092138e49580e00d901dd3dc8a29bd58))
+
 ## [17.3.6](https://github.com/cerebruminc/cerebellum/compare/v17.3.5...v17.3.6) (2026-06-22)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cerebruminc/cerebellum",
-  "version": "17.3.6",
+  "version": "17.3.7-beta.dangerous.eb38f7c",
   "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/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 () => {

package/src/components/UploadDropzone/UploadDropzone.test.tsx

@@ -1,9 +1,11 @@
 import { fireEvent, render, screen } from "@testing-library/react";
 import React from "react";
 import { act } from "react-dom/test-utils";
+import { contrast } from "../../helpers/accessibility";
 import { noop } from "../../helpers/utils";
-import { FileTypeEnum } from "../../sharedTypes/enums";
 import { withTheme } from "../../hocs/withTheme";
+import { FileTypeEnum } from "../../sharedTypes/enums";
+import { cerebellumTheme } from "../../theme";
 import { UploadDropzone } from "./UploadDropzone";
 
 const ThemedUploadDropzone = withTheme(UploadDropzone);
@@ -70,3 +72,40 @@ describe("UploadDropzone", () => {
     expect(await screen.findByText("ping.json - Invalid file type")).toBeInTheDocument();
   });
 });
+
+describe("UploadDropzone color contrast (WCAG 2.1 AA)", () => {
+  const WCAG_AA_TEXT = 4.5;
+
+  // Source directly from the theme so these tests catch regressions in
+  // both the token values and the theme wiring (e.g. textColor, secondaryText).
+  const textColor = cerebellumTheme.uploadDropzone.textColor;
+
+  const colorFamilyPairs = [
+    {
+      family: "Purple",
+      accent: cerebellumTheme.colorFamilies.PURPLE.secondaryText!,
+      background: cerebellumTheme.colorFamilies.PURPLE.light,
+    },
+    {
+      family: "Blue",
+      accent: cerebellumTheme.colorFamilies.BLUE.secondaryText!,
+      background: cerebellumTheme.colorFamilies.BLUE.light,
+    },
+    {
+      family: "Red",
+      accent: cerebellumTheme.colorFamilies.RED.secondaryText!,
+      background: cerebellumTheme.colorFamilies.RED.light,
+    },
+  ];
+
+  test.each(colorFamilyPairs)("$family: body text (COOL_GREY_70) achieves >= 4.5:1 contrast against light background", ({ background }) => {
+    expect(contrast(textColor, background)).toBeGreaterThanOrEqual(WCAG_AA_TEXT);
+  });
+
+  test.each(colorFamilyPairs)(
+    "$family: accent color (secondaryText) achieves >= 4.5:1 contrast against light background",
+    ({ accent, background }) => {
+      expect(contrast(accent, background)).toBeGreaterThanOrEqual(WCAG_AA_TEXT);
+    }
+  );
+});

package/src/components/UploadDropzone/UploadDropzone.tsx

@@ -1,9 +1,9 @@
 import React, { FC, useCallback, useEffect, useRef, useState } from "react";
 import { useTheme } from "styled-components";
 
+import { colors } from "../../const/colors";
 import { CloseCircle, File, FileComplete, FileError as FileErrorIcon, UploadDocument } from "../Icons";
 import { TextLink } from "../TextLink";
-import { colors } from "../../const/colors";
 import {
   DropZoneContainer,
   DropzoneBox,
@@ -22,13 +22,13 @@ import {
 import { DropzoneColorFamilyEnum, FileError, UploadDropzoneType } from "./types";
 
 import { FileRejection, useDropzone } from "react-dropzone";
-import { Truncate } from "../Truncate";
 import { formatBytesToString } from "../../helpers/numbers";
 import useMeasure from "../../hooks/useMeasure";
 import { showLabel } from "../../sharedHelpers/showLabel";
 import { Asterisk, LabelBox, ValidationText } from "../../sharedStyle/Inputs";
 import { TextStyleEnum } from "../../sharedTypes/enums";
 import { ASTERISK_OFFSET_SPACE } from "../Input/helpers";
+import { Truncate } from "../Truncate";
 import { TextVariantEnum, Typography } from "../Typography";
 import { createAcceptObject, defaultDescripion } from "./helpers";
 
@@ -57,6 +57,7 @@ export const UploadDropzone: FC<UploadDropzoneType> = ({
   const theme = useTheme();
   const { colorFamilies } = theme;
   const colorGroup = colorFamilyOverride || colorFamilies[dropzoneColorFamily || DropzoneColorFamilyEnum.Purple];
+  const accentColor = colorGroup.secondaryText || colorGroup.main;
   const acceptObject = createAcceptObject(acceptedFileTypes);
 
   const [errorSummary, setErrorSummary] = useState<Array<FileError>>([]);
@@ -186,7 +187,7 @@ export const UploadDropzone: FC<UploadDropzoneType> = ({
           {displayFileInline && !multipleFileUploads && errorSummary?.[0] ? (
             <InlineFileItemBox>
               <InlineIconBox>
-                {errorSummary.length > 0 ? <FileErrorIcon fill={theme.input.failColor} /> : <FileComplete fill={colorGroup.hover} />}
+                {errorSummary.length > 0 ? <FileErrorIcon fill={theme.input.failColor} /> : <FileComplete fill={accentColor} />}
               </InlineIconBox>
               <InlineFileTextBox>
                 <Truncate>{errorSummary?.[0]?.name}</Truncate>
@@ -210,12 +211,11 @@ export const UploadDropzone: FC<UploadDropzoneType> = ({
               <UploadIconBox>
                 <UploadDocument
                   boxColor={disabled ? theme?.uploadDropzone?.disabledColorLight : colorGroup.medium}
-                  fill={disabled ? theme.uploadDropzone.disabledColorDark : colorGroup.hover}
+                  fill={disabled ? theme.uploadDropzone.disabledColorDark : accentColor}
                 />
               </UploadIconBox>
               <TextSection $disabled={disabled} $isDragging={isDragActive} $themeOverride={themeOverride}>
-                {description ||
-                  defaultDescripion(disabled ? theme.uploadDropzone.disabledColorText : colorGroup.hover, acceptObject, disabled)}
+                {description || defaultDescripion(disabled ? theme.uploadDropzone.disabledColorText : accentColor, acceptObject, disabled)}
               </TextSection>
             </>
           )}
@@ -237,7 +237,7 @@ export const UploadDropzone: FC<UploadDropzoneType> = ({
           {fileList.map((item, idx) => (
             <FileItemBox key={`fileitem_${item?.name}_${idx}`}>
               <ItemIconBox>
-                <File fill={colorGroup.hover} />
+                <File fill={accentColor} />
               </ItemIconBox>
               <Truncate>{item.name}</Truncate>
               <RightAligned>

package/src/theme.ts

@@ -806,6 +806,7 @@ export const cerebellumTheme: DefaultTheme = {
       main: colors.PURPLE_55,
       hover: colors.PURPLE_70,
       text: colors.WHITE,
+      secondaryText: colors.PURPLE_75,
     },
     RED: {
       light: colors.RED_5,
@@ -1332,7 +1333,7 @@ export const cerebellumTheme: DefaultTheme = {
     listDeleteColor: colors.BLUE_100,
     minHeight: 180,
     paddingString: "37px 26px 32px 26px",
-    textColor: "#767689",
+    textColor: colors.COOL_GREY_70,
   },
   userCard: {
     avatarBackgroundColor: colors.BLUE_55,