fix(a11y): bump progress bar text to text-xs minimum, add motion-safe to upload animation

- text-[9px]/text-[10px] in required-fields bar raised to text-xs (12px),
  meeting the project minimum for the 60+ audience (WCAG 1.4.4)
- Upload animation now uses motion-safe: prefix so it stops for users
  with prefers-reduced-motion set (WCAG 2.1 SC 2.3.3)
- Strengthened UploadZone tests: onCancel uses [role=status] button
  selector instead of first-button heuristic; added positive file
  selection test (valid PDF calls onFile), file-too-large test, and
  MIME rejection now also asserts the error message is visible

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-04-18 14:31:05 +02:00
committed by marcel
parent 3c3680b1e6
commit f7ed154e4d
3 changed files with 36 additions and 4 deletions

View File

@@ -120,7 +120,7 @@ async function handleReplaceFile(e: Event) {
<!-- Required-fields progress bar -->
<div class="flex items-center gap-3 border-b border-line bg-surface px-6 py-1.5">
<span class="text-[9px] font-bold tracking-widest text-ink-3 uppercase">Pflichtfelder</span>
<span class="text-xs font-bold tracking-widest text-ink-3 uppercase">Pflichtfelder</span>
<div
class="h-0.5 flex-1 rounded-full bg-line"
role="progressbar"
@@ -134,7 +134,7 @@ async function handleReplaceFile(e: Event) {
style="width:{requiredPct}%"
></div>
</div>
<span class="text-[10px] font-bold text-brand-navy">{requiredFilled} / 3</span>
<span class="text-xs font-bold text-brand-navy">{requiredFilled} / 3</span>
</div>
<!-- Main content -->