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

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

@@ -152,35 +152,37 @@
<!-- 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
class="flex flex-col items-center justify-center py-10 px-6 rounded-xl border-2 border-dashed m-3 {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
icon={Upload} icon={Upload}
message="Drop an audio file or click to browse" message="Drop an audio file or click to browse"
/> />
{:else} {:else}
<div class="w-10 h-10 rounded-full bg-bg-elevated flex items-center justify-center mb-3"> <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" /> <Upload size={20} class="text-text-tertiary" aria-hidden="true" />
</div> </div>
<p class="text-[13px] text-text-secondary text-center"> <p class="text-[13px] text-text-secondary text-center">
Drop audio or video files here 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
</p> </p>
</div> {/if}
</Card> <p class="text-[12px] text-text-secondary text-center mt-1.5">
MP3, WAV, M4A, MP4, FLAC, OGG
</p>
</div>
</div> </div>
<!-- Browse buttons + progress --> <!-- Browse buttons + progress -->