feat(frontend): UX review followups — primitives + a11y/UX fixes across 4 passes

New shared primitives: - Toaster + toast-store, ConfirmSheet, Modal, focusTrap action, pullToRefresh action, avatarPalette + initials helper, Skeleton, HeartBurst, haptics, export-status store with onClearAuth hook Critical UX/a11y: - Replaced window.confirm with branded ConfirmSheet - Focus management + Escape on every modal (PIN, Lightbox, Onboarding, ContextSheet, data-mode sheet, leave-confirm, HTML guide, host/admin ban + PIN-display modals) - Sheet backdrops are real buttons with aria-label - Silent ApiError catches now surface via global Toaster Major polish: - Dark-mode parity on HashtagChips + avatars (shared palette) - Conditional Export tab in BottomNav (badge dot when ZIP ready) - Back chevrons on /recover (history-aware) and /export - Upload composer discard confirmation when content is staged - Camera segmented Photo/Video shutter - PIN auto-submit on 4th digit, paste-flash-free (controlled input) - Welcome-back toast on /feed after PIN recovery Minor: - Skeleton states on feed; pull-to-refresh with live drag indicator - Haptics on like / capture / submit / PIN-copy / onboarding complete - Comment 500-char counter; quota "Fast voll" / "Limit erreicht" labels - Onboarding pip ≥24px tap targets; long-press hint step - overscroll-behavior lock on <html> while feed mounted - teardownExportStatus wired via onClearAuth (covers 401 + explicit logout) - ConfirmSheet per-instance titleId; Modal requires titleId or ariaLabel Tests (7 new Playwright specs): - 01-auth/pin-auto-submit, 01-auth/back-chevron - 03-feed/confirm-sheet-delete, 03-feed/toast-on-failure - 09-mobile/focus-trap, 09-mobile/sheet-escape, 09-mobile/upload-cancel-confirm FOLLOWUPS.md captures the deferred AT inert containment work with acceptance criteria + implementation sketches. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-24 22:50:28 +02:00
parent b241ba6415
commit 309c25bc06
36 changed files with 1751 additions and 433 deletions
--- a/frontend/src/lib/components/BottomNav.svelte
+++ b/frontend/src/lib/components/BottomNav.svelte
@@ -1,16 +1,29 @@
 <script lang="ts">
+	import { onMount } from 'svelte';
 	import { page } from '$app/stores';
 	import { uploadSheetOpen, uploadBadgeCount } from '$lib/ui-store';
+	import { exportStatus, initExportStatus } from '$lib/export-status-store';

 	function isActive(path: string): boolean {
 		return $page.url.pathname.startsWith(path);
 	}
+
+	onMount(() => {
+		// Hydrate export status once when the bottom nav first mounts (i.e. the user
+		// is authenticated). Subsequent SSE events update the snapshot live so the
+		// Export tab can fade in mid-session.
+		initExportStatus();
+	});
+
+	let showExport = $derived($exportStatus.released);
+	let zipReady = $derived($exportStatus.zip?.status === 'done');
 </script>

 <!-- Bottom navigation bar — fixed, full-width, safe-area aware -->
 <nav
 	class="fixed bottom-0 left-0 right-0 z-40 border-t border-gray-200 bg-white/90 backdrop-blur-md dark:border-gray-800 dark:bg-gray-900/90"
 	style="padding-bottom: env(safe-area-inset-bottom)"
+	data-testid="bottom-nav"
 >
 	<div class="mx-auto flex h-14 max-w-2xl items-end justify-around px-4 pb-1">
 		<!-- Feed tab -->
@@ -49,6 +62,25 @@
 			</button>
 		</div>

+		<!-- Export tab — appears only when the host has released the export. -->
+		{#if showExport}
+			<a
+				href="/export"
+				data-testid="bottom-nav-export"
+				class="relative flex flex-col items-center gap-0.5 px-4 py-1 text-xs font-medium transition-colors
+					{isActive('/export') ? 'text-blue-600 dark:text-blue-400' : 'text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300'}"
+				aria-label="Export"
+			>
+				<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
+					<path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3" />
+				</svg>
+				<span>Export</span>
+				{#if zipReady}
+					<span class="absolute right-2 top-0 h-2 w-2 rounded-full bg-blue-500" aria-hidden="true"></span>
+				{/if}
+			</a>
+		{/if}
+
 		<!-- Account tab -->
 		<a
 			href="/account"
--- a/frontend/src/lib/components/CameraCapture.svelte
+++ b/frontend/src/lib/components/CameraCapture.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { onMount, onDestroy } from 'svelte';
+	import { vibrate } from '$lib/haptics';

 	interface Props {
 		oncapture: (blob: Blob, type: 'photo' | 'video') => void;
@@ -12,6 +13,7 @@
 	let canvasEl: HTMLCanvasElement = $state()!;
 	let stream: MediaStream | null = $state(null);
 	let facingMode = $state<'environment' | 'user'>('environment');
+	let mode = $state<'photo' | 'video'>('photo');
 	let recording = $state(false);
 	let recordingTime = $state(0);
 	let error = $state<string | null>(null);
@@ -19,6 +21,17 @@
 	let recordedChunks: Blob[] = [];
 	let recordingInterval: ReturnType<typeof setInterval> | null = null;

+	function handleShutter() {
+		vibrate(15);
+		if (mode === 'photo') {
+			capturePhoto();
+		} else if (recording) {
+			stopRecording();
+		} else {
+			startRecording();
+		}
+	}
+
 	onMount(() => {
 		startCamera();
 	});
@@ -172,44 +185,74 @@

 	<!-- Controls -->
 	{#if !error}
-		<div class="flex items-center justify-center gap-8 bg-black/80 px-4 py-6">
+		<!-- Mode toggle — segmented control above the shutter. Hidden while recording. -->
+		{#if !recording}
+			<div class="flex justify-center bg-black/80 pt-3 pb-1">
+				<div
+					class="inline-flex rounded-full bg-white/10 p-0.5"
+					role="tablist"
+					aria-label="Aufnahmemodus"
+					data-testid="camera-mode"
+				>
+					<button
+						type="button"
+						role="tab"
+						aria-selected={mode === 'photo'}
+						onclick={() => (mode = 'photo')}
+						data-testid="camera-mode-photo"
+						class="rounded-full px-4 py-1 text-sm font-medium transition {mode === 'photo' ? 'bg-white text-gray-900' : 'text-white/70 hover:text-white active:text-white'}"
+					>
+						Foto
+					</button>
+					<button
+						type="button"
+						role="tab"
+						aria-selected={mode === 'video'}
+						onclick={() => (mode = 'video')}
+						data-testid="camera-mode-video"
+						class="rounded-full px-4 py-1 text-sm font-medium transition {mode === 'video' ? 'bg-white text-gray-900' : 'text-white/70 hover:text-white active:text-white'}"
+					>
+						Video
+					</button>
+				</div>
+			</div>
+		{/if}
+
+		<div class="flex items-center justify-center gap-8 bg-black/80 px-4 pt-4 pb-6" style="padding-bottom: calc(env(safe-area-inset-bottom) + 1.5rem)">
 			<!-- Close -->
 			<button
 				onclick={onclose}
-				class="flex h-12 w-12 items-center justify-center rounded-full bg-white/20 text-white"
-				aria-label="Schliessen"
+				class="flex h-12 w-12 items-center justify-center rounded-full bg-white/20 text-white transition active:bg-white/30"
+				aria-label="Schließen"
 			>
 				<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
 				</svg>
 			</button>

-			<!-- Capture photo / record video -->
-			{#if recording}
-				<button
-					onclick={stopRecording}
-					class="flex h-16 w-16 items-center justify-center rounded-full border-4 border-white bg-red-600"
-					aria-label="Aufnahme stoppen"
-				>
-					<div class="h-6 w-6 rounded-sm bg-white"></div>
-				</button>
-			{:else}
-				<button
-					onclick={capturePhoto}
-					class="flex h-16 w-16 items-center justify-center rounded-full border-4 border-white bg-white/20 transition active:bg-white/40"
-					aria-label="Foto aufnehmen"
-				>
+			<!-- Shutter — single button, behaviour depends on mode + recording state. -->
+			<button
+				onclick={handleShutter}
+				data-testid="camera-shutter"
+				class="flex h-16 w-16 items-center justify-center rounded-full border-4 border-white transition active:scale-95 {recording ? 'bg-red-600' : 'bg-white/20'}"
+				aria-label={mode === 'photo' ? 'Foto aufnehmen' : recording ? 'Aufnahme stoppen' : 'Video aufnehmen'}
+			>
+				{#if mode === 'photo'}
 					<div class="h-12 w-12 rounded-full bg-white"></div>
-				</button>
-			{/if}
+				{:else if recording}
+					<div class="h-6 w-6 rounded-sm bg-white"></div>
+				{:else}
+					<div class="h-10 w-10 rounded-full bg-red-500"></div>
+				{/if}
+			</button>

-			<!-- Toggle camera / start recording -->
+			<!-- Toggle camera (hidden while recording to discourage interruption). -->
 			{#if recording}
 				<div class="h-12 w-12"></div>
 			{:else}
 				<button
 					onclick={toggleCamera}
-					class="flex h-12 w-12 items-center justify-center rounded-full bg-white/20 text-white"
+					class="flex h-12 w-12 items-center justify-center rounded-full bg-white/20 text-white transition active:bg-white/30"
 					aria-label="Kamera wechseln"
 				>
 					<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -218,19 +261,6 @@
 				</button>
 			{/if}
 		</div>
-
-		<!-- Video record button -->
-		{#if !recording}
-			<div class="flex justify-center bg-black/80 pb-4">
-				<button
-					onclick={startRecording}
-					class="flex items-center gap-2 rounded-full bg-red-600/80 px-4 py-2 text-sm text-white transition hover:bg-red-600"
-				>
-					<div class="h-2.5 w-2.5 rounded-full bg-white"></div>
-					Video aufnehmen
-				</button>
-			</div>
-		{/if}
 	{/if}
 </div>

--- a/frontend/src/lib/components/ConfirmSheet.svelte
+++ b/frontend/src/lib/components/ConfirmSheet.svelte
@@ -0,0 +1,95 @@
+<script lang="ts" module>
+	// Per-instance id counter so two ConfirmSheets coexisting (e.g. one closing
+	// as another opens) don't share the same aria-labelledby target and confuse AT.
+	let nextId = 0;
+</script>
+
+<script lang="ts">
+	import { focusTrap } from '$lib/actions/focus-trap';
+
+	interface Props {
+		open: boolean;
+		title: string;
+		message?: string;
+		confirmLabel?: string;
+		cancelLabel?: string;
+		tone?: 'default' | 'danger';
+		onConfirm: () => void | Promise<void>;
+		onCancel: () => void;
+	}
+
+	let {
+		open,
+		title,
+		message,
+		confirmLabel = 'Bestätigen',
+		cancelLabel = 'Abbrechen',
+		tone = 'default',
+		onConfirm,
+		onCancel
+	}: Props = $props();
+
+	const titleId = `confirm-sheet-title-${++nextId}`;
+	let busy = $state(false);
+
+	async function handleConfirm() {
+		if (busy) return;
+		busy = true;
+		try {
+			await onConfirm();
+		} finally {
+			busy = false;
+		}
+	}
+</script>
+
+{#if open}
+	<!-- Backdrop is a real <button> so keyboard / switch-control users get parity with the mouse path. -->
+	<button
+		type="button"
+		class="fixed inset-0 z-50 bg-black/40"
+		aria-label="Schließen"
+		onclick={onCancel}
+		tabindex="-1"
+	></button>
+	<div
+		class="fixed inset-x-0 bottom-0 z-50 rounded-t-2xl bg-white px-5 pb-10 pt-6 dark:bg-gray-900"
+		style="padding-bottom: calc(env(safe-area-inset-bottom) + 1.5rem)"
+		role="dialog"
+		aria-modal="true"
+		aria-labelledby={titleId}
+		data-testid="confirm-sheet"
+		use:focusTrap={{ onclose: onCancel }}
+	>
+		<div class="mb-4 flex justify-center">
+			<div class="h-1 w-10 rounded-full bg-gray-300 dark:bg-gray-600"></div>
+		</div>
+		<h3 id={titleId} class="mb-1 text-center text-lg font-bold text-gray-900 dark:text-gray-100">
+			{title}
+		</h3>
+		{#if message}
+			<p class="mb-6 text-center text-sm text-gray-500 dark:text-gray-400">{message}</p>
+		{:else}
+			<div class="mb-4"></div>
+		{/if}
+		<button
+			type="button"
+			onclick={handleConfirm}
+			disabled={busy}
+			data-testid="confirm-sheet-confirm"
+			class="mb-3 w-full rounded-xl py-3 text-sm font-semibold text-white transition disabled:opacity-60 {tone === 'danger'
+				? 'bg-red-600 hover:bg-red-700 active:bg-red-700 dark:bg-red-500 dark:hover:bg-red-400 dark:active:bg-red-400'
+				: 'bg-blue-600 hover:bg-blue-700 active:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400 dark:active:bg-blue-400'}"
+		>
+			{confirmLabel}
+		</button>
+		<button
+			type="button"
+			onclick={onCancel}
+			data-testid="confirm-sheet-cancel"
+			class="w-full rounded-xl border border-gray-200 py-3 text-sm font-medium text-gray-700 transition hover:bg-gray-50 active:bg-gray-100 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800 dark:active:bg-gray-800"
+		>
+			{cancelLabel}
+		</button>
+	</div>
+{/if}
--- a/frontend/src/lib/components/ContextSheet.svelte
+++ b/frontend/src/lib/components/ContextSheet.svelte
@@ -24,6 +24,48 @@

 	let { open, actions, onClose, title }: Props = $props();

+	let sheet = $state<HTMLDivElement | null>(null);
+	let returnFocus: HTMLElement | null = null;
+
+	function onKeyDown(e: KeyboardEvent) {
+		if (e.key === 'Escape') {
+			e.preventDefault();
+			onClose();
+			return;
+		}
+		if (e.key !== 'Tab' || !sheet) return;
+		const list = Array.from(sheet.querySelectorAll<HTMLElement>('button:not([disabled])'));
+		if (list.length === 0) return;
+		const first = list[0];
+		const last = list[list.length - 1];
+		const active = document.activeElement as HTMLElement | null;
+		if (e.shiftKey && (active === first || !sheet.contains(active))) {
+			e.preventDefault();
+			last.focus();
+		} else if (!e.shiftKey && active === last) {
+			e.preventDefault();
+			first.focus();
+		}
+	}
+
+	// Focus the first action and attach a global keydown listener only while open.
+	// The sheet stays mounted (translate-y animation), so this is wired via $effect
+	// rather than use:focusTrap (which would activate on first mount).
+	$effect(() => {
+		if (open) {
+			returnFocus = (document.activeElement as HTMLElement | null) ?? null;
+			requestAnimationFrame(() => {
+				const first = sheet?.querySelector<HTMLButtonElement>('button:not([disabled])');
+				first?.focus({ preventScroll: true });
+			});
+			window.addEventListener('keydown', onKeyDown);
+			return () => window.removeEventListener('keydown', onKeyDown);
+		} else if (returnFocus) {
+			try { returnFocus.focus({ preventScroll: true }); } catch { /* element gone */ }
+			returnFocus = null;
+		}
+	});
+
 	async function handle(action: ContextAction) {
 		if (action.disabled) return;
 		try {
@@ -34,24 +76,28 @@
 	}
 </script>

-<!-- Backdrop -->
-<div
+<!-- Backdrop — real <button> so keyboard / switch-control users get parity. -->
+<button
+	type="button"
 	class="fixed inset-0 z-40 bg-black/50 transition-opacity duration-200"
 	class:opacity-0={!open}
 	class:pointer-events-none={!open}
 	class:opacity-100={open}
 	onclick={onClose}
-	aria-hidden="true"
-></div>
+	tabindex="-1"
+	aria-label="Schließen"
+></button>

 <!-- Sheet -->
 <div
+	bind:this={sheet}
 	class="fixed inset-x-0 bottom-0 z-50 rounded-t-2xl bg-white transition-transform duration-200 dark:bg-gray-900"
 	class:translate-y-full={!open}
 	class:translate-y-0={open}
 	style="padding-bottom: env(safe-area-inset-bottom)"
 	role="dialog"
 	aria-modal="true"
+	tabindex="-1"
 >
 	<div class="flex justify-center pt-3 pb-1">
 		<div class="h-1 w-10 rounded-full bg-gray-300 dark:bg-gray-600"></div>
--- a/frontend/src/lib/components/FeedListCard.svelte
+++ b/frontend/src/lib/components/FeedListCard.svelte
@@ -1,8 +1,15 @@
 <script lang="ts">
+	import { onDestroy } from 'svelte';
 	import type { FeedUpload } from '$lib/types';
 	import { dataMode, pickMediaUrl } from '$lib/data-mode-store';
 	import { longpress } from '$lib/actions/longpress';
 	import { doubletap } from '$lib/actions/doubletap';
+	import { avatarPalette, initials } from '$lib/avatar';
+	import { vibrate } from '$lib/haptics';
+	import HeartBurst from './HeartBurst.svelte';
+
+	// Single-tap debounce so a double-tap doesn't briefly open the lightbox.
+	const SINGLE_TAP_DELAY_MS = 260;

 	interface Props {
 		upload: FeedUpload;
@@ -39,28 +46,42 @@
 		return `vor ${days} Tag${days === 1 ? '' : 'en'}`;
 	}

-	function initial(name: string): string {
-		return name[0]?.toUpperCase() ?? '?';
-	}
-
-	// Deterministic color from name
-	const COLORS = [
-		'bg-blue-100 text-blue-700',
-		'bg-purple-100 text-purple-700',
-		'bg-green-100 text-green-700',
-		'bg-amber-100 text-amber-700',
-		'bg-rose-100 text-rose-700',
-		'bg-teal-100 text-teal-700'
-	];
-	function avatarColor(name: string): string {
-		let hash = 0;
-		for (const ch of name) hash = (hash * 31 + ch.charCodeAt(0)) & 0xff;
-		return COLORS[hash % COLORS.length];
-	}
-
 	function openContext() {
 		oncontextmenu?.(upload);
 	}
+
+	// Inline heart-burst on double-tap (consistent with the lightbox).
+	let heartBurst = $state(false);
+	let singleTapTimer: ReturnType<typeof setTimeout> | null = null;
+
+	function handleMediaClick() {
+		// Delay single-tap so a quick second tap (double-tap-to-like) wins.
+		if (singleTapTimer) clearTimeout(singleTapTimer);
+		singleTapTimer = setTimeout(() => {
+			singleTapTimer = null;
+			onselect(upload);
+		}, SINGLE_TAP_DELAY_MS);
+	}
+
+	function handleDoubleTap() {
+		if (singleTapTimer) {
+			clearTimeout(singleTapTimer);
+			singleTapTimer = null;
+		}
+		heartBurst = true;
+		vibrate(10);
+		onlike(upload.id);
+		setTimeout(() => (heartBurst = false), 700);
+	}
+
+	// A feed-delta SSE event can remove this card mid-pending-tap. Clear the timer
+	// on unmount so we don't call onselect with a stale upload reference.
+	onDestroy(() => {
+		if (singleTapTimer) {
+			clearTimeout(singleTapTimer);
+			singleTapTimer = null;
+		}
+	});
 </script>

 <article
@@ -73,9 +94,9 @@
 		<div class="flex min-w-0 items-center gap-3">
 			<div
 				class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full text-sm font-bold
-					{avatarColor(upload.uploader_name)}"
+					{avatarPalette(upload.uploader_name)}"
 			>
-				{initial(upload.uploader_name)}
+				{initials(upload.uploader_name)}
 			</div>
 			<div class="min-w-0">
 				<p class="truncate text-sm font-semibold text-gray-900 dark:text-gray-100">{upload.uploader_name}</p>
@@ -88,7 +109,7 @@
 			<button
 				type="button"
 				onclick={(e) => { e.stopPropagation(); openContext(); }}
-				class="rounded-full p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-500 dark:hover:bg-gray-800 dark:hover:text-gray-200"
+				class="rounded-full p-1 text-gray-400 hover:bg-gray-100 active:bg-gray-200 hover:text-gray-700 dark:text-gray-500 dark:hover:bg-gray-800 dark:active:bg-gray-800 dark:hover:text-gray-200"
 				aria-label="Mehr Aktionen"
 			>
 				<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24"><circle cx="5" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="19" cy="12" r="2"/></svg>
@@ -98,12 +119,13 @@

 	<!-- Media -->
 	<button
-		class="block w-full"
-		onclick={() => onselect(upload)}
+		class="relative block w-full"
+		onclick={handleMediaClick}
 		use:doubletap
-		ondoubletap={() => onlike(upload.id)}
+		ondoubletap={handleDoubleTap}
 		aria-label="Bild vergrößern"
 	>
+		<HeartBurst active={heartBurst} />
 		{#if isVideo(upload.mime_type)}
 			<div class="relative aspect-video w-full bg-gray-900">
 				{#if upload.thumbnail_url || upload.preview_url}
@@ -141,9 +163,9 @@
 	<!-- Actions row -->
 	<div class="flex items-center gap-4 px-4 py-2">
 		<button
-			onclick={() => onlike(upload.id)}
+			onclick={() => { vibrate(10); onlike(upload.id); }}
 			class="flex items-center gap-1.5 text-sm font-medium transition-colors
-				{upload.liked_by_me ? 'text-red-500 dark:text-red-400' : 'text-gray-500 hover:text-red-400 dark:text-gray-400 dark:hover:text-red-400'}"
+				{upload.liked_by_me ? 'text-red-500 dark:text-red-400' : 'text-gray-500 hover:text-red-400 active:text-red-400 dark:text-gray-400 dark:hover:text-red-400 dark:active:text-red-400'}"
 		>
 			<svg
 				class="h-5 w-5 {upload.liked_by_me ? 'fill-red-500' : ''}"
@@ -158,7 +180,7 @@
 		</button>
 		<button
 			onclick={() => oncomment(upload.id)}
-			class="flex items-center gap-1.5 text-sm font-medium text-gray-500 transition-colors hover:text-blue-500 dark:text-gray-400 dark:hover:text-blue-400"
+			class="flex items-center gap-1.5 text-sm font-medium text-gray-500 transition-colors hover:text-blue-500 active:text-blue-500 dark:text-gray-400 dark:hover:text-blue-400 dark:active:text-blue-400"
 		>
 			<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
 				<path stroke-linecap="round" stroke-linejoin="round" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
--- a/frontend/src/lib/components/HashtagChips.svelte
+++ b/frontend/src/lib/components/HashtagChips.svelte
@@ -20,7 +20,7 @@
 			class="shrink-0 rounded-full px-3 py-1 text-sm font-medium transition {
 				selected === null
 					? 'bg-blue-600 text-white dark:bg-blue-500'
-					: 'bg-gray-200 text-gray-700 hover:bg-gray-300 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700'
+					: 'bg-gray-200 text-gray-700 hover:bg-gray-300 active:bg-gray-300 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700 dark:active:bg-gray-700'
 			}"
 		>
 			Alle
@@ -30,8 +30,8 @@
 				onclick={() => onselect(h.tag)}
 				class="shrink-0 rounded-full px-3 py-1 text-sm font-medium transition {
 					selected === h.tag
-						? 'bg-blue-600 text-white'
-						: 'bg-gray-200 text-gray-700 hover:bg-gray-300'
+						? 'bg-blue-600 text-white dark:bg-blue-500'
+						: 'bg-gray-200 text-gray-700 hover:bg-gray-300 active:bg-gray-300 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700 dark:active:bg-gray-700'
 				}"
 			>
 				#{h.tag}
--- a/frontend/src/lib/components/HeartBurst.svelte
+++ b/frontend/src/lib/components/HeartBurst.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+	interface Props {
+		active: boolean;
+	}
+	let { active }: Props = $props();
+</script>
+
+<style>
+	@keyframes heart-burst {
+		0% { transform: scale(0.5); opacity: 0; }
+		30% { transform: scale(1.2); opacity: 1; }
+		70% { transform: scale(1); opacity: 1; }
+		100% { transform: scale(1.4); opacity: 0; }
+	}
+</style>
+
+{#if active}
+	<span
+		class="pointer-events-none absolute inset-0 flex items-center justify-center"
+		aria-hidden="true"
+		data-testid="heart-burst"
+	>
+		<svg
+			class="h-24 w-24 text-red-500 drop-shadow-lg"
+			style="animation: heart-burst 700ms ease-out forwards;"
+			fill="currentColor"
+			viewBox="0 0 24 24"
+		>
+			<path d="M12 21s-7-4.534-9.5-9.034C.5 9.466 2.5 5 7 5c2.09 0 3.534 1.083 5 3 1.466-1.917 2.91-3 5-3 4.5 0 6.5 4.466 4.5 6.966C19 16.466 12 21 12 21z" />
+		</svg>
+	</span>
+{/if}
--- a/frontend/src/lib/components/LightboxModal.svelte
+++ b/frontend/src/lib/components/LightboxModal.svelte
@@ -4,6 +4,12 @@
 	import { getUserId } from '$lib/auth';
 	import { dataMode, pickMediaUrl } from '$lib/data-mode-store';
 	import { doubletap } from '$lib/actions/doubletap';
+	import { focusTrap } from '$lib/actions/focus-trap';
+	import { toastError } from '$lib/toast-store';
+	import { vibrate } from '$lib/haptics';
+	import HeartBurst from './HeartBurst.svelte';
+
+	const COMMENT_MAX = 500;

 	interface CommentDto {
 		id: string;
@@ -32,6 +38,7 @@

 	function triggerHeartBurst() {
 		heartBurst = true;
+		vibrate(10);
 		onlike(upload.id);
 		setTimeout(() => (heartBurst = false), 700);
 	}
@@ -44,7 +51,7 @@
 		try {
 			comments = await api.get<CommentDto[]>(`/upload/${upload.id}/comments`);
 		} catch {
-			// Ignore
+			// Background fetch — failure leaves the panel empty; reopening the lightbox retries.
 		}
 	}

@@ -57,8 +64,8 @@
 			});
 			comments = [...comments, comment];
 			newComment = '';
-		} catch {
-			// Ignore
+		} catch (e) {
+			toastError(e);
 		} finally {
 			loading = false;
 		}
@@ -68,8 +75,8 @@
 		try {
 			await api.delete(`/comment/${id}`);
 			comments = comments.filter((c) => c.id !== id);
-		} catch {
-			// Ignore
+		} catch (e) {
+			toastError(e);
 		}
 	}

@@ -77,10 +84,6 @@
 		return mime.startsWith('video/');
 	}

-	function handleKeydown(e: KeyboardEvent) {
-		if (e.key === 'Escape') onclose();
-	}
-
 	function formatTime(iso: string): string {
 		return new Date(iso).toLocaleString('de-DE', {
 			day: '2-digit', month: '2-digit', hour: '2-digit', minute: '2-digit'
@@ -88,22 +91,21 @@
 	}
 </script>

-<style>
-	@keyframes heart-burst {
-		0% { transform: scale(0.5); opacity: 0; }
-		30% { transform: scale(1.2); opacity: 1; }
-		70% { transform: scale(1); opacity: 1; }
-		100% { transform: scale(1.4); opacity: 0; }
-	}
-</style>
-
-<svelte:window onkeydown={handleKeydown} />
-
-<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/80 p-4" role="dialog">
+<div
+	class="fixed inset-0 z-50 flex items-center justify-center bg-black/80 p-4"
+	role="dialog"
+	aria-modal="true"
+	aria-labelledby="lightbox-title"
+	use:focusTrap={{ onclose }}
+>
 	<div class="flex max-h-[90vh] w-full max-w-2xl flex-col overflow-hidden rounded-xl bg-white dark:bg-gray-900">
 		<!-- Media -->
 		<div class="relative bg-black">
-			<button onclick={onclose} class="absolute right-2 top-2 z-10 rounded-full bg-black/50 p-1.5 text-white hover:bg-black/70">
+			<button
+				onclick={onclose}
+				aria-label="Schließen"
+				class="absolute right-2 top-2 z-10 rounded-full bg-black/50 p-1.5 text-white hover:bg-black/70 active:bg-black/70"
+			>
 				<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
 				</svg>
@@ -117,33 +119,19 @@
 					<video
 						src={mediaSrc}
 						controls
-						class="max-h-[50vh] w-full object-contain"
+						class="max-h-[60vh] w-full object-contain"
 						poster={upload.thumbnail_url ?? undefined}
 					></video>
 				{:else}
 					<img
 						src={mediaSrc}
 						alt=""
-						class="max-h-[50vh] w-full object-contain select-none"
+						class="max-h-[60vh] w-full object-contain select-none"
 						draggable="false"
 					/>
 				{/if}

-				{#if heartBurst}
-					<span
-						class="pointer-events-none absolute inset-0 flex items-center justify-center"
-						aria-hidden="true"
-					>
-						<svg
-							class="h-24 w-24 text-red-500 drop-shadow-lg"
-							style="animation: heart-burst 700ms ease-out forwards;"
-							fill="currentColor"
-							viewBox="0 0 24 24"
-						>
-							<path d="M12 21s-7-4.534-9.5-9.034C.5 9.466 2.5 5 7 5c2.09 0 3.534 1.083 5 3 1.466-1.917 2.91-3 5-3 4.5 0 6.5 4.466 4.5 6.966C19 16.466 12 21 12 21z" />
-						</svg>
-					</span>
-				{/if}
+				<HeartBurst active={heartBurst} />
 			</div>
 		</div>

@@ -152,7 +140,7 @@
 			<div class="border-b border-gray-100 p-3 dark:border-gray-800">
 				<div class="flex items-center justify-between">
 					<div>
-						<span class="font-medium text-gray-900 dark:text-gray-100">{upload.uploader_name}</span>
+						<span id="lightbox-title" class="font-medium text-gray-900 dark:text-gray-100">{upload.uploader_name}</span>
 						<span class="ml-2 text-xs text-gray-400 dark:text-gray-500">{formatTime(upload.created_at)}</span>
 					</div>
 					<button
@@ -207,22 +195,35 @@
 			<!-- Comment input -->
 			<form
 				onsubmit={(e) => { e.preventDefault(); submitComment(); }}
-				class="flex gap-2 border-t border-gray-100 p-3 dark:border-gray-800"
+				class="border-t border-gray-100 p-3 dark:border-gray-800"
 			>
-				<input
-					type="text"
-					bind:value={newComment}
-					placeholder="Kommentar schreiben..."
-					maxlength={500}
-					class="flex-1 rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 placeholder-gray-400 focus:border-blue-500 focus:outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-500"
-				/>
-				<button
-					type="submit"
-					disabled={loading || !newComment.trim()}
-					class="rounded-lg bg-blue-600 px-3 py-2 text-sm font-medium text-white transition hover:bg-blue-700 disabled:opacity-50 dark:bg-blue-500 dark:hover:bg-blue-400"
+				<div class="flex gap-2">
+					<input
+						type="text"
+						bind:value={newComment}
+						placeholder="Kommentar schreiben..."
+						maxlength={COMMENT_MAX}
+						class="flex-1 rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 placeholder-gray-400 focus:border-blue-500 focus:outline-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-500"
+					/>
+					<button
+						type="submit"
+						disabled={loading || !newComment.trim()}
+						class="rounded-lg bg-blue-600 px-3 py-2 text-sm font-medium text-white transition hover:bg-blue-700 active:bg-blue-700 disabled:opacity-50 dark:bg-blue-500 dark:hover:bg-blue-400 dark:active:bg-blue-400"
+					>
+						Senden
+					</button>
+				</div>
+				<div
+					class="mt-1 text-right text-xs"
+					class:text-gray-400={newComment.length < 450}
+					class:dark:text-gray-500={newComment.length < 450}
+					class:text-amber-600={newComment.length >= 450 && newComment.length < COMMENT_MAX}
+					class:dark:text-amber-400={newComment.length >= 450 && newComment.length < COMMENT_MAX}
+					class:text-red-600={newComment.length >= COMMENT_MAX}
+					class:dark:text-red-400={newComment.length >= COMMENT_MAX}
 				>
-					Senden
-				</button>
+					{newComment.length}/{COMMENT_MAX}
+				</div>
 			</form>
 		</div>
 	</div>
--- a/frontend/src/lib/components/Modal.svelte
+++ b/frontend/src/lib/components/Modal.svelte
@@ -0,0 +1,56 @@
+<script lang="ts">
+	import { focusTrap } from '$lib/actions/focus-trap';
+	import type { Snippet } from 'svelte';
+
+	// Accessible name is REQUIRED. Pass `titleId` when the dialog renders its own
+	// visible heading (the common case — link aria-labelledby to that heading's id),
+	// or `ariaLabel` for dialogs without a visible title (e.g. an image preview).
+	// Failing to provide either leaves the dialog without an accessible name,
+	// which screen readers announce as just "dialog" — useless. The runtime
+	// warning below catches missed cases during dev.
+	interface Props {
+		open: boolean;
+		titleId?: string;
+		ariaLabel?: string;
+		onClose: () => void;
+		closeOnBackdrop?: boolean;
+		children: Snippet;
+	}
+
+	let {
+		open,
+		titleId,
+		ariaLabel,
+		onClose,
+		closeOnBackdrop = true,
+		children
+	}: Props = $props();
+
+	$effect(() => {
+		if (open && !titleId && !ariaLabel && typeof console !== 'undefined') {
+			console.warn('<Modal> opened without titleId or ariaLabel — dialog has no accessible name.');
+		}
+	});
+</script>
+
+{#if open}
+	<button
+		type="button"
+		class="fixed inset-0 z-50 bg-black/50"
+		aria-label="Schließen"
+		tabindex="-1"
+		onclick={closeOnBackdrop ? onClose : () => {}}
+	></button>
+	<div
+		class="pointer-events-none fixed inset-0 z-50 flex items-center justify-center p-4"
+		role="dialog"
+		aria-modal="true"
+		aria-labelledby={titleId}
+		aria-label={titleId ? undefined : ariaLabel}
+		use:focusTrap={{ onclose: onClose }}
+	>
+		<div class="pointer-events-auto w-full max-w-sm rounded-2xl bg-white p-6 shadow-xl dark:bg-gray-900">
+			{@render children()}
+		</div>
+	</div>
+{/if}
--- a/frontend/src/lib/components/OnboardingGuide.svelte
+++ b/frontend/src/lib/components/OnboardingGuide.svelte
@@ -2,6 +2,8 @@
 	import { browser } from '$app/environment';
 	import { privacyNote } from '$lib/privacy-note-store';
 	import { themePreference, type ThemePreference } from '$lib/theme-store';
+	import { focusTrap } from '$lib/actions/focus-trap';
+	import { vibrate } from '$lib/haptics';

 	const GUIDE_SEEN_KEY = 'eventsnap_guide_seen';

@@ -36,6 +38,12 @@
 			title: 'Hashtags nutzen',
 			body: 'Füge in deiner Bildunterschrift #hashtags ein, um Fotos zu gruppieren — z.B. #tanz, #buffet oder #reden. Du kannst danach filtern.'
 		},
+		{
+			kind: 'text',
+			icon: '👆',
+			title: 'Lange tippen für mehr',
+			body: 'Tippe lange auf ein Bild im Feed, um zusätzliche Aktionen zu öffnen — zum Beispiel das Original anzeigen oder eigene Beiträge löschen.'
+		},
 		{
 			kind: 'theme',
 			icon: '🌗',
@@ -74,29 +82,49 @@

 	function dismiss() {
 		if (browser) localStorage.setItem(GUIDE_SEEN_KEY, '1');
+		vibrate([0, 8, 60, 8]);
 		visible = false;
 	}
+
+	function goToStep(i: number) {
+		if (i >= 0 && i < steps.length) step = i;
+	}
 </script>

 {#if visible}
 	<!-- Backdrop -->
 	<div class="fixed inset-0 z-50 flex items-end justify-center bg-black/60 sm:items-center">
-		<div class="w-full max-w-sm rounded-t-3xl bg-white p-6 shadow-2xl dark:bg-gray-900 sm:rounded-2xl">
-			<!-- Step indicator -->
-			<div class="mb-5 flex justify-center gap-1.5">
+		<div
+			class="w-full max-w-sm rounded-t-3xl bg-white p-6 shadow-2xl dark:bg-gray-900 sm:rounded-2xl"
+			role="dialog"
+			aria-modal="true"
+			aria-labelledby="onboarding-title"
+			use:focusTrap={{ onclose: dismiss }}
+		>
+			<!-- Step indicator — tap a pip to jump back. The visible dot is small but
+			     the touch target is padded to ~44 px so it remains tappable on mobile. -->
+			<div class="mb-3 flex justify-center">
 				{#each steps as _, i}
-					<div
-						class="h-1.5 rounded-full transition-all {i === step
-							? 'w-6 bg-blue-600 dark:bg-blue-500'
-							: 'w-1.5 bg-gray-200 dark:bg-gray-700'}"
-					></div>
+					<button
+						type="button"
+						onclick={() => goToStep(i)}
+						aria-label={`Schritt ${i + 1}`}
+						aria-current={i === step ? 'step' : undefined}
+						class="flex items-center justify-center p-2.5"
+					>
+						<span
+							class="block rounded-full transition-all {i === step
+								? 'h-1.5 w-6 bg-blue-600 dark:bg-blue-500'
+								: 'h-1.5 w-1.5 bg-gray-200 dark:bg-gray-700'}"
+						></span>
+					</button>
 				{/each}
 			</div>

 			<!-- Content -->
 			<div class="mb-6 text-center">
 				<div class="mb-3 text-5xl">{currentStep.icon}</div>
-				<h2 class="mb-2 text-xl font-bold text-gray-900 dark:text-gray-100">
+				<h2 id="onboarding-title" class="mb-2 text-xl font-bold text-gray-900 dark:text-gray-100">
 					{currentStep.title}
 				</h2>

@@ -148,13 +176,13 @@
 			<div class="flex gap-2">
 				<button
 					onclick={dismiss}
-					class="flex-1 rounded-xl border border-gray-200 py-3 text-sm text-gray-500 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-800"
+					class="flex-1 rounded-xl border border-gray-200 py-3 text-sm text-gray-600 hover:bg-gray-50 active:bg-gray-100 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800 dark:active:bg-gray-800"
 				>
 					Überspringen
 				</button>
 				<button
 					onclick={next}
-					class="flex-1 rounded-xl bg-blue-600 py-3 text-sm font-semibold text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400"
+					class="flex-1 rounded-xl bg-blue-600 py-3 text-sm font-semibold text-white hover:bg-blue-700 active:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400 dark:active:bg-blue-400"
 				>
 					{step < steps.length - 1 ? 'Weiter' : 'Los geht\'s!'}
 				</button>
--- a/frontend/src/lib/components/Skeleton.svelte
+++ b/frontend/src/lib/components/Skeleton.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	interface Props {
+		variant?: 'card' | 'tile';
+	}
+	let { variant = 'card' }: Props = $props();
+</script>
+
+{#if variant === 'card'}
+	<article class="animate-pulse bg-white dark:bg-gray-900" aria-hidden="true">
+		<div class="flex items-center gap-3 px-4 py-3">
+			<div class="h-9 w-9 rounded-full bg-gray-200 dark:bg-gray-800"></div>
+			<div class="flex-1 space-y-1.5">
+				<div class="h-3 w-32 rounded bg-gray-200 dark:bg-gray-800"></div>
+				<div class="h-2.5 w-20 rounded bg-gray-200 dark:bg-gray-800"></div>
+			</div>
+		</div>
+		<!-- 4:5 matches the typical portrait card better than a square; reduces layout shift on first paint. -->
+		<div class="aspect-[4/5] w-full bg-gray-200 dark:bg-gray-800"></div>
+		<div class="flex gap-4 px-4 py-3">
+			<div class="h-4 w-10 rounded bg-gray-200 dark:bg-gray-800"></div>
+			<div class="h-4 w-10 rounded bg-gray-200 dark:bg-gray-800"></div>
+		</div>
+		<div class="border-b border-gray-100 dark:border-gray-800"></div>
+	</article>
+{:else}
+	<div class="aspect-square animate-pulse bg-gray-200 dark:bg-gray-800" aria-hidden="true"></div>
+{/if}
--- a/frontend/src/lib/components/Toaster.svelte
+++ b/frontend/src/lib/components/Toaster.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { toasts, dismissToast, type Toast } from '$lib/toast-store';
+
+	function toneClasses(tone: Toast['tone']): string {
+		switch (tone) {
+			case 'success':
+				return 'bg-green-600 text-white dark:bg-green-500';
+			case 'warning':
+				return 'bg-amber-500 text-white dark:bg-amber-400 dark:text-gray-900';
+			case 'error':
+				return 'bg-red-600 text-white dark:bg-red-500';
+			default:
+				return 'bg-gray-900 text-white dark:bg-gray-800';
+		}
+	}
+</script>
+
+<div
+	class="pointer-events-none fixed inset-x-0 z-[60] flex flex-col items-center gap-2 px-4"
+	style="bottom: calc(env(safe-area-inset-bottom) + 5rem)"
+	role="region"
+	aria-live="polite"
+	aria-label="Benachrichtigungen"
+	data-testid="toaster"
+>
+	{#each $toasts as t (t.id)}
+		<button
+			type="button"
+			onclick={() => dismissToast(t.id)}
+			class="pointer-events-auto w-full max-w-sm rounded-xl px-4 py-3 text-left text-sm font-medium shadow-lg transition active:scale-[0.98] {toneClasses(t.tone)}"
+			data-testid="toast"
+			data-toast-tone={t.tone}
+		>
+			{t.message}
+		</button>
+	{/each}
+</div>