From e16b7402bd34d93092c374f5955d06e7f961055b Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Mon, 1 Jun 2026 20:44:56 +0200
Subject: [PATCH] fix(document): make the PDF error state accessible (alert +
 larger link)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The error block was a colour-only, visually-small dead end. Add
role="alert" so screen readers announce the failure, bump the message to
text-base and the recovery download link to text-sm with a py-2 tap
target — the only escape hatch, sized for the archive's older readers.

Addresses re-review: Leonie (a11y of the error state).

Refs #708

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 frontend/src/lib/document/viewer/PdfViewer.svelte   | 13 ++++++++++---
 .../lib/document/viewer/PdfViewer.svelte.test.ts    |  2 ++
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/frontend/src/lib/document/viewer/PdfViewer.svelte b/frontend/src/lib/document/viewer/PdfViewer.svelte
index 603dd8b5..c93a31e6 100644
--- a/frontend/src/lib/document/viewer/PdfViewer.svelte
+++ b/frontend/src/lib/document/viewer/PdfViewer.svelte
@@ -170,13 +170,20 @@ function handleAnnotationClick(id: string) {
 		<p class="font-sans text-sm">Keine Datei vorhanden</p>
 	</div>
 {:else if renderer.error}
-	<div class="flex h-full w-full flex-col items-center justify-center gap-3 bg-pdf-bg text-ink-3">
-		<p class="font-sans text-sm text-red-400">{m.doc_render_failed()}</p>
+	<!-- role="alert" announces the failure to screen readers; the message text
+	     (not colour alone) carries the meaning. The download link is the only
+	     recovery action, so it is sized as a comfortable tap/focus target for
+	     the archive's older readers. -->
+	<div
+		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"
+	>
+		<p class="font-sans text-base text-red-400">{m.doc_render_failed()}</p>
 		<a
 			href={url}
 			target="_blank"
 			rel="noopener noreferrer"
-			class="font-sans text-xs text-primary underline hover:text-ink-2"
+			class="inline-block py-2 font-sans text-sm text-primary underline hover:text-ink-2"
 		>
 			{m.doc_download_link()}
 		</a>
diff --git a/frontend/src/lib/document/viewer/PdfViewer.svelte.test.ts b/frontend/src/lib/document/viewer/PdfViewer.svelte.test.ts
index 2d05d25b..d964a1f9 100644
--- a/frontend/src/lib/document/viewer/PdfViewer.svelte.test.ts
+++ b/frontend/src/lib/document/viewer/PdfViewer.svelte.test.ts
@@ -44,6 +44,8 @@ describe('PdfViewer — render failure', () => {
 
 		await expect.element(page.getByText(m.doc_render_failed())).toBeVisible();
 		await expect.element(page.getByRole('link', { name: m.doc_download_link() })).toBeVisible();
+		// Announced to assistive tech, not a silent visual-only failure.
+		await expect.element(page.getByRole('alert')).toBeVisible();
 	});
 
 	it('does not show the failure message when the page renders successfully', async () => {