fix(a11y): name FilesPage drop zone region and denest Card
This commit is contained in:
@@ -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 -->
|
||||
|
||||
Reference in New Issue
Block a user