From 5297c704537287252d6162b0856f1c66cbe376ec Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Wed, 3 Jun 2026 22:59:02 +0200
Subject: [PATCH] fix(transcription): enlarge panel block action buttons to
 44px touch target (#722)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The panel footer's delete and review-toggle controls were icon-only ~16px
hit areas. After #722 removed the on-canvas delete button, the panel delete
button became the only touch-reachable delete path, so it must meet the WCAG
2.2 §2.5.8 minimum target size (44×44px). Give both icon-only footer actions
a >=44px inline-flex hit area with negative margins so the row layout and the
visible icon size are unchanged.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../transcription/TranscriptionBlock.svelte   |  4 +--
 .../TranscriptionBlock.svelte.spec.ts         | 25 +++++++++++++++++++
 2 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/frontend/src/lib/document/transcription/TranscriptionBlock.svelte b/frontend/src/lib/document/transcription/TranscriptionBlock.svelte
index d6e2dd87..8ae156af 100644
--- a/frontend/src/lib/document/transcription/TranscriptionBlock.svelte
+++ b/frontend/src/lib/document/transcription/TranscriptionBlock.svelte
@@ -231,7 +231,7 @@ async function handleDelete() {
 				<!-- Review toggle -->
 				<button
 					type="button"
-					class="cursor-pointer transition-colors {reviewed ? 'text-turquoise hover:text-turquoise/70' : 'text-ink-3 hover:text-turquoise'}"
+					class="-my-2 inline-flex min-h-[44px] min-w-[44px] cursor-pointer items-center justify-center transition-colors {reviewed ? 'text-turquoise hover:text-turquoise/70' : 'text-ink-3 hover:text-turquoise'}"
 					aria-label={reviewed ? m.transcription_block_unreview() : m.transcription_block_review()}
 					title={reviewed ? m.transcription_block_unreview() : m.transcription_block_review()}
 					onclick={onReviewToggle}
@@ -254,7 +254,7 @@ async function handleDelete() {
 				<!-- Delete button -->
 				<button
 					type="button"
-					class="hover:text-error cursor-pointer text-ink-3 transition-colors"
+					class="hover:text-error -my-2 -mr-2 inline-flex min-h-[44px] min-w-[44px] cursor-pointer items-center justify-center text-ink-3 transition-colors"
 					aria-label={m.btn_delete()}
 					onclick={handleDelete}
 				>
diff --git a/frontend/src/lib/document/transcription/TranscriptionBlock.svelte.spec.ts b/frontend/src/lib/document/transcription/TranscriptionBlock.svelte.spec.ts
index a635238d..4b7138e6 100644
--- a/frontend/src/lib/document/transcription/TranscriptionBlock.svelte.spec.ts
+++ b/frontend/src/lib/document/transcription/TranscriptionBlock.svelte.spec.ts
@@ -170,6 +170,31 @@ describe('TranscriptionBlock — reorder controls', () => {
 	});
 });
 
+// ─── Touch targets (WCAG 2.2 §2.5.8) ──────────────────────────────────────────
+
+// After #722 removed the on-canvas delete button, the panel footer's icon-only
+// actions are the only touch-reachable controls for those operations. They must
+// meet the 44×44px minimum target size in both dimensions.
+describe('TranscriptionBlock — footer action touch targets', () => {
+	it('delete button has a >=44px hit area in both dimensions', async () => {
+		renderBlock();
+		const btn = (await page.getByRole('button', { name: 'Löschen' }).element()) as HTMLElement;
+		const rect = btn.getBoundingClientRect();
+		expect(rect.width).toBeGreaterThanOrEqual(44);
+		expect(rect.height).toBeGreaterThanOrEqual(44);
+	});
+
+	it('review toggle button has a >=44px hit area in both dimensions', async () => {
+		renderBlock({ reviewed: false });
+		const btn = (await page
+			.getByRole('button', { name: 'Als geprüft markieren' })
+			.element()) as HTMLElement;
+		const rect = btn.getBoundingClientRect();
+		expect(rect.width).toBeGreaterThanOrEqual(44);
+		expect(rect.height).toBeGreaterThanOrEqual(44);
+	});
+});
+
 // ─── Delete confirmation ──────────────────────────────────────────────────────
 
 function renderBlockWithService(overrides: Record<string, unknown> = {}) {