From b1c2132aa6293be44150128680cd6a65ee8d0c1b Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Fri, 8 May 2026 12:48:06 +0200
Subject: [PATCH] fix(a11y): view-all links meet 44px touch target
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

WCAG 2.2 §2.5.8 (Target Size, Minimum). The Alle Personen → and Alle
Geschichten → text links were inline elements with no enforced minimum
height — small tap targets on mobile. inline-flex + min-h-[44px] keeps
the visual layout while guaranteeing the 44px hit area.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 frontend/src/lib/shared/dashboard/ReaderPersonChips.svelte | 2 +-
 .../lib/shared/dashboard/ReaderPersonChips.svelte.spec.ts  | 7 +++++++
 .../src/lib/shared/dashboard/ReaderRecentStories.svelte    | 2 +-
 .../shared/dashboard/ReaderRecentStories.svelte.spec.ts    | 7 +++++++
 4 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/frontend/src/lib/shared/dashboard/ReaderPersonChips.svelte b/frontend/src/lib/shared/dashboard/ReaderPersonChips.svelte
index 960162d2..467dcebf 100644
--- a/frontend/src/lib/shared/dashboard/ReaderPersonChips.svelte
+++ b/frontend/src/lib/shared/dashboard/ReaderPersonChips.svelte
@@ -54,7 +54,7 @@ const { persons }: Props = $props();
 	</div>
 	<a
 		href="/persons"
-		class="self-end rounded-sm font-sans text-sm text-brand-navy underline hover:text-brand-mint focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:ring-offset-2 focus-visible:outline-none"
+		class="inline-flex min-h-[44px] items-center self-end rounded-sm font-sans text-sm text-brand-navy underline hover:text-brand-mint focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:ring-offset-2 focus-visible:outline-none"
 		>{m.dashboard_reader_all_persons()}</a
 	>
 </div>
diff --git a/frontend/src/lib/shared/dashboard/ReaderPersonChips.svelte.spec.ts b/frontend/src/lib/shared/dashboard/ReaderPersonChips.svelte.spec.ts
index c0491597..e5aad9f6 100644
--- a/frontend/src/lib/shared/dashboard/ReaderPersonChips.svelte.spec.ts
+++ b/frontend/src/lib/shared/dashboard/ReaderPersonChips.svelte.spec.ts
@@ -66,6 +66,13 @@ describe('ReaderPersonChips', () => {
 		expect(cls).toMatch(/focus-visible:ring-brand-navy/);
 	});
 
+	it('meets the 44px touch target on the "Alle Personen" link', async () => {
+		render(ReaderPersonChips, { persons: [person1] });
+		const allLink = page.getByRole('link', { name: /Alle Personen/i });
+		const cls = ((await allLink.element()) as HTMLElement).className;
+		expect(cls).toMatch(/min-h-\[44px\]/);
+	});
+
 	it('renders empty state without chips when persons array is empty', async () => {
 		render(ReaderPersonChips, { persons: [] });
 		const chips = page.getByRole('link', { name: /Müller|Schmidt/ });
diff --git a/frontend/src/lib/shared/dashboard/ReaderRecentStories.svelte b/frontend/src/lib/shared/dashboard/ReaderRecentStories.svelte
index 0dc0579d..ab5b0a30 100644
--- a/frontend/src/lib/shared/dashboard/ReaderRecentStories.svelte
+++ b/frontend/src/lib/shared/dashboard/ReaderRecentStories.svelte
@@ -48,7 +48,7 @@ function excerpt(body: string | undefined): string {
 		</ul>
 		<a
 			href="/geschichten"
-			class="mt-4 block rounded-sm font-sans text-sm text-brand-navy underline hover:text-brand-mint focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:ring-offset-2 focus-visible:outline-none"
+			class="mt-4 inline-flex min-h-[44px] items-center rounded-sm font-sans text-sm text-brand-navy underline hover:text-brand-mint focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:ring-offset-2 focus-visible:outline-none"
 		>
 			{m.dashboard_reader_all_stories()}
 		</a>
diff --git a/frontend/src/lib/shared/dashboard/ReaderRecentStories.svelte.spec.ts b/frontend/src/lib/shared/dashboard/ReaderRecentStories.svelte.spec.ts
index 13102075..c749858d 100644
--- a/frontend/src/lib/shared/dashboard/ReaderRecentStories.svelte.spec.ts
+++ b/frontend/src/lib/shared/dashboard/ReaderRecentStories.svelte.spec.ts
@@ -65,4 +65,11 @@ describe('ReaderRecentStories', () => {
 		expect(cls).toMatch(/focus-visible:ring-2/);
 		expect(cls).toMatch(/focus-visible:ring-brand-navy/);
 	});
+
+	it('meets the 44px touch target on the "Alle Geschichten" link', async () => {
+		render(ReaderRecentStories, { stories: [story1] });
+		const allLink = page.getByRole('link', { name: /Alle Geschichten/i });
+		const cls = ((await allLink.element()) as HTMLElement).className;
+		expect(cls).toMatch(/min-h-\[44px\]/);
+	});
 });