Full cleanup pass

app/components/controls/ToggleGroup/ToggleGroup.container.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { memo, useCallback, useId, forwardRef } from "react";
+import { useTranslation } from "../../../contexts/MessagesContext";
 import { ToggleGroupView } from "./ToggleGroup.view";
 import type { ToggleGroupProps } from "./ToggleGroup.types";
 
@@ -10,6 +11,7 @@ import type { ToggleGroupProps } from "./ToggleGroup.types";
  */
 const ToggleGroupContainer = memo(
   forwardRef<HTMLButtonElement, ToggleGroupProps>((props, _ref) => {
+    const t = useTranslation("controlsChrome");
     const {
       children,
       className = "",
@@ -131,6 +133,7 @@ const ToggleGroupContainer = memo(
         state={state}
         showText={showText}
         ariaLabel={ariaLabel}
+        defaultToggleOptionAriaLabel={t("toggleOption")}
         toggleClasses={toggleClasses}
         onClick={handleClick}
         onKeyDown={handleKeyDown}

app/components/controls/ToggleGroup/ToggleGroup.types.ts

@@ -35,6 +35,7 @@ export interface ToggleGroupViewProps {
   state: "default" | "hover" | "focus" | "selected";
   showText: boolean;
   ariaLabel?: string;
+  defaultToggleOptionAriaLabel: string;
   toggleClasses: string;
   onClick: (_e: React.MouseEvent<HTMLButtonElement>) => void;
   onKeyDown: (_e: React.KeyboardEvent<HTMLButtonElement>) => void;

app/components/controls/ToggleGroup/ToggleGroup.view.tsx

@@ -8,6 +8,7 @@ export function ToggleGroupView({
   state: _state,
   showText,
   ariaLabel,
+  defaultToggleOptionAriaLabel,
   toggleClasses,
   onClick,
   onKeyDown,
@@ -20,7 +21,7 @@ export function ToggleGroupView({
       id={groupId}
       type="button"
       role="button"
-      aria-label={ariaLabel || (showText ? undefined : "Toggle option")}
+      aria-label={ariaLabel || (showText ? undefined : defaultToggleOptionAriaLabel)}
       onClick={onClick}
       onKeyDown={onKeyDown}
       onFocus={onFocus}