fix(document): polish PDF error state — warning icon, 44px target, warmer copy
Address the remaining UI/UX polish: add a warning-triangle icon so the failure is signalled by shape, not colour alone (WCAG 1.4.1); give the recovery download link a full 44px tap/focus target (inline-flex min-h-[44px]); and soften the message copy in de/en/es. Addresses re-review: Leonie (colour-only, undersized link, copy warmth). Refs #708 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -178,12 +178,27 @@ function handleAnnotationClick(id: string) {
|
||||
role="alert"
|
||||
class="flex h-full w-full flex-col items-center justify-center gap-3 bg-pdf-bg px-4 text-center text-ink-3"
|
||||
>
|
||||
<!-- A shape, not colour alone, signals the warning (WCAG 1.4.1). -->
|
||||
<svg
|
||||
class="h-10 w-10 text-red-400"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"
|
||||
/>
|
||||
</svg>
|
||||
<p class="font-sans text-base text-red-400">{m.doc_render_failed()}</p>
|
||||
<a
|
||||
href={url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="inline-block py-2 font-sans text-sm text-primary underline hover:text-ink-2"
|
||||
class="inline-flex min-h-[44px] items-center px-3 py-2 font-sans text-sm text-primary underline hover:text-ink-2"
|
||||
>
|
||||
{m.doc_download_link()}
|
||||
</a>
|
||||
|
||||
Reference in New Issue
Block a user