From bd3feda1822f096b15ee5d62ec5666f0d843556c Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Tue, 28 Apr 2026 12:56:23 +0200
Subject: [PATCH] =?UTF-8?q?fix(stammbaum):=20WCAG=202.2=20SC=202.5.8=20?=
 =?UTF-8?q?=E2=80=94=20delete=20button=2032px=20=E2=86=92=2044px=20in=20Re?=
 =?UTF-8?q?lationshipChip?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

h-8 w-8 (32px) replaced with h-11 w-11 (44px) to meet the minimum
touch target for the 60+ transcriber audience. Test added to prevent
regression.

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

diff --git a/frontend/src/lib/components/RelationshipChip.svelte b/frontend/src/lib/components/RelationshipChip.svelte
index 7d895aba..852b0aaa 100644
--- a/frontend/src/lib/components/RelationshipChip.svelte
+++ b/frontend/src/lib/components/RelationshipChip.svelte
@@ -31,7 +31,7 @@ let { chipLabel, otherName, yearRange = '', canWrite, relId }: Props = $props();
 			<button
 				type="submit"
 				aria-label="{m.btn_delete()} — {otherName}"
-				class="inline-flex h-8 w-8 items-center justify-center text-ink-3 transition-colors hover:text-red-600"
+				class="inline-flex h-11 w-11 items-center justify-center text-ink-3 transition-colors hover:text-red-600"
 			>
 				<svg
 					class="h-3.5 w-3.5"
diff --git a/frontend/src/lib/components/RelationshipChip.svelte.spec.ts b/frontend/src/lib/components/RelationshipChip.svelte.spec.ts
index 2ee57ccc..9c85a6a6 100644
--- a/frontend/src/lib/components/RelationshipChip.svelte.spec.ts
+++ b/frontend/src/lib/components/RelationshipChip.svelte.spec.ts
@@ -45,4 +45,11 @@ describe('RelationshipChip', () => {
 		render(RelationshipChip, { ...baseProps, canWrite: false });
 		expect(document.querySelector('button')).toBeNull();
 	});
+
+	it('delete button has h-11 w-11 (44px) WCAG touch target class', async () => {
+		render(RelationshipChip, { ...baseProps, canWrite: true });
+		const btn = document.querySelector('button')!;
+		expect(btn.className).toContain('h-11');
+		expect(btn.className).toContain('w-11');
+	});
 });