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

app/components/modals/Create/Create.container.tsx

@@ -1,5 +1,9 @@
 "use client";
 
+/**
+ * Figma: "Modal / Create" (20874-172292)
+ */
+
 import { memo, useRef } from "react";
 import { CreateView } from "./Create.view";
 import type { CreateProps } from "./Create.types";

app/components/modals/Dialog/Dialog.container.tsx

@@ -1,5 +1,9 @@
 "use client";
 
+/**
+ * Figma: "Dialog" (see registry)
+ */
+
 import { memo, useId, useRef } from "react";
 import { useCreateModalA11y } from "../Create/useCreateModalA11y";
 import { DialogView } from "./Dialog.view";

app/components/modals/Login/Login.container.tsx

@@ -1,5 +1,9 @@
 "use client";
 
+/**
+ * Figma: "Modal / Login" (see registry)
+ */
+
 import { memo, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { LoginView } from "./Login.view";
 import type { LoginProps } from "./Login.types";

app/components/modals/ModalHeader/ModalHeader.container.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { memo, useEffect, useId, useRef, useState } from "react";
+import { useTranslation } from "../../../contexts/MessagesContext";
 import { ModalHeaderView } from "./ModalHeader.view";
 import type { ModalHeaderProps } from "./ModalHeader.types";
 
@@ -10,7 +11,14 @@ import type { ModalHeaderProps } from "./ModalHeader.types";
  * (right) icon buttons.
  */
 const ModalHeaderContainer = memo<ModalHeaderProps>((props) => {
-  const { menuItems = [] } = props;
+  const t = useTranslation("controlsChrome");
+  const {
+    closeButtonAriaLabel = t("closeDialog"),
+    moreOptionsAriaLabel = t("moreOptions"),
+    menuAriaLabel = t("moreOptionsMenu"),
+    menuItems = [],
+    ...rest
+  } = props;
   const hasMenu = menuItems.length > 0;
   const [menuOpen, setMenuOpen] = useState(false);
   const menuId = useId();
@@ -44,7 +52,11 @@ const ModalHeaderContainer = memo<ModalHeaderProps>((props) => {
   return (
     <div ref={menuWrapRef}>
       <ModalHeaderView
-        {...props}
+        {...rest}
+        menuItems={menuItems}
+        closeButtonAriaLabel={closeButtonAriaLabel}
+        moreOptionsAriaLabel={moreOptionsAriaLabel}
+        menuAriaLabel={menuAriaLabel}
         menuId={menuId}
         menuOpen={menuOpen}
         onToggleMenu={hasMenu ? () => setMenuOpen((open) => !open) : undefined}

app/components/modals/ModalHeader/ModalHeader.view.tsx

@@ -11,9 +11,9 @@ export function ModalHeaderView({
   onMoreOptions,
   showCloseButton = true,
   showMoreOptionsButton = true,
-  closeButtonAriaLabel = "Close dialog",
-  moreOptionsAriaLabel = "More options",
-  menuAriaLabel = "More options menu",
+  closeButtonAriaLabel,
+  moreOptionsAriaLabel,
+  menuAriaLabel,
   menuItems = [],
   menuId,
   menuOpen = false,

app/components/modals/Tooltip/Tooltip.container.tsx

@@ -1,5 +1,9 @@
 "use client";
 
+/**
+ * Figma: "Modal / Tooltip" (see registry)
+ */
+
 import { memo, useState } from "react";
 import { TooltipView } from "./Tooltip.view";
 import type { TooltipProps } from "./Tooltip.types";