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>
This commit is contained in:
MechaCat02
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user