From 9b17425bc9f4520effe79b13a60fdeca1aeba316 Mon Sep 17 00:00:00 2001
From: Jake <jake@corbel.consulting>
Date: Thu, 7 May 2026 11:23:55 +0100
Subject: [PATCH] fix(a11y): name FilesPage drop zone region and denest Card

---
 src/lib/pages/FilesPage.svelte | 56 ++++++++++++++++++----------------
 1 file changed, 29 insertions(+), 27 deletions(-)

diff --git a/src/lib/pages/FilesPage.svelte b/src/lib/pages/FilesPage.svelte
index 0358d80..6df4fe7 100644
--- a/src/lib/pages/FilesPage.svelte
+++ b/src/lib/pages/FilesPage.svelte
@@ -152,35 +152,37 @@
   <!-- Title -->
   <h2 class="font-display text-[26px] italic text-text px-7 pt-6 pb-4">File Transcription</h2>
 
-  <!-- Drop zone -->
+  <!-- Drop zone. The dashed border IS the affordance, so we drop the
+       outer Card (which doubled the surface treatment per brand spec)
+       and let the dashed div be the single surface. The region landmark
+       carries an explicit accessible name per WCAG ARIA13. -->
   <div class="px-7 pb-3">
-    <Card tone="subtle">
-      <div
-        class="flex flex-col items-center justify-center py-10 px-6 rounded-xl border-2 border-dashed m-3
-          {isDragOver
-            ? 'border-accent bg-accent-subtle scale-[1.01]'
-            : 'border-border hover:border-text-tertiary'}"
-        style="transition-duration: var(--duration-ui)"
-        role="region"
-      >
-        {#if !fileTranscript && !transcribing}
-          <EmptyState
-            icon={Upload}
-            message="Drop an audio file or click to browse"
-          />
-        {:else}
-          <div class="w-10 h-10 rounded-full bg-bg-elevated flex items-center justify-center mb-3">
-            <Upload size={20} class="text-text-tertiary" aria-hidden="true" />
-          </div>
-          <p class="text-[13px] text-text-secondary text-center">
-            Drop audio or video files here
-          </p>
-        {/if}
-        <p class="text-[12px] text-text-secondary text-center mt-1.5">
-          MP3, WAV, M4A, MP4, FLAC, OGG
+    <div
+      class="flex flex-col items-center justify-center py-10 px-6 rounded-xl border-2 border-dashed
+        {isDragOver
+          ? 'border-accent bg-accent-subtle scale-[1.01]'
+          : 'border-border hover:border-text-tertiary'}"
+      style="transition-duration: var(--duration-ui)"
+      role="region"
+      aria-label="Audio file drop zone"
+    >
+      {#if !fileTranscript && !transcribing}
+        <EmptyState
+          icon={Upload}
+          message="Drop an audio file or click to browse"
+        />
+      {:else}
+        <div class="w-10 h-10 rounded-full bg-bg-elevated flex items-center justify-center mb-3">
+          <Upload size={20} class="text-text-tertiary" aria-hidden="true" />
+        </div>
+        <p class="text-[13px] text-text-secondary text-center">
+          Drop audio or video files here
         </p>
-      </div>
-    </Card>
+      {/if}
+      <p class="text-[12px] text-text-secondary text-center mt-1.5">
+        MP3, WAV, M4A, MP4, FLAC, OGG
+      </p>
+    </div>
   </div>
 
   <!-- Browse buttons + progress -->