fix(a11y): name FilesPage drop zone region and denest Card

This commit is contained in:
2026-05-07 11:23:55 +01:00
parent d3554951e0
commit 9b17425bc9

View File

@@ -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 -->