jake/Lumotia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Jake
2026-05-07 11:23:55 +01:00
parent d3554951e0
commit 9b17425bc9
1 changed files with 29 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/lib/pages/FilesPage.svelte
View File

@@ -152,16 +152,19 @@
<!-- Title --> <!-- Title -->
<h2 class="font-display text-[26px] italic text-text px-7 pt-6 pb-4">File Transcription</h2> <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"> <div class="px-7 pb-3">
<Card tone="subtle">
<div <div
class="flex flex-col items-center justify-center py-10 px-6 rounded-xl border-2 border-dashed m-3 class="flex flex-col items-center justify-center py-10 px-6 rounded-xl border-2 border-dashed
{isDragOver {isDragOver
? 'border-accent bg-accent-subtle scale-[1.01]' ? 'border-accent bg-accent-subtle scale-[1.01]'
: 'border-border hover:border-text-tertiary'}" : 'border-border hover:border-text-tertiary'}"
style="transition-duration: var(--duration-ui)" style="transition-duration: var(--duration-ui)"
role="region" role="region"
aria-label="Audio file drop zone"
> >
{#if !fileTranscript && !transcribing} {#if !fileTranscript && !transcribing}
<EmptyState <EmptyState
@@ -180,7 +183,6 @@
MP3, WAV, M4A, MP4, FLAC, OGG MP3, WAV, M4A, MP4, FLAC, OGG
</p> </p>
</div> </div>
</Card>
</div> </div>
<!-- Browse buttons + progress --> <!-- Browse buttons + progress -->