@cerebruminc/cerebellum 17.2.1 → 17.3.1

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # react-component-lib-boilerplate
 
+## [17.3.1](https://github.com/cerebruminc/cerebellum/compare/v17.3.0...v17.3.1) (2026-06-11)
+
+
+### Bug Fixes
+
+* **switches:** make switches focus state accessible ([48009b6](https://github.com/cerebruminc/cerebellum/commit/48009b674b71a15ee0a17d65c54f01ec6033fea1))
+* **toggle:** make Toggle focus state accessible ([3f6623d](https://github.com/cerebruminc/cerebellum/commit/3f6623d2d8c7489279e90312858d066bee759044))
+* **toggle:** revert knobShadow box-shadow ([281c3e4](https://github.com/cerebruminc/cerebellum/commit/281c3e41b7f32fdca55267dfccf5126322d59db6))
+
+## [17.3.0](https://github.com/cerebruminc/cerebellum/compare/v17.2.1...v17.3.0) (2026-06-09)
+
+
+### Features
+
+* **ci:** move cerebellum to use DRY actions ([f2693cc](https://github.com/cerebruminc/cerebellum/commit/f2693ccaa773ac106ec4465f9973f3c0b1759f52))
+* **rjsform:** add buttonShadow to RJSForm ([fceb013](https://github.com/cerebruminc/cerebellum/commit/fceb0136becc142921fe7fd23b8b524887bacfb4))
+
+
+### Bug Fixes
+
+* **form:** convert empty titles to div ([89eaeba](https://github.com/cerebruminc/cerebellum/commit/89eaebab7900b747f9cdd682ce24cf33d8367053))
+* **image-picker:** make FakeTextLink keyboard-focusable for file picker ([16b2ad3](https://github.com/cerebruminc/cerebellum/commit/16b2ad3dea861c93cd207bc080217e8914b1fe04))
+
 ## [17.2.1](https://github.com/cerebruminc/cerebellum/compare/v17.2.0...v17.2.1) (2026-06-02)
 
 

package/package.json

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

package/src/components/Checkbox/CheckboxStyles.tsx

@@ -13,7 +13,7 @@ export const CheckContainer = styled.span<CheckContainerProps>`
   z-index: 0;
   &:after {
     content: "";
-    border: 7px solid ${({ $focusedColor, theme }) => $focusedColor || theme.switch?.focusedBorderColor};
+    border: 1px solid ${({ $focusedColor, theme }) => $focusedColor || theme.switch?.focusedBorderColor};
     border-radius: calc(2px + 10.5%);
     top: -5px;
     bottom: -5px;

package/src/components/DescriptiveSwitchMenu/DescriptiveSwitchMenuStyles.tsx

@@ -23,7 +23,7 @@ export const Option = styled.div<OptionProps>`
   position: relative;
   ${RadioContainer}:after {
     content: "";
-    border: 7px solid ${({ $themeOverride, theme }) => $themeOverride?.focusedColor || theme.switch?.focusedBorderColor};
+    border: 1px solid ${({ $themeOverride, theme }) => $themeOverride?.focusedColor || theme.switch?.focusedBorderColor};
     border-radius: 50%;
     top: -5px;
     bottom: -5px;
@@ -36,7 +36,7 @@ export const Option = styled.div<OptionProps>`
   }
   ${CheckContainer}:after {
     content: "";
-    border: 7px solid ${({ $themeOverride, theme }) => $themeOverride?.focusedColor || theme.switch?.focusedBorderColor};
+    border: 1px solid ${({ $themeOverride, theme }) => $themeOverride?.focusedColor || theme.switch?.focusedBorderColor};
     border-radius: calc(2px + 10.5%);
     top: -5px;
     bottom: -5px;

package/src/components/Form/Form.tsx

@@ -203,7 +203,7 @@ export const Form = <T extends Record<string, any>>({
       {/* children are not expected in Form, but are needed to get FormSubmitWatcher to work */}
       {children}
       <FormTitleGroup>
-        <Title $themeOverride={themeOverride} data-sentry-unmask>
+        <Title $themeOverride={themeOverride} data-sentry-unmask as={title ? undefined : "div"}>
           {title}
         </Title>
         {clearFormButton && !clearOnBottom && (

package/src/components/ImagePicker/ImagePicker.test.tsx

@@ -1,4 +1,4 @@
-import { render, screen } from "@testing-library/react";
+import { render, screen, fireEvent } from "@testing-library/react";
 import React from "react";
 import { withTheme } from "../../hocs/withTheme";
 // import userEvent from "@testing-library/user-event";
@@ -104,4 +104,49 @@ describe("ImagePicker", () => {
     const id = screen.getByRole("img");
     expect(id).toBeInTheDocument();
   });
+
+  describe("FakeTextLink keyboard accessibility", () => {
+    const alternateActionText = "upload photo";
+    const onPickerClick = jest.fn();
+
+    test("FakeTextLink activates file input on Enter key", () => {
+      const { container } = render(
+        <ThemedImagePicker onPickerClick={onPickerClick} alternateActionText={alternateActionText} />,
+      );
+      const fakeLink = screen.getByRole("button", { name: alternateActionText });
+      const fileInput = container.querySelector('input[type="file"]') as HTMLInputElement;
+      const clickSpy = jest.spyOn(fileInput, "click");
+      fireEvent.keyDown(fakeLink, { key: "Enter" });
+      expect(clickSpy).toHaveBeenCalledTimes(1);
+    });
+
+    test("FakeTextLink activates file input on Space key", () => {
+      const { container } = render(
+        <ThemedImagePicker onPickerClick={onPickerClick} alternateActionText={alternateActionText} />,
+      );
+      const fakeLink = screen.getByRole("button", { name: alternateActionText });
+      const fileInput = container.querySelector('input[type="file"]') as HTMLInputElement;
+      const clickSpy = jest.spyOn(fileInput, "click");
+      fireEvent.keyDown(fakeLink, { key: " " });
+      expect(clickSpy).toHaveBeenCalledTimes(1);
+    });
+
+    test("FakeTextLink is not keyboard-focusable when disabled", () => {
+      render(<ThemedImagePicker onPickerClick={onPickerClick} alternateActionText={alternateActionText} disabled />);
+      const fakeLink = screen.getByRole("button", { name: alternateActionText });
+      expect(fakeLink).toHaveAttribute("tabindex", "-1");
+      expect(fakeLink).toHaveAttribute("aria-disabled", "true");
+    });
+
+    test("FakeTextLink does not activate file input when disabled", () => {
+      const { container } = render(
+        <ThemedImagePicker onPickerClick={onPickerClick} alternateActionText={alternateActionText} disabled />,
+      );
+      const fakeLink = screen.getByRole("button", { name: alternateActionText });
+      const fileInput = container.querySelector('input[type="file"]') as HTMLInputElement;
+      const clickSpy = jest.spyOn(fileInput, "click");
+      fireEvent.keyDown(fakeLink, { key: "Enter" });
+      expect(clickSpy).not.toHaveBeenCalled();
+    });
+  });
 });

package/src/components/ImagePicker/ImagePicker.tsx

@@ -192,12 +192,24 @@ export const ImagePicker: FC<ImagePickerType> = ({
     }
   }, [inputGroupMeasure.width, showValidationMessage, imageLabel, validationMessage]);
 
+  const textInputRef = useRef<HTMLInputElement>(null);
+  const handleFakeTextLinkKeyDown = (e: React.KeyboardEvent) => {
+    if (disabled || e.repeat) return;
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      textInputRef.current?.click();
+    }
+  };
+
   // Clear input
   const inputRef = useRef<HTMLInputElement>(null);
   const clearInput = () => {
     if (inputRef.current) {
       inputRef.current.value = "";
     }
+    if (textInputRef.current) {
+      textInputRef.current.value = "";
+    }
     setTempFile("");
     setPlaceholder("");
 
@@ -299,6 +311,7 @@ export const ImagePicker: FC<ImagePickerType> = ({
                 disabled={disabled}
                 name={name}
                 onChange={handleInputOnChange}
+                ref={inputRef}
                 required={required}
                 type="file"
                 $showValidationMessage={showValidationMessage}
@@ -350,16 +363,26 @@ export const ImagePicker: FC<ImagePickerType> = ({
                         disabled={disabled}
                         onChange={handleInputOnChange}
                         name={name}
+                        ref={textInputRef}
                         required={required}
                         $showValidationMessage={showValidationMessage}
                         $themeOverride={themeOverride}
+                        tabIndex={-1}
                         height={20}
                         width={20}
                         type="file"
                         capture={capture}
                       />
                       <BodySPrimary $lineHeight={24} as="span">
-                        <FakeTextLink $themeOverride={themeOverride}>{alternateActionText}</FakeTextLink>
+                        <FakeTextLink
+                          $themeOverride={themeOverride}
+                          tabIndex={disabled ? -1 : 0}
+                          role="button"
+                          aria-disabled={disabled}
+                          onKeyDown={handleFakeTextLinkKeyDown}
+                        >
+                          {alternateActionText}
+                        </FakeTextLink>
                       </BodySPrimary>
                     </TextInputContainer>
                   </AlternatePickerText>
@@ -400,16 +423,26 @@ export const ImagePicker: FC<ImagePickerType> = ({
               disabled={disabled}
               onChange={handleInputOnChange}
               name={name}
+              ref={textInputRef}
               required={required}
               $showValidationMessage={showValidationMessage}
               $themeOverride={themeOverride}
+              tabIndex={-1}
               height={20}
               width={20}
               type="file"
               capture={capture}
             />
             <BodySPrimary $lineHeight={24} as="span">
-              <FakeTextLink $themeOverride={themeOverride}>{alternateActionText}</FakeTextLink>
+              <FakeTextLink
+                $themeOverride={themeOverride}
+                tabIndex={disabled ? -1 : 0}
+                role="button"
+                aria-disabled={disabled}
+                onKeyDown={handleFakeTextLinkKeyDown}
+              >
+                {alternateActionText}
+              </FakeTextLink>
             </BodySPrimary>
           </TextInputContainer>
         </AlternatePickerText>

package/src/components/ImagePicker/ImagePickerStyles.tsx

@@ -205,6 +205,12 @@ export const FakeTextLink = styled.span<FakeTextLinkProps>`
   color: ${({ $themeOverride, theme }) => $themeOverride?.actionTextColor || theme.imagePicker.actionTextColor};
   padding-bottom: 4px;
   position: relative;
+
+  &:focus-visible {
+    outline: 1px solid ${({ $themeOverride, theme }) => $themeOverride?.focusColor || theme.focusColor};
+    outline-offset: 2px;
+    border-radius: 2px;
+  }
 `;
 
 export const AlternatePickerText = styled(BodyXSPrimary)<AlternatePickerTextProps>`

package/src/components/RJSForm/RJSForm.tsx

@@ -23,6 +23,7 @@ export const RJSForm: FC<RJSFormType> = (props) => {
     uiSchema,
     loading,
     backButton,
+    buttonShadow,
     nextButton,
     formData: initialValues,
   } = props;
@@ -75,6 +76,7 @@ export const RJSForm: FC<RJSFormType> = (props) => {
             text={submitButtonText}
             nextButton={nextButton}
             backButton={backButton}
+            shadow={buttonShadow ?? true}
             loading={loading}
           />
         )}

package/src/components/RJSForm/types.ts

@@ -28,6 +28,8 @@ export interface RJSFormType extends Omit<FormProps, "schema" | "validator"> {
   loading?: boolean;
   /** Adds an arrow pointing left and pushes the text right */
   backButton?: boolean;
+  /** Adds a shadow to the button. Defaults to true */
+  buttonShadow?: boolean;
   /** Adds an arrow pointing right and pushes the text left   */
   nextButton?: boolean;
   // TODO: install this

package/src/components/Radio/RadioStyles.tsx

@@ -10,7 +10,7 @@ export const RadioContainer = styled.span<RadioContainerProps>`
   z-index: 0;
   &:after {
     content: "";
-    border: 7px solid ${({ $focusedColor, theme }) => $focusedColor || theme.switch?.focusedBorderColor};
+    border: 1px solid ${({ $focusedColor, theme }) => $focusedColor || theme.switch?.focusedBorderColor};
     border-radius: 50%;
     top: -5px;
     bottom: -5px;

package/src/components/RadioItem/RadioItemStyles.tsx

@@ -8,7 +8,7 @@ export const RadioItemWrapper = styled(RadioContainer)<RadioItemProps>`
   pointer-events: ${({ $disabled }) => ($disabled ? "none" : "all")};
   -webkit-tap-highlight-color: transparent;
   ${RadioContainer}:after {
-    border: 7px solid ${({ $focusedColor, theme }) => $focusedColor || theme.switch?.focusedBorderColor};
+    border: 1px solid ${({ $focusedColor, theme }) => $focusedColor || theme.switch?.focusedBorderColor};
   }
   &:focus-within {
     outline: none;

package/src/components/Toggle/ToggleStyles.tsx

@@ -43,14 +43,14 @@ export const KnobColor = styled.div<KnobColorProps>`
   background-color: ${({ $disabled, $disabledKnobColor, $knobColor, theme }) =>
     $disabled ? $disabledKnobColor || theme.toggle?.disabledKnobColor : $knobColor || theme.toggle?.knobColor};
   border-radius: 50%;
-  box-shadow: ${({ $disabled, theme }) => ($disabled ? `0 2px 2px 0 ${colors.COOL_GREY_20}` : theme.toggle?.knobShadow || "0 2px 2px 0 rgba(0, 0, 0, 0.2)")};
+  box-shadow: ${({ $disabled, theme }) => ($disabled ? `0 2px 2px 0 ${colors.COOL_GREY_20}` : theme.toggle?.knobShadow || "0 2px 9px rgba(81,118,236,0.44)")};
   height: 100%;
   position: relative;
   z-index: 1;
 `;
 export const Focus = styled.div<FocusProps>`
   position: absolute;
-  background-color: ${({ $focusedColor, theme }) => $focusedColor || theme.focusColor};
+  border: 1px solid ${({ $focusedColor, theme }) => $focusedColor || theme.focusColor};
   border-radius: 50%;
   bottom: -7px;
   left: -7px;
@@ -58,7 +58,7 @@ export const Focus = styled.div<FocusProps>`
   right: -7px;
   top: -7px;
   ${ClickPadding}:focus-visible & {
-    opacity: 0.2;
+    opacity: 1;
   }
 `;
 

package/src/components/ToggleItem/ToggleItemStyles.tsx

@@ -14,7 +14,7 @@ export const Label = styled.label<LabelProps>`
   vertical-align: middle;
   &:focus-within {
     ${Focus} {
-      opacity: 0.2;
+      opacity: 1;
     }
   }
 `;

package/src/theme.ts

@@ -964,7 +964,7 @@ export const cerebellumTheme: DefaultTheme = {
   },
   iconButton: {
     backgroundColor: "transparent",
-    border: "none", // for highContrast support 
+    border: "none", // for highContrast support
     borderRadiusString: "50%",
   },
   iconTile: {
@@ -980,7 +980,7 @@ export const cerebellumTheme: DefaultTheme = {
   },
   imagePicker: {
     actionButtonGap: 6,
-		actionTextColor: colors.BLUE_100,
+    actionTextColor: colors.BLUE_100,
     asteriskColor: colors.BLUE_70,
     borderColor: colors.COOL_GREY_25,
     borderRadius: 5,
@@ -1210,7 +1210,7 @@ export const cerebellumTheme: DefaultTheme = {
     checkColor: "transparent",
     disabledColor: colors.COOL_GREY_25,
     disabledColorLight: colors.COOL_GREY_15,
-    focusedBorderColor: colors.BLUE_5,
+    focusedBorderColor: colors.BLUE_70,
     inactiveColor: colors.COOL_GREY_60,
   },
   switchItem: {
@@ -1271,7 +1271,7 @@ export const cerebellumTheme: DefaultTheme = {
     disabledTrackColor: colors.AQUA_20,
     disabledTrackBorderColor: colors.COOL_GREY_25,
     knobColor: colors.WHITE,
-    knobShadow: "0 2px 2px 0 rgba(0, 0, 0, 0.2)",
+    knobShadow: "0 2px 9px rgba(81,118,236,0.44)",
     inactiveTrackBorderColor: colors.COOL_GREY_25,
     inactiveTrackBorderColorHover: colors.COOL_GREY_40,
     inactiveTrackColor: colors.COOL_GREY_25,
@@ -1701,7 +1701,7 @@ export const highContrastTheme: DefaultTheme = {
   switch: {
     activeColor: colors.BLACK,
     checkColor: "transparent",
-    focusedBorderColor: colors.BLUE_5,
+    focusedBorderColor: colors.BLUE_70,
     inactiveColor: colors.BLACK,
     disabledColor: colors.COOL_GREY_25,
     disabledColorLight: colors.COOL_GREY_15,