a11y(dashboard): larger dismiss target + motion-reduce + sr-only PDF label

- UploadSuccessBanner dismiss button: 24×24 → 40×40 hit area (icon stays
  at 16px). Matches senior-first baseline Leonie flagged.
- DashboardNeedsMetadata chevron: adds motion-reduce:transition-none and
  motion-reduce:group-hover:translate-x-0 so users with prefers-reduced-
  motion do not see the hover translate.
- Row title prefixed with an sr-only "PDF: " span so assistive tech
  announces the document affordance alongside the title.

Addresses Leonie's review concerns #2, #3, and the sr-only nit.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-04-20 22:44:45 +02:00
parent 97e8e4fc74
commit 35303831f7
2 changed files with 3 additions and 3 deletions

View File

@@ -38,14 +38,14 @@ const showFooter = $derived(totalCount > 5);
/>
<div class="min-w-0 flex-1">
<div class="truncate font-serif text-base text-ink group-hover:underline">
{doc.title}
<span class="sr-only">PDF: </span>{doc.title}
</div>
<div class="font-sans text-xs text-ink-3">
{relativeTimeDe(new Date(doc.uploadedAt))}
</div>
</div>
<svg
class="h-4 w-4 shrink-0 text-ink-3 transition-transform group-hover:translate-x-0.5"
class="h-4 w-4 shrink-0 text-ink-3 transition-transform group-hover:translate-x-0.5 motion-reduce:transition-none motion-reduce:group-hover:translate-x-0"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"

View File

@@ -45,7 +45,7 @@ $effect(() => {
data-testid="upload-banner-close"
aria-label={m.upload_banner_close()}
onclick={onClose}
class="inline-flex h-6 w-6 items-center justify-center rounded-sm text-ink-3 hover:bg-ink/10 hover:text-ink"
class="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-sm text-ink-3 hover:bg-ink/10 hover:text-ink"
>
<svg
class="h-4 w-4"