From 8cb82b225e51909c681a111087a9ffb2816b57b9 Mon Sep 17 00:00:00 2001
From: srinidhi-2006-bit <egalasrinidhireddy7@gmail.com>
Date: Thu, 4 Jun 2026 01:28:25 +0530
Subject: [PATCH] fix: add descriptive aria labels to interactive controls

---
 src/components/DownloadResult.tsx | 13 +++++++++----
 src/components/FileUpload.tsx     |  1 +
 src/components/FramingControl.tsx | 17 ++++++++++++-----
 3 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/src/components/DownloadResult.tsx b/src/components/DownloadResult.tsx
index 9cb04286..0d7876da 100644
--- a/src/components/DownloadResult.tsx
+++ b/src/components/DownloadResult.tsx
@@ -71,7 +71,11 @@ export default function DownloadResult({ result, onReset, soundOnCompletion, onT
   <button
     type="button"
     onClick={onToggleSound}
-    aria-label={soundOnCompletion ? "Mute completion sound" : "Unmute completion sound"}
+    aria-label={
+      soundOnCompletion
+        ? "Disable export completion sound"
+        : "Enable export completion sound"
+    }
     className="p-2 rounded-lg border border-[var(--border)] text-[var(--muted)] hover:bg-[var(--bg)] transition-colors"
     title={soundOnCompletion ? "Sound on" : "Sound off"}
   >
@@ -138,9 +142,10 @@ export default function DownloadResult({ result, onReset, soundOnCompletion, onT
         <a
           href={isValid ? result.blobUrl : undefined}
           download={isValid ? filename : undefined}
+          aria-label={`Download video as ${result.format.toUpperCase()}`}
           className={cn(
             "flex-1 min-w-[10rem] flex items-center justify-center gap-2 py-3 text-sm font-heading font-bold uppercase tracking-wide rounded-lg transition-all",
-            isValid 
+            isValid
               ? "bg-[var(--accent)] text-white hover:bg-[var(--accent-hover)] hover:scale-[1.02] active:scale-[0.99] cursor-pointer"
               : "bg-[var(--border)] text-[var(--muted)] cursor-not-allowed"
           )}
@@ -151,7 +156,7 @@ export default function DownloadResult({ result, onReset, soundOnCompletion, onT
           <Download size={15} aria-hidden="true" />
           Download {result.format.toUpperCase()}
         </a>
-        <NativeShareButton 
+        <NativeShareButton
           file={result.blob}
           fileName={filename}
           className="flex-1 min-w-[10rem] py-3 text-sm font-heading font-bold uppercase tracking-wide rounded-lg"
@@ -168,7 +173,7 @@ export default function DownloadResult({ result, onReset, soundOnCompletion, onT
         <button
           type="button"
           title="Reset and upload a new video"
-          aria-label="Upload a new video"
+          aria-label="Reset editor and upload a new video"
           onClick={handleReset}
           className="flex items-center gap-2 px-4 py-3 border border-[var(--border)] text-[var(--muted)] text-sm rounded-lg hover:border-[var(--accent)] hover:bg-[var(--accent-muted)] hover:text-[var(--text)] transition-colors"
         >
diff --git a/src/components/FileUpload.tsx b/src/components/FileUpload.tsx
index c5b3f608..e66ae142 100644
--- a/src/components/FileUpload.tsx
+++ b/src/components/FileUpload.tsx
@@ -155,6 +155,7 @@ export default function FileUpload({
 
         <button
           type="button"
+          aria-label="Choose a different video file"
           onClick={() => inputRef.current?.click()}
           className="text-xs font-semibold text-film-600 hover:text-film-700 uppercase tracking-wide"
         >
diff --git a/src/components/FramingControl.tsx b/src/components/FramingControl.tsx
index f0da50fa..74059fe2 100644
--- a/src/components/FramingControl.tsx
+++ b/src/components/FramingControl.tsx
@@ -19,7 +19,17 @@ export default function FramingControl({ recipe, onChange }: Props) {
           <button
             type="button"
             key={mode}
-            title={mode === "fit" ? "Fit: Adds black bars (letterbox) to fill empty space" : "Fill: Crops the video to fill the entire frame"}
+            aria-label={
+              mode === "fit"
+                ? "Fit video within frame with letterboxing"
+                : "Fill frame by cropping video"
+            }
+            aria-pressed={active}
+            title={
+              mode === "fit"
+                ? "Fit: Adds black bars (letterbox) to fill empty space"
+                : "Fill: Crops the video to fill the entire frame"
+            }
             onClick={() => onChange({ framing: mode })}
             className={cn(
               "flex-1 min-h-[44px] min-w-[44px] flex flex-col items-center justify-center gap-2 py-4 rounded-lg border transition-all duration-150 hover:scale-[1.02] active:scale-[0.98]",
@@ -29,9 +39,6 @@ export default function FramingControl({ recipe, onChange }: Props) {
             )}
           >
             <Icon size={18} aria-hidden="true" />
-            <span className="sr-only">
-              Set framing to {mode === "fit" ? "fit within frame" : "fill frame by cropping"}
-            </span>
             <div className="text-center">
               <p className="text-xs font-heading font-semibold uppercase tracking-wider">
                 {mode === "fit" ? "Fit" : "Fill"}
@@ -45,4 +52,4 @@ export default function FramingControl({ recipe, onChange }: Props) {
       })}
     </div>
   );
-}
\ No newline at end of file
+}