feat(a11y): add live region feedback for auth and billing flows

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'),

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">

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>
   );
 }