Full cleanup pass

app/components/modals/Alert/Alert.container.tsx

@@ -6,6 +6,7 @@
  */
 
 import { memo } from "react";
+import { useTranslation } from "../../../contexts/MessagesContext";
 import { AlertView } from "./Alert.view";
 import type { AlertProps } from "./Alert.types";
 
@@ -74,6 +75,7 @@ const AlertContainer = memo<AlertProps>(
     onClose,
     className = "",
   }) => {
+    const t = useTranslation("controlsChrome");
     const status = statusProp;
     const type = typeProp;
     const size = sizeProp;
@@ -175,6 +177,7 @@ const AlertContainer = memo<AlertProps>(
         iconColor={statusStyles.iconColor}
         closeButtonIconColor={statusStyles.closeButtonIconColor}
         onClose={onClose}
+        closeAlertAriaLabel={t("closeAlert")}
       />
     );
   },

app/components/modals/Alert/Alert.types.ts

@@ -57,4 +57,5 @@ export interface AlertViewProps {
   iconColor: string;
   closeButtonIconColor: string;
   onClose?: () => void;
+  closeAlertAriaLabel: string;
 }

app/components/modals/Alert/Alert.view.tsx

@@ -17,6 +17,7 @@ export function AlertView({
   iconColor,
   closeButtonIconColor,
   onClose,
+  closeAlertAriaLabel,
 }: AlertViewProps) {
   const getIcon = () => {
     // Use the Icon_Alert.svg with dynamic fill color
@@ -61,7 +62,7 @@ export function AlertView({
           palette="default"
           size="large"
           onClick={onClose}
-          ariaLabel="Close alert"
+          ariaLabel={closeAlertAriaLabel}
           className="shrink-0 [&_svg_path]:transition-colors [&_svg_path]:duration-200 hover:[&_svg_path]:fill-[var(--color-content-default-primary)]"
         >
           <svg