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:
@@ -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"
|
||||
|
||||
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user