From 081bf13e041583c2415017b24d9411a0c6371d7a Mon Sep 17 00:00:00 2001
From: Matthias Meister <meister.matthias86@gmail.com>
Date: Fri, 3 Apr 2026 19:47:56 +0200
Subject: [PATCH] feat(a11y): add live region feedback for auth and billing
 flows

---
 app/auth/sign-in/page.tsx                  | 27 +++++++++++++++++++---
 app/auth/sign-up/page.tsx                  | 20 +++++++++++++---
 components/billing/manage-subscription.tsx |  6 +++++
 components/billing/pricing-cards.tsx       |  6 +++++
 components/billing/topup-panel.tsx         |  6 +++++
 5 files changed, 59 insertions(+), 6 deletions(-)

diff --git a/app/auth/sign-in/page.tsx b/app/auth/sign-in/page.tsx
index d93a6ad..3f36457 100644
--- a/app/auth/sign-in/page.tsx
+++ b/app/auth/sign-in/page.tsx
@@ -175,7 +175,14 @@ export default function SignInPage() {
           </div>
 
           {error && (
-            <p className="text-sm text-red-500">{error}</p>
+            <p
+              className="text-sm text-red-500"
+              role="alert"
+              aria-live="assertive"
+              aria-atomic="true"
+            >
+              {error}
+            </p>
           )}
 
           <div className="space-y-2">
@@ -194,7 +201,14 @@ export default function SignInPage() {
           </div>
 
           {socialMessage && (
-            <p className="text-sm text-amber-600">{socialMessage}</p>
+            <p
+              className="text-sm text-amber-600"
+              role="status"
+              aria-live="polite"
+              aria-atomic="true"
+            >
+              {socialMessage}
+            </p>
           )}
 
           <button
@@ -214,7 +228,14 @@ export default function SignInPage() {
             {magicLinkLoading ? "Wird gesendet…" : "Magic Link senden"}
           </button>
           {magicLinkMessage && (
-            <p className="text-sm text-emerald-600">{magicLinkMessage}</p>
+            <p
+              className="text-sm text-emerald-600"
+              role="status"
+              aria-live="polite"
+              aria-atomic="true"
+            >
+              {magicLinkMessage}
+            </p>
           )}
         </form>
 
diff --git a/app/auth/sign-up/page.tsx b/app/auth/sign-up/page.tsx
index 60c131e..b806e80 100644
--- a/app/auth/sign-up/page.tsx
+++ b/app/auth/sign-up/page.tsx
@@ -189,7 +189,7 @@ export default function SignUpPage() {
     return (
       <div className="flex min-h-screen items-center justify-center bg-background">
         <div className="w-full max-w-sm space-y-4 rounded-xl border bg-card p-8 shadow-sm">
-          <div className="text-center">
+          <div className="text-center" role="status" aria-live="polite" aria-atomic="true">
             <div className="text-4xl mb-3">📧</div>
             <h1 className="text-xl font-semibold">E-Mail bestätigen</h1>
             <p className="mt-2 text-sm text-muted-foreground">
@@ -291,7 +291,14 @@ export default function SignUpPage() {
           </div>
 
           {error && (
-            <p className="text-sm text-red-500">{error}</p>
+            <p
+              className="text-sm text-red-500"
+              role="alert"
+              aria-live="assertive"
+              aria-atomic="true"
+            >
+              {error}
+            </p>
           )}
 
           <div className="space-y-2">
@@ -310,7 +317,14 @@ export default function SignUpPage() {
           </div>
 
           {socialMessage && (
-            <p className="text-sm text-amber-600">{socialMessage}</p>
+            <p
+              className="text-sm text-amber-600"
+              role="status"
+              aria-live="polite"
+              aria-atomic="true"
+            >
+              {socialMessage}
+            </p>
           )}
 
           <button
diff --git a/components/billing/manage-subscription.tsx b/components/billing/manage-subscription.tsx
index 7ac0a4e..da0a92b 100644
--- a/components/billing/manage-subscription.tsx
+++ b/components/billing/manage-subscription.tsx
@@ -3,6 +3,7 @@
 import { useAuthQuery } from "@/hooks/use-auth-query";
 import { useTranslations } from "next-intl";
 import { ExternalLink } from "lucide-react";
+import { useState } from "react";
 
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -20,11 +21,15 @@ const TIER_LABELS: Record<keyof typeof TIER_MONTHLY_CREDITS, string> = {
 
 export function ManageSubscription() {
   const t = useTranslations('toasts');
+  const [liveMessage, setLiveMessage] = useState("");
   const subscription = useAuthQuery(api.credits.getSubscription);
   const tier = normalizeTier(subscription?.tier);
 
   return (
     <div className="flex items-center justify-between rounded-xl border bg-card p-6">
+      <p className="sr-only" role="status" aria-live="polite" aria-atomic="true">
+        {liveMessage}
+      </p>
       <div>
         <p className="text-sm text-muted-foreground">Current plan</p>
         <div className="mt-1 flex items-center gap-2">
@@ -45,6 +50,7 @@ export function ManageSubscription() {
         <Button
           variant="outline"
           onClick={() => {
+            setLiveMessage(t('billing.openingPortalTitle'));
             toast.info(
               t('billing.openingPortalTitle'),
               t('billing.openingPortalDesc'),
diff --git a/components/billing/pricing-cards.tsx b/components/billing/pricing-cards.tsx
index 5426334..c02e472 100644
--- a/components/billing/pricing-cards.tsx
+++ b/components/billing/pricing-cards.tsx
@@ -3,6 +3,7 @@
 import { useAuthQuery } from "@/hooks/use-auth-query";
 import { useTranslations } from "next-intl";
 import { Check } from "lucide-react";
+import { useState } from "react";
 
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -19,10 +20,12 @@ const TIER_ORDER = ["free", "starter", "pro", "max"] as const;
 
 export function PricingCards() {
   const t = useTranslations('toasts');
+  const [liveMessage, setLiveMessage] = useState("");
   const subscription = useAuthQuery(api.credits.getSubscription);
   const currentTier = normalizeTier(subscription?.tier);
 
   async function handleCheckout(polarProductId: string) {
+    setLiveMessage(t('billing.redirectingToCheckoutTitle'));
     toast.info(
       t('billing.redirectingToCheckoutTitle'),
       t('billing.redirectingToCheckoutDesc'),
@@ -32,6 +35,9 @@ export function PricingCards() {
 
   return (
     <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
+      <p className="sr-only" role="status" aria-live="polite" aria-atomic="true">
+        {liveMessage}
+      </p>
       <div className="flex flex-col gap-4 rounded-xl border bg-card p-6">
         <div>
           <div className="mb-1 flex items-center justify-between">
diff --git a/components/billing/topup-panel.tsx b/components/billing/topup-panel.tsx
index 254fe97..bd3a0ed 100644
--- a/components/billing/topup-panel.tsx
+++ b/components/billing/topup-panel.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { useTranslations } from "next-intl";
+import { useState } from "react";
 
 import { authClient } from "@/lib/auth-client";
 import { TOPUP_PRODUCTS } from "@/lib/polar-products";
@@ -8,8 +9,10 @@ import { toast } from "@/lib/toast";
 
 export function TopupPanel() {
   const t = useTranslations('toasts');
+  const [liveMessage, setLiveMessage] = useState("");
 
   async function handleTopup(polarProductId: string) {
+    setLiveMessage(t('billing.redirectingToCheckoutTitle'));
     toast.info(
       t('billing.redirectingToCheckoutTitle'),
       t('billing.redirectingToCheckoutDesc'),
@@ -41,6 +44,9 @@ export function TopupPanel() {
       <p className="text-xs text-muted-foreground">
         Angezeigt werden nur kaufbare Top-up Pakete aus der serverseitigen Polar-Produktkonfiguration.
       </p>
+      <p className="sr-only" role="status" aria-live="polite" aria-atomic="true">
+        {liveMessage}
+      </p>
     </div>
   );
 }