diff --git a/src/app/checkout/checkout-form.tsx b/src/app/checkout/checkout-form.tsx index 94665d3..9945d98 100644 --- a/src/app/checkout/checkout-form.tsx +++ b/src/app/checkout/checkout-form.tsx @@ -1,6 +1,6 @@ "use client"; -import { useState, type FormEvent, type HTMLAttributes } from "react"; +import { useEffect, useRef, useState, type FormEvent, type HTMLAttributes } from "react"; import { useRouter } from "next/navigation"; import { Container, SectionHeading, Button } from "@/components/ui"; import { TrustBadges } from "@/components/trust-badges"; @@ -41,6 +41,17 @@ export function CheckoutForm({ const [submitting, setSubmitting] = useState(false); const [error, setError] = useState(null); const [isGift, setIsGift] = useState(false); + const errorRef = useRef(null); + + // Fokus aktiv auf die Fehlermeldung verschieben statt sie nur farblich + // einzublenden — sonst bleibt der Fokus auf dem "Bestellen"-Button stehen + // und Screenreader-Nutzer:innen erfahren beim fehlgeschlagenen, geldwerten + // Checkout-Absenden nichts vom Fehler (role="alert" allein wird von + // manchen Screenreadern bei neu eingefuegten Elementen unzuverlaessig + // vorgelesen, Fokusverschiebung ist der robustere Mechanismus). + useEffect(() => { + if (error) errorRef.current?.focus(); + }, [error]); // Live sichtbar statt erst nach der Weiterleitung zu Stripe — reagiert auf // die Versand/Abholung-Auswahl, damit die Gesamtsumme immer stimmt. @@ -234,7 +245,11 @@ export function CheckoutForm({ ) : null} - {error ?

{error}

: null} + {error ? ( +

+ {error} +

+ ) : null}