From 1618e228ad62a3f7bc04d733072f6a6784a195b2 Mon Sep 17 00:00:00 2001
From: Saurabh Kumar Bajpai <157192462+saurabhhhcodes@users.noreply.github.com>
Date: Tue, 2 Jun 2026 04:37:24 +0530
Subject: [PATCH] fix: resolve WAVE accessibility issues

Signed-off-by: Saurabh Kumar Bajpai <157192462+saurabhhhcodes@users.noreply.github.com>
---
 src/app/globals.css               | 4 ++--
 src/app/page.tsx                  | 4 ++--
 src/components/PresetSelector.tsx | 6 +++++-
 src/components/TextControls.tsx   | 4 ++--
 src/components/VideoEditor.tsx    | 6 +++---
 5 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 4240bd32..1ed5c1b3 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -10,7 +10,7 @@
   --surface: #f1f5f9;
   --border: #cbd5e1;
   --text: #0f172a;
-  --muted: #64748b;
+  --muted: #475569;
   --accent: #3b82f6;
   --accent-hover: #1d4ed8;
   --accent-muted: rgba(59, 130, 246, 0.12);
@@ -152,4 +152,4 @@ detail > summary {
 }
 details > summary::-webkit-details-marker {
   display: none;
-}
\ No newline at end of file
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 381fbd80..2576a92f 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -13,9 +13,9 @@ export default function Home() {
         ⭐ Star on GitHub
       </a>
 
-      <main id="main-content" tabIndex={-1}>
+      <div>
         <VideoEditor />
-      </main>
+      </div>
 
       <Footer />
     </>
diff --git a/src/components/PresetSelector.tsx b/src/components/PresetSelector.tsx
index fd129ab2..b90ca275 100644
--- a/src/components/PresetSelector.tsx
+++ b/src/components/PresetSelector.tsx
@@ -171,10 +171,14 @@ export default function PresetSelector({ recipe, onChange }: Props) {
       </div>
 
       <div className="relative">
+        <label htmlFor="preset-search" className="sr-only">
+          Search output formats
+        </label>
         <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
           <Search size={14} className="text-[var(--muted)]" />
         </div>
         <input
+          id="preset-search"
           type="text"
           placeholder="Search formats..."
           value={search}
@@ -335,4 +339,4 @@ export default function PresetSelector({ recipe, onChange }: Props) {
       )}
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/TextControls.tsx b/src/components/TextControls.tsx
index 72f692d9..e3d33f88 100644
--- a/src/components/TextControls.tsx
+++ b/src/components/TextControls.tsx
@@ -208,7 +208,7 @@ export default function TextControls({
           </div>
 
           {/* Font Weight */}
-          <div>
+          <fieldset>
             <legend className="text-xs text-[var(--muted)] font-medium mb-1 block">
               Weight
             </legend>
@@ -233,7 +233,7 @@ export default function TextControls({
                 </button>
               ))}
             </div>
-          </div>
+          </fieldset>
         </div>
       )}
     </div>
diff --git a/src/components/VideoEditor.tsx b/src/components/VideoEditor.tsx
index 411ca8e7..d8ed4d7f 100644
--- a/src/components/VideoEditor.tsx
+++ b/src/components/VideoEditor.tsx
@@ -569,7 +569,7 @@ return () => {
                             type="button"
                             onClick={() => updateRecipe({ brightness: 0 })}
                             className="text-film-500 hover:underline"
-                            aria-label="reset brightness"
+                            aria-label="Reset brightness adjustment"
                           >
                             Reset
                           </button>
@@ -594,7 +594,7 @@ return () => {
                             type="button"
                             onClick={() => updateRecipe({ contrast: 1 })}
                             className="text-film-500 hover:underline"
-                            aria-label="reset-contrast"
+                            aria-label="Reset contrast adjustment"
                           >
                             Reset
                           </button>
@@ -619,7 +619,7 @@ return () => {
                             type="button"
                             onClick={() => updateRecipe({ saturation: 1 })}
                             className="text-film-500 hover:underline"
-                            aria-label="reset-saturation"
+                            aria-label="Reset saturation adjustment"
                           >
                             Reset
                           </button>