CLAUDE.md

@@ -311,13 +311,15 @@ Save bar pattern — use **sticky full-bleed** for long forms (edit document), *
 <div class="mt-4 flex items-center justify-between rounded-sm border border-brand-sand bg-white px-6 py-4 shadow-sm">
 ```
 
-Back link pattern:
+Back button pattern — use the shared `<BackButton>` component from `$lib/components/BackButton.svelte`:
 ```svelte
-<a href="/persons" class="inline-flex items-center text-xs font-bold uppercase tracking-widest text-gray-500 hover:text-brand-navy transition-colors group mb-4">
-    <svg class="w-4 h-4 mr-2 transform group-hover:-translate-x-1 transition-transform" .../>
-    Zurück zur Übersicht
-</a>
+<script lang="ts">
+    import BackButton from '$lib/components/BackButton.svelte';
+</script>
+
+<BackButton />
 ```
+The component calls `history.back()` so the user returns to wherever they came from. Label is always "Zurück" (no contextual suffix — destination is unknown). Touch target ≥ 44px and focus ring are built in. Do not use a static `<a href>` for back navigation.
 
 Subtle action link (e.g. "new document/person"):
 ```svelte

frontend/e2e/auth.setup.ts

@@ -12,12 +12,12 @@ const authFile = path.join(__dirname, '.auth/user.json');
  *   E2E_PASSWORD  (default: admin123)
  */
 setup('authenticate', async ({ page }) => {
-	const username = process.env.E2E_USERNAME ?? 'admin';
+	const username = process.env.E2E_USERNAME ?? 'admin@familyarchive.local';
 	const password = process.env.E2E_PASSWORD ?? 'admin123';
 
 	await page.goto('/login');
-	await page.getByLabel('Benutzername').fill(username);
-	await page.getByLabel('Passwort').fill(password);
+	await page.getByLabel(/e-mail/i).fill(username);
+	await page.getByLabel(/passwort/i).fill(password);
 	await page.getByRole('button', { name: 'Anmelden' }).click();
 	await page.waitForURL('/');
 

frontend/e2e/back-button.spec.ts

@@ -0,0 +1,61 @@
+import AxeBuilder from '@axe-core/playwright';
+import { test, expect } from '@playwright/test';
+
+// [data-hydrated] is set by +layout.svelte once SvelteKit's client-side hydration is complete.
+// Waiting on it ensures the component is interactive before we interact with it.
+
+test.describe('BackButton — navigation', () => {
+	test('returns to previous page via history when clicked', async ({ page }) => {
+		// Navigate to persons list, then to a person detail
+		await page.goto('/persons');
+		await page.waitForSelector('[data-hydrated]');
+
+		const firstPersonLink = page.locator('a[href^="/persons/"]').first();
+		const personHref = await firstPersonLink.getAttribute('href');
+		await firstPersonLink.click();
+		await page.waitForURL(/\/persons\/.+/);
+
+		// Now navigate to the edit page from the detail page
+		const editLink = page.locator('a[href$="/edit"]').first();
+		await editLink.click();
+		await page.waitForURL(/\/persons\/.+\/edit/);
+
+		// Click the BackButton — should return to person detail, not /persons list
+		const backBtn = page.getByRole('button', { name: /zurück/i });
+		await expect(backBtn).toBeVisible();
+		await backBtn.click();
+
+		// Should return to the person detail URL (history.back()), not the static /persons
+		await expect(page).toHaveURL(new RegExp(personHref!.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')));
+	});
+});
+
+test.describe('BackButton — accessibility', () => {
+	test('touch target is at least 44px tall on /persons/new', async ({ page }) => {
+		await page.goto('/persons/new');
+		await page.waitForSelector('[data-hydrated]');
+
+		const backBtn = page.getByRole('button', { name: /zurück/i });
+		await expect(backBtn).toBeVisible();
+
+		const box = await backBtn.boundingBox();
+		expect(box).not.toBeNull();
+		expect(box!.height).toBeGreaterThanOrEqual(44);
+	});
+
+	test('passes axe-core wcag2a/wcag2aa scan on /persons/new', async ({ page }) => {
+		await page.goto('/persons/new');
+		await page.waitForSelector('[data-hydrated]');
+
+		const results = await new AxeBuilder({ page }).withTags(['wcag2a', 'wcag2aa']).analyze();
+
+		if (results.violations.length > 0) {
+			const summary = results.violations
+				.map((v) => `[${v.impact}] ${v.id}: ${v.description}`)
+				.join('\n');
+			console.log(`\nAxe violations on /persons/new:\n${summary}`);
+		}
+
+		expect(results.violations).toEqual([]);
+	});
+});

frontend/e2e/document-topbar-back.spec.ts

@@ -0,0 +1,38 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('DocumentTopBar — back navigation', () => {
+	test('BackButton returns to /documents after navigating from the documents list', async ({
+		page
+	}) => {
+		// Navigate to home page first (mirrors the real user flow)
+		await page.goto('/');
+		await page.waitForSelector('[data-hydrated]');
+
+		// Click the Dokumente nav link (SPA navigation — pushes to history)
+		await page.click('a[href="/documents"]');
+		await page.waitForURL('/documents');
+		await page.waitForSelector('[data-hydrated]');
+
+		// Click first real document link (skip /documents/new and edit links)
+		const docLink = page.locator('a[href^="/documents/"]:not([href="/documents/new"])').first();
+		const count = await docLink.count();
+
+		if (count === 0) {
+			test.skip(true, 'No documents in test database');
+		}
+
+		const docHref = await docLink.getAttribute('href');
+		await docLink.click();
+		await page.waitForURL(new RegExp(docHref!.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')));
+		await page.waitForSelector('[data-hydrated]');
+
+		// Find and click the BackButton in the DocumentTopBar
+		const backBtn = page.locator('[data-topbar]').getByRole('button', { name: /zurück/i });
+		await expect(backBtn).toBeVisible();
+		await backBtn.click();
+
+		// Should be back at the documents list, not at /
+		await page.waitForURL(/\/documents($|\?)/);
+		expect(page.url()).toMatch(/\/documents($|\?)/);
+	});
+});

frontend/src/lib/components/BackButton.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+import { m } from '$lib/paraglide/messages.js';
+let { class: cls = 'mb-4' }: { class?: string } = $props();
+</script>
+
+<button
+	type="button"
+	onclick={() => history.back()}
+	class="group {cls} inline-flex min-h-[44px] items-center text-xs font-bold tracking-widest text-ink-2 uppercase transition-colors outline-none hover:text-ink focus-visible:ring-2 focus-visible:ring-focus-ring"
+>
+	<svg
+		class="mr-2 h-4 w-4 transform transition-transform group-hover:-translate-x-1"
+		fill="none"
+		stroke="currentColor"
+		viewBox="0 0 24 24"
+		aria-hidden="true"
+	>
+		<path
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			stroke-width="2"
+			d="M10 19l-7-7m0 0l7-7m-7 7h18"
+		/>
+	</svg>
+	{m.btn_back()}
+</button>

frontend/src/lib/components/BackButton.svelte.spec.ts

@@ -0,0 +1,36 @@
+import { describe, it, expect, afterEach, vi } from 'vitest';
+import { cleanup, render } from 'vitest-browser-svelte';
+import { page } from 'vitest/browser';
+import BackButton from './BackButton.svelte';
+
+afterEach(cleanup);
+
+describe('BackButton', () => {
+	it('renders a button with "Zurück" text', async () => {
+		render(BackButton);
+		await expect.element(page.getByRole('button', { name: /zurück/i })).toBeInTheDocument();
+	});
+
+	it('calls history.back() when clicked', async () => {
+		const backSpy = vi.spyOn(history, 'back').mockImplementation(() => {});
+		render(BackButton);
+
+		await page.getByRole('button', { name: /zurück/i }).click();
+
+		expect(backSpy).toHaveBeenCalledOnce();
+		backSpy.mockRestore();
+	});
+
+	it('applies mb-4 by default', async () => {
+		render(BackButton);
+		const btn = document.querySelector('button');
+		expect(btn?.className).toContain('mb-4');
+	});
+
+	it('applies custom class prop instead of default', async () => {
+		render(BackButton, { props: { class: 'mr-3 md:hidden' } });
+		const btn = document.querySelector('button');
+		expect(btn?.className).toContain('mr-3');
+		expect(btn?.className).not.toContain('mb-4');
+	});
+});

frontend/src/lib/components/DocumentTopBar.svelte

@@ -6,6 +6,7 @@ import { clickOutside } from '$lib/actions/clickOutside';
 import PersonChipRow from './PersonChipRow.svelte';
 import OverflowPillButton from './OverflowPillButton.svelte';
 import DocumentMetadataDrawer from './DocumentMetadataDrawer.svelte';
+import BackButton from './BackButton.svelte';
 
 type Person = { id: string; firstName?: string | null; lastName: string; displayName: string };
 type Tag = { id: string; name: string };
@@ -132,19 +133,8 @@ let mobileMenuOpen = $state(false);
 		<!-- Accent bar -->
 		<div class="h-full w-[3px] shrink-0 bg-primary"></div>
 
-		<!-- Back link — 44×44px touch target -->
-		<a
-			href="/"
-			aria-label={m.topbar_back_label()}
-			class="group -ml-0.5 flex h-11 w-11 shrink-0 items-center justify-center rounded-full transition-colors hover:bg-muted focus-visible:ring-2 focus-visible:ring-primary"
-		>
-			<img
-				src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Arrow/Arrow-Left-MD.svg"
-				alt=""
-				aria-hidden="true"
-				class="h-5 w-5"
-			/>
-		</a>
+		<!-- Back button -->
+		<BackButton class="-ml-0.5 shrink-0" />
 
 		<!-- Divider -->
 		<div class="mx-2 h-6 w-px shrink-0 bg-line"></div>

frontend/src/routes/admin/users/[id]/+page.svelte

@@ -23,9 +23,11 @@ $effect(() => {
 <div class="flex flex-1 flex-col overflow-hidden">
 	<!-- Detail panel header -->
 	<div class="flex items-center border-b border-line px-5 py-3">
-		<a
-			href="/admin/users"
-			class="mr-3 inline-flex items-center gap-1 text-xs text-ink-3 hover:text-ink md:hidden"
+		<button
+			type="button"
+			onclick={() => history.back()}
+			aria-label={m.btn_back()}
+			class="mr-3 inline-flex items-center gap-1 text-xs text-ink-3 outline-none hover:text-ink focus-visible:ring-2 focus-visible:ring-focus-ring md:hidden"
 		>
 			<svg
 				class="h-4 w-4"
@@ -37,7 +39,7 @@ $effect(() => {
 			>
 				<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
 			</svg>
-		</a>
+		</button>
 		<h2 class="flex-1 font-sans text-sm font-bold text-ink">
 			{m.admin_user_edit_heading({ username: data.editUser.email })}
 		</h2>

frontend/src/routes/documents/[id]/edit/+page.svelte

@@ -2,6 +2,7 @@
 import { enhance } from '$app/forms';
 import { m } from '$lib/paraglide/messages.js';
 import { getConfirmService } from '$lib/services/confirm.svelte.js';
+import BackButton from '$lib/components/BackButton.svelte';
 import DocumentEditLayout from '$lib/components/document/DocumentEditLayout.svelte';
 
 let { data, form } = $props();
@@ -26,18 +27,7 @@ async function handleDelete() {
 
 <DocumentEditLayout doc={doc} formId="update-form" formAction="?/update" formError={form?.error}>
 	{#snippet topbar()}
-		<a
-			href="/documents/{doc.id}"
-			class="group inline-flex items-center font-sans text-xs font-bold tracking-widest text-ink-2 uppercase transition-colors hover:text-ink"
-		>
-			<img
-				src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Arrow/Arrow-Left-MD.svg"
-				alt=""
-				aria-hidden="true"
-				class="mr-2 h-4 w-4 transform transition-transform group-hover:-translate-x-1"
-			/>
-			{m.btn_back_to_document()}
-		</a>
+		<BackButton class="" />
 
 		<p class="max-w-sm truncate text-center font-serif text-sm font-medium text-ink">
 			{doc.title || doc.originalFilename}

frontend/src/routes/enrich/+page.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { m } from '$lib/paraglide/messages.js';
+import BackButton from '$lib/components/BackButton.svelte';
 
 let { data } = $props();
 
@@ -9,18 +10,7 @@ const count = $derived(documents.length);
 
 <div class="mx-auto max-w-4xl px-4 py-10">
 	<!-- Back Link -->
-	<a
-		href="/"
-		class="group mb-4 inline-flex items-center font-sans text-xs font-bold tracking-widest text-ink-2 uppercase transition-colors hover:text-ink"
-	>
-		<img
-			src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Arrow/Arrow-Left-MD.svg"
-			alt=""
-			aria-hidden="true"
-			class="mr-2 h-4 w-4 transform transition-transform group-hover:-translate-x-1"
-		/>
-		{m.enrich_list_back()}
-	</a>
+	<BackButton />
 
 	<!-- Page Header -->
 	<div class="mb-8 flex items-center justify-between border-b border-line pb-6">

frontend/src/routes/enrich/[id]/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 import { enhance } from '$app/forms';
 import { m } from '$lib/paraglide/messages.js';
+import BackButton from '$lib/components/BackButton.svelte';
 import DocumentEditLayout from '$lib/components/document/DocumentEditLayout.svelte';
 
 let { data, form } = $props();
@@ -14,18 +15,7 @@ const doc = $derived(data.document);
 
 <DocumentEditLayout doc={doc} formId="save-form" formAction="?/save" formError={form?.error}>
 	{#snippet topbar()}
-		<a
-			href="/enrich"
-			class="group inline-flex items-center font-sans text-xs font-bold tracking-widest text-ink-2 uppercase transition-colors hover:text-ink"
-		>
-			<img
-				src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Arrow/Arrow-Left-MD.svg"
-				alt=""
-				aria-hidden="true"
-				class="mr-2 h-4 w-4 transform transition-transform group-hover:-translate-x-1"
-			/>
-			{m.enrich_back_to_list()}
-		</a>
+		<BackButton class="" />
 
 		<p class="max-w-sm truncate text-center font-serif text-sm font-medium text-ink">
 			{doc.title || doc.originalFilename}

frontend/src/routes/persons/[id]/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 import { m } from '$lib/paraglide/messages.js';
 import { SvelteMap } from 'svelte/reactivity';
+import BackButton from '$lib/components/BackButton.svelte';
 import PersonCard from './PersonCard.svelte';
 import NameHistoryCard from './NameHistoryCard.svelte';
 import CoCorrespondentsList from './CoCorrespondentsList.svelte';
@@ -50,18 +51,7 @@ const coCorrespondents = $derived.by(() => {
 <div class="mx-auto max-w-6xl px-4 py-10">
 	<!-- Back Link -->
 	<div class="mb-6">
-		<a
-			href="/persons"
-			class="group inline-flex items-center text-xs font-bold tracking-widest text-ink-2 uppercase transition-colors hover:text-ink"
-		>
-			<img
-				src="/degruyter-icons/Simple/Medium-24px/SVG/Action/Arrow/Arrow-Left-MD.svg"
-				alt=""
-				aria-hidden="true"
-				class="mr-2 h-4 w-4 transform transition-transform group-hover:-translate-x-1"
-			/>
-			{m.btn_back_to_overview()}
-		</a>
+		<BackButton />
 	</div>
 
 	<!-- 2-column layout on large screens -->

frontend/src/routes/persons/[id]/edit/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 import { m } from '$lib/paraglide/messages.js';
 import { enhance } from '$app/forms';
+import BackButton from '$lib/components/BackButton.svelte';
 import PersonEditForm from './PersonEditForm.svelte';
 import PersonEditSaveBar from './PersonEditSaveBar.svelte';
 import NameHistoryEditCard from './NameHistoryEditCard.svelte';
@@ -13,25 +14,7 @@ const person = $derived(data.person);
 <div class="mx-auto max-w-2xl px-4 py-8">
 	<!-- Back link -->
 	<div class="mb-6">
-		<a
-			href="/persons/{person.id}"
-			class="group mb-4 inline-flex items-center text-xs font-bold tracking-widest text-ink-2 uppercase transition-colors hover:text-ink"
-		>
-			<svg
-				class="mr-2 h-4 w-4 transform transition-transform group-hover:-translate-x-1"
-				fill="none"
-				stroke="currentColor"
-				viewBox="0 0 24 24"
-			>
-				<path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M10 19l-7-7m0 0l7-7m-7 7h18"
-				/>
-			</svg>
-			{person.displayName}
-		</a>
+		<BackButton />
 		<h1 class="font-serif text-3xl text-ink">{m.person_edit_heading()}</h1>
 	</div>
 

frontend/src/routes/persons/new/+page.svelte

@@ -1,30 +1,13 @@
 <script lang="ts">
 import { m } from '$lib/paraglide/messages.js';
+import BackButton from '$lib/components/BackButton.svelte';
 let { form } = $props();
 </script>
 
 <div class="mx-auto max-w-2xl px-4 py-8">
 	<!-- Heading -->
 	<div class="mb-6">
-		<a
-			href="/persons"
-			class="group mb-4 inline-flex items-center text-xs font-bold tracking-widest text-ink-2 uppercase transition-colors hover:text-ink"
-		>
-			<svg
-				class="mr-2 h-4 w-4 transform transition-transform group-hover:-translate-x-1"
-				fill="none"
-				stroke="currentColor"
-				viewBox="0 0 24 24"
-			>
-				<path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M10 19l-7-7m0 0l7-7m-7 7h18"
-				/>
-			</svg>
-			{m.btn_back_to_overview()}
-		</a>
+		<BackButton />
 		<h1 class="font-serif text-3xl text-ink">{m.persons_new_heading()}</h1>
 	</div>