Full cleanup pass

app/components/navigation/CreateFlowFooter/CreateFlowFooter.container.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { memo } from "react";
+import { useTranslation } from "../../../contexts/MessagesContext";
 import { CreateFlowFooterView } from "./CreateFlowFooter.view";
 import type { CreateFlowFooterProps } from "./CreateFlowFooter.types";
 
@@ -16,7 +17,10 @@ const CreateFlowFooterContainer = memo<CreateFlowFooterProps>(
     proportionBarVariant,
     onBackClick,
     className = "",
+    footerAriaLabel,
   }) => {
+    const t = useTranslation("controlsChrome");
+
     return (
       <CreateFlowFooterView
         secondButton={secondButton}
@@ -25,6 +29,7 @@ const CreateFlowFooterContainer = memo<CreateFlowFooterProps>(
         proportionBarVariant={proportionBarVariant}
         onBackClick={onBackClick}
         className={className}
+        footerAriaLabel={footerAriaLabel ?? t("createFlowFooterAriaLabel")}
       />
     );
   },

app/components/navigation/CreateFlowFooter/CreateFlowFooter.types.ts

@@ -36,4 +36,8 @@ export interface CreateFlowFooterProps {
    * Additional CSS classes
    */
   className?: string;
+  /**
+   * Accessible name for the footer landmark.
+   */
+  footerAriaLabel?: string;
 }

app/components/navigation/CreateFlowFooter/CreateFlowFooter.view.tsx

@@ -9,13 +9,14 @@ export function CreateFlowFooterView({
   proportionBarVariant: proportionBarVariantProp,
   onBackClick,
   className = "",
+  footerAriaLabel,
 }: CreateFlowFooterProps) {
   const proportionBarVariant = proportionBarVariantProp ?? "default";
   return (
     <footer
       className={`bg-black w-full ${className}`}
       role="contentinfo"
-      aria-label="Create Flow Footer"
+      aria-label={footerAriaLabel}
     >
       {/* Progress Bar - Top */}
       {progressBar && (