From dfe4462e101bc7521583bd1d0cbcf951df01090d Mon Sep 17 00:00:00 2001 From: Michael Date: Fri, 6 Mar 2026 20:23:27 +0100 Subject: [PATCH] UI/UX, Design und Accessibility Optimierung MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Farbkontrast: text-muted #64748b → #475569 (WCAG 2.2 AA konform) - Touch Targets: Kalender-Tage 44px → 48px, Checkbox 20px → 24px - Formulare: py-3 → py-3.5, aria-required, aria-describedby für Fehler - Fehler: role="alert" + bg-danger/5 Highlight auf allen Fehlermeldungen - Modal: role="dialog", aria-modal, Focus Trap, Escape-Taste, Safe Area - ProgressBar: aria-valuenow/min/max, grössere Labels (10px → 12px) - Kalender: gap-2, bessere ARIA Labels mit Status, grössere Legende - Skip Navigation: "Zum Hauptinhalt springen" Link in Layout - prefers-reduced-motion: alle Animationen deaktiviert - Placeholder-Kontrast verbessert - Footer: grössere Schrift, Hover-Underline auf Links - Header: Focus Ring auf Zurück-Button, aria-hidden auf SVGs - Error-Seiten: Gemeindeamt-Telefonnummer als Kontakt - Loading States: "Daten werden geladen..." Text - CAPTCHA: "Sicherheitsüberprüfung" Label - Wassermenge: "1 m³ = 1.000 Liter" Hilfetext Co-Authored-By: Claude Opus 4.6 --- src/app/globals.css | 32 ++++++++++++-- src/app/layout.tsx | 6 +++ src/app/page.tsx | 6 +-- src/app/pool/page.tsx | 66 ++++++++++++++++------------ src/app/storno/page.tsx | 16 ++++--- src/app/wasserzaehler/page.tsx | 16 ++++--- src/components/BookingCalendar.tsx | 22 ++++++---- src/components/ConfirmationModal.tsx | 49 ++++++++++++++++++--- src/components/Footer.tsx | 8 ++-- src/components/Header.tsx | 4 +- src/components/ProgressBar.tsx | 11 ++++- 11 files changed, 168 insertions(+), 68 deletions(-) diff --git a/src/app/globals.css b/src/app/globals.css index cd1910b..b9e72b9 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -12,7 +12,7 @@ --color-bg: #f8fafc; --color-bg-card: #ffffff; --color-text: #1e293b; - --color-text-muted: #64748b; + --color-text-muted: #475569; --color-border: #e2e8f0; } @@ -75,9 +75,9 @@ body { /* ── Calendar day styles ── */ .cal-day { - @apply w-11 h-11 rounded-xl flex items-center justify-center text-sm cursor-pointer transition-all; - min-width: 44px; - min-height: 44px; + @apply w-12 h-12 rounded-xl flex items-center justify-center text-sm cursor-pointer transition-all; + min-width: 48px; + min-height: 48px; } .cal-day:hover:not(.cal-disabled):not(.cal-full) { @apply bg-accent/15 text-accent; @@ -115,3 +115,27 @@ input:focus, select:focus, textarea:focus { z-index: 10; padding-bottom: env(safe-area-inset-bottom, 0px); } + +/* ── Placeholder contrast ── */ +input::placeholder, +textarea::placeholder { + color: var(--color-text-muted); + opacity: 0.7; +} + +/* ── Reduced motion ── */ +@media (prefers-reduced-motion: reduce) { + .animate-checkmark-circle, + .animate-checkmark-draw, + .animate-slide-up, + .animate-fade-in { + animation: none !important; + opacity: 1; + } + .skeleton { + animation: none !important; + } + .cal-day:active:not(.cal-disabled):not(.cal-full) { + transform: none !important; + } +} diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 12f2fe1..a7822c4 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -14,6 +14,12 @@ export default function RootLayout({ return ( + + Zum Hauptinhalt springen + {children} diff --git a/src/app/page.tsx b/src/app/page.tsx index 65df66f..2712b92 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -24,7 +24,7 @@ export default function Home() { -
+
{/* Seasonal Banner */} {isSaison && (
@@ -56,7 +56,7 @@ export default function Home() { Wunschtermin wählen, in 2 Min. erledigt

- + @@ -76,7 +76,7 @@ export default function Home() { QR-Code scannen, Zählerstand eingeben

- + diff --git a/src/app/pool/page.tsx b/src/app/pool/page.tsx index 2edb22b..4030ef9 100644 --- a/src/app/pool/page.tsx +++ b/src/app/pool/page.tsx @@ -192,7 +192,7 @@ export default function PoolBuchungPage() { />
-
+
{/* Progress Bar */}
@@ -247,8 +247,8 @@ export default function PoolBuchungPage() { {/* Wassermenge bei Ortswasserleitung */} {wasserquelle === 'ortswasserleitung' && (
-
)}
{error && ( -
+
{error}
)} @@ -329,7 +332,7 @@ export default function PoolBuchungPage() { )} {error && ( -
+
{error}
)} @@ -398,8 +401,8 @@ export default function PoolBuchungPage() {
{/* Name */}
-
{/* Adresse */}
-
{/* Telefon */}
-
{/* Email */}
-
{/* Erinnerung */} @@ -481,22 +490,25 @@ export default function PoolBuchungPage() { type="checkbox" checked={erinnerung} onChange={(e) => setErinnerung(e.target.checked)} - className="mt-0.5 w-5 h-5 rounded border-border text-accent accent-accent flex-shrink-0" + className="mt-0.5 w-6 h-6 rounded border-2 border-border text-accent accent-accent flex-shrink-0 focus:ring-2 focus:ring-accent focus:ring-offset-2" /> - + Ich möchte nächstes Jahr per E-Mail an die Pool-Befüllung erinnert werden. {/* CAPTCHA */} -
-
+
+

Sicherheitsüberprüfung

+
+
+
{/* Error */} {error && ( -
+
{error}
)} diff --git a/src/app/storno/page.tsx b/src/app/storno/page.tsx index 169efdf..1542dd7 100644 --- a/src/app/storno/page.tsx +++ b/src/app/storno/page.tsx @@ -117,9 +117,10 @@ function StornoContent() { // Loading if (loading) { return ( -
+
+

Daten werden geladen...

@@ -139,14 +140,17 @@ function StornoContent() {
- +

Ungültiger Link

-

- Dieser Storno-Link ist ungültig oder abgelaufen. Bitte kontaktieren Sie das Gemeindeamt. +

+ Dieser Storno-Link ist ungültig oder abgelaufen.

+ + Gemeindeamt anrufen: +43 7243 50600 +