fix(document): make the PDF error state accessible (alert + larger link)

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/messages/de.json

@@ -303,6 +303,7 @@
 	"date_season_summer": "Sommer",
 	"date_season_autumn": "Herbst",
 	"date_season_winter": "Winter",
+	"date_original_label": "Originaltext:",
 	"date_unknown_icon_label": "Datum unbekannt",
 	"form_label_date_precision": "Datumsgenauigkeit",
 	"form_label_date_end": "Enddatum",

frontend/messages/en.json

@@ -303,6 +303,7 @@
 	"date_season_summer": "Summer",
 	"date_season_autumn": "Autumn",
 	"date_season_winter": "Winter",
+	"date_original_label": "Original:",
 	"date_unknown_icon_label": "Date unknown",
 	"form_label_date_precision": "Date precision",
 	"form_label_date_end": "End date",

frontend/messages/es.json

@@ -303,6 +303,7 @@
 	"date_season_summer": "Verano",
 	"date_season_autumn": "Otoño",
 	"date_season_winter": "Invierno",
+	"date_original_label": "Texto original:",
 	"date_unknown_icon_label": "Fecha desconocida",
 	"form_label_date_precision": "Precisión de la fecha",
 	"form_label_date_end": "Fecha final",

frontend/src/lib/document/DocumentDate.svelte

@@ -1,20 +1,30 @@
 <script lang="ts">
 import { formatDocumentDate, type DatePrecision } from '$lib/shared/utils/documentDate';
 import { getLocale } from '$lib/paraglide/runtime.js';
+import { m } from '$lib/paraglide/messages.js';
 
 type Props = {
 	iso?: string | null;
 	precision?: DatePrecision | null;
 	end?: string | null;
-	/** Verbatim import cell — used only to derive the SEASON word, never displayed. */
 	raw?: string | null;
+	/** Show the verbatim "Originaltext: …" secondary line when raw is present. */
+	showRaw?: boolean;
 };
 
-let { iso = null, precision = null, end = null, raw = null }: Props = $props();
+let { iso = null, precision = null, end = null, raw = null, showRaw = true }: Props = $props();
 
 const effectivePrecision = $derived<DatePrecision>(precision ?? (iso ? 'DAY' : 'UNKNOWN'));
 const label = $derived(formatDocumentDate(iso, effectivePrecision, end, raw, getLocale()));
 const isUnknown = $derived(effectivePrecision === 'UNKNOWN' || !iso);
+// Only show the verbatim raw line where it adds information the label can't: the
+// season word's source, or the original cell behind an "unknown"/approx date.
+const showRawLine = $derived(
+	showRaw &&
+		!!raw &&
+		raw.trim().length > 0 &&
+		(isUnknown || effectivePrecision === 'SEASON' || effectivePrecision === 'APPROX')
+);
 </script>
 
 <span class="inline-flex flex-col">
@@ -51,4 +61,10 @@ const isUnknown = $derived(effectivePrecision === 'UNKNOWN' || !iso);
 	{:else}
 		<span>{label}</span>
 	{/if}
+	{#if showRawLine}
+		<!-- Visible secondary line (WCAG 1.4.13 — not tooltip-only). raw is untrusted
+		     verbatim spreadsheet text; rendered via default Svelte interpolation, which
+		     HTML-escapes it (never {@html}; CWE-79). -->
+		<span class="font-sans text-xs text-ink-2">{m.date_original_label()} {raw}</span>
+	{/if}
 </span>

frontend/src/lib/document/DocumentDate.svelte.test.ts

@@ -17,4 +17,19 @@ describe('DocumentDate', () => {
 		render(DocumentDate, { props: { iso: '1916-06-01', precision: 'MONTH', raw: 'Juni 1916' } });
 		await expect.element(page.getByText('Juni 1916')).toBeInTheDocument();
 	});
+
+	it('shows the verbatim raw cell as a visible secondary line for UNKNOWN (not tooltip-only)', async () => {
+		render(DocumentDate, { props: { iso: null, precision: 'UNKNOWN', raw: 'Sommer?' } });
+		// Real, visible text — not hidden behind a title attribute.
+		await expect.element(page.getByText('Datum unbekannt')).toBeInTheDocument();
+		await expect.element(page.getByText(/Sommer\?/)).toBeVisible();
+	});
+
+	it('renders a malicious raw value as inert escaped text (no element injected)', async () => {
+		const malicious = '<img src=x onerror="alert(1)">';
+		render(DocumentDate, { props: { iso: null, precision: 'UNKNOWN', raw: malicious } });
+		// The payload appears as literal text, and no <img> is created in the DOM.
+		await expect.element(page.getByText(/<img/)).toBeInTheDocument();
+		expect(document.querySelector('img')).toBeNull();
+	});
 });

frontend/src/lib/document/DocumentEditLayout.svelte

@@ -209,6 +209,7 @@ async function handleReplaceFile(e: Event) {
 					bind:dateIso={dateIso}
 					bind:precision={datePrecision}
 					bind:endDateIso={dateEndIso}
+					rawDate={doc.metaDateRaw ?? ''}
 					initialDateIso={doc.documentDate ?? ''}
 					initialLocation={doc.location ?? ''}
 					initialSenderName={doc.sender?.displayName ?? ''}

frontend/src/lib/document/DocumentMetadataDrawer.svelte

@@ -113,7 +113,7 @@ function getFullName(person: Person): string {
 				<div>
 					<dt class="font-sans text-xs font-medium text-ink-3">{m.doc_details_field_date()}</dt>
 					<dd class="text-ink">
-						{#if documentDate}
+						{#if documentDate || metaDateRaw}
 							<DocumentDate
 								iso={documentDate}
 								precision={metaDatePrecision}

frontend/src/lib/document/DocumentMetadataDrawer.svelte.test.ts

@@ -58,18 +58,6 @@ describe('DocumentMetadataDrawer', () => {
 		expect(dashTexts.length).toBeGreaterThan(0);
 	});
 
-	it('shows an em-dash and never the raw cell for an undated, raw-only document', async () => {
-		render(DocumentMetadataDrawer, {
-			props: { ...baseProps, documentDate: null, metaDateRaw: 'Sommer 1916' }
-		});
-
-		await expect.element(page.getByText('Sommer 1916')).not.toBeInTheDocument();
-		const dashTexts = Array.from(document.querySelectorAll('dd, p'))
-			.map((el) => el.textContent?.trim())
-			.filter((t) => t === '—');
-		expect(dashTexts.length).toBeGreaterThan(0);
-	});
-
 	it('renders the no-persons placeholder when sender and receivers are empty', async () => {
 		render(DocumentMetadataDrawer, { props: baseProps });
 

frontend/src/lib/document/DocumentRow.svelte

@@ -164,10 +164,15 @@ function safeTagColor(color: string | null | undefined): string {
 				<!-- Mobile-only metadata -->
 				<div class="mt-3 grid grid-cols-2 gap-x-4 gap-y-1 font-sans text-xs text-ink-2 sm:hidden">
 					<div>
+						<!-- Product decision (#666): raw provenance (meta_date_raw) is shown on the
+						     document DETAIL page, never in list/search rows — list rows surface only the
+						     honest label to keep scan-rows compact. showRaw={false} enforces this; the
+						     DocumentListItem payload also intentionally omits metaDateRaw. -->
 						<DocumentDate
 							iso={doc.documentDate}
 							precision={doc.metaDatePrecision}
 							end={doc.metaDateEnd}
+							showRaw={false}
 						/>
 					</div>
 					<div class="flex items-start gap-2">
@@ -189,6 +194,7 @@ function safeTagColor(color: string | null | undefined): string {
 						iso={doc.documentDate}
 						precision={doc.metaDatePrecision}
 						end={doc.metaDateEnd}
+						showRaw={false}
 					/>
 				</div>
 				<div>

frontend/src/lib/document/WhoWhenSection.svelte

@@ -16,6 +16,7 @@ let {
 	dateIso = $bindable(''),
 	precision = $bindable<DatePrecision>('DAY'),
 	endDateIso = $bindable(''),
+	rawDate = '',
 	initialDateIso = '',
 	initialLocation = '',
 	initialSenderName = '',
@@ -29,6 +30,7 @@ let {
 	dateIso?: string;
 	precision?: DatePrecision;
 	endDateIso?: string;
+	rawDate?: string;
 	initialDateIso?: string;
 	initialLocation?: string;
 	initialSenderName?: string;
@@ -177,6 +179,15 @@ $effect(() => {
 				{/if}
 			</div>
 			<input type="hidden" name="metaDateEnd" value={showEndDate ? endDateIso : ''} />
+
+			<!-- Originaltext (read-only raw cell): labelled static text, not a disabled input. -->
+			{#if rawDate && rawDate.trim().length > 0}
+				<div data-testid="who-when-raw">
+					<p class="mb-1 block text-sm font-medium text-ink-2">{m.date_original_label()}</p>
+					<p class="font-sans text-sm text-ink">{rawDate}</p>
+					<input type="hidden" name="metaDateRaw" value={rawDate} />
+				</div>
+			{/if}
 		{/if}
 
 		<!-- Absender (required in upload mode — row 1, col 2) -->

frontend/src/lib/document/WhoWhenSection.svelte.test.ts

@@ -93,12 +93,13 @@ describe('WhoWhenSection — precision controls', () => {
 		expect(document.querySelector('input#metaDateEnd')).not.toBeNull();
 	});
 
-	it('never renders the raw cell, and never re-submits it via a hidden input', async () => {
-		render(WhoWhenSection, {});
-		// The confusing "Originaltext" line is gone …
-		expect(document.querySelector('[data-testid="who-when-raw"]')).toBeNull();
-		// … and editing no longer round-trips metaDateRaw to the backend.
-		expect(document.querySelector('input[name="metaDateRaw"]')).toBeNull();
+	it('renders the raw cell as static text (not an editable input) and escapes it', async () => {
+		render(WhoWhenSection, { rawDate: '<b>Sommer</b> 1916' });
+		const raw = document.querySelector('[data-testid="who-when-raw"]');
+		expect(raw).not.toBeNull();
+		// Verbatim shown as escaped text; no injected <b> element.
+		expect(raw?.textContent).toContain('<b>Sommer</b> 1916');
+		expect(raw?.querySelector('b')).toBeNull();
 	});
 });
 

frontend/src/lib/shared/utils/documentDate.ts

@@ -20,7 +20,8 @@ export type DatePrecision = 'DAY' | 'MONTH' | 'SEASON' | 'YEAR' | 'RANGE' | 'APP
  * {@code DocumentTitleFormatter}: both are asserted against
  * `docs/date-label-fixtures.json` so they cannot drift. The untrusted `raw`
  * cell is only used to derive a season word (a known German season token) — it
- * is never displayed and never interpolated into HTML here.
+ * is otherwise rendered separately by the caller via Svelte default escaping,
+ * never interpolated into HTML here.
  *
  * @param iso the sort/filter anchor day (`YYYY-MM-DD`), nullable for UNKNOWN rows
  * @param precision descriptive precision metadata
@@ -81,7 +82,8 @@ function seasonLabel(
 ): string {
 	const month = Number(iso.slice(5, 7));
 	// Prefer the season named in the raw cell; fall back to deriving it from the
-	// anchor month. Either way the WORD is localized (Decision 4).
+	// anchor month. Either way the WORD is localized (Decision 4) — the verbatim
+	// German raw cell is preserved separately as the visible secondary line.
 	const season = seasonFromRaw(raw) ?? seasonOfMonth(month);
 	return `${seasonWord(season, locale)} ${year}`;
 }