From af5918b5e819d3640b505f261eb07d53fe9ffb96 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Fri, 17 Apr 2026 21:50:05 +0200
Subject: [PATCH] =?UTF-8?q?fix(frontend):=20increase=20dismiss=20button=20?=
 =?UTF-8?q?touch=20target=20to=2044=C3=9744px=20(WCAG=202.5.5)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../src/lib/components/OcrTrainingCard.svelte  |  2 +-
 .../components/OcrTrainingCard.svelte.spec.ts  | 18 ++++++++++++++++++
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/frontend/src/lib/components/OcrTrainingCard.svelte b/frontend/src/lib/components/OcrTrainingCard.svelte
index 28036fba..77a62a94 100644
--- a/frontend/src/lib/components/OcrTrainingCard.svelte
+++ b/frontend/src/lib/components/OcrTrainingCard.svelte
@@ -82,7 +82,7 @@ async function startTraining() {
 			{successMessage}
 			<button
 				type="button"
-				class="ml-1 inline-flex h-6 w-6 items-center justify-center rounded-sm underline hover:no-underline focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:outline-none"
+				class="-my-2 ml-1 inline-flex h-11 w-11 items-center justify-center rounded-sm underline hover:no-underline focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:outline-none"
 				onclick={() => (successMessage = null)}
 				aria-label={m.comp_dismiss()}>×</button
 			>
diff --git a/frontend/src/lib/components/OcrTrainingCard.svelte.spec.ts b/frontend/src/lib/components/OcrTrainingCard.svelte.spec.ts
index a81a5227..d1aec9b8 100644
--- a/frontend/src/lib/components/OcrTrainingCard.svelte.spec.ts
+++ b/frontend/src/lib/components/OcrTrainingCard.svelte.spec.ts
@@ -73,6 +73,24 @@ describe('OcrTrainingCard — enabled state', () => {
 	});
 });
 
+describe('OcrTrainingCard — success dismiss button', () => {
+	it('dismiss button has 44×44px touch target (h-11 w-11)', async () => {
+		vi.stubGlobal('fetch', vi.fn().mockResolvedValue({ ok: true }));
+
+		render(OcrTrainingCard, { trainingInfo: baseInfo });
+
+		const btn = page.getByRole('button', { name: /Training starten/i });
+		await btn.click();
+
+		const dismissBtn = page.getByRole('button', { name: /Schließen/i });
+		await expect.element(dismissBtn).toBeInTheDocument();
+
+		const el = await dismissBtn.element();
+		expect(el.classList.contains('h-11')).toBe(true);
+		expect(el.classList.contains('w-11')).toBe(true);
+	});
+});
+
 describe('OcrTrainingCard — in-flight state', () => {
 	it('shows "…" while POST is in-flight', async () => {
 		let resolveFetch!: (v: unknown) => void;