From 01d35823ccfb05aa509fc4d315960e6a4b4aa188 Mon Sep 17 00:00:00 2001
From: "shakespeare.diy" <assistant@shakespeare.diy>
Date: Thu, 24 Sep 2026 19:39:09 +0700
Subject: [PATCH] a11y: announce live updates for notifications, wallet
 balance, DMs (U3)

Add aria-live="polite" to the three dynamic surfaces screen-reader
users otherwise miss:
- Notification bell unread-count badge (with an "N unread notifications"
  label so the number is announced meaningfully, not read as bare digits)
- Cashu wallet balance value (announces the new balance after a
  send/receive completes)
- Direct-message conversation thread: role="log" + aria-live so
  incoming messages are announced as they arrive

ToastViewport already announces via the Radix default and was left
untouched.

Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
---
 src/components/NotificationBell.tsx       | 6 +++++-
 src/components/wallet/CashuWalletCard.tsx | 6 +++++-
 src/pages/ConversationPage.tsx            | 7 ++++++-
 3 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/components/NotificationBell.tsx b/src/components/NotificationBell.tsx
index 3fb435a..de9e168 100644
--- a/src/components/NotificationBell.tsx
+++ b/src/components/NotificationBell.tsx
@@ -291,7 +291,11 @@ export function NotificationBell({ className }: { className?: string }) {
             )}
           />
           {badgeTotal > 0 && (
-            <span className="absolute -right-1 -top-1 flex min-w-[18px] items-center justify-center rounded-full bg-[#ccff00] px-1 text-[10px] font-black leading-[18px] text-black shadow-[0_0_8px_rgba(204,255,0,0.6)] ring-2 ring-black">
+            <span
+              aria-live="polite"
+              aria-label={`${badgeTotal} unread notifications`}
+              className="absolute -right-1 -top-1 flex min-w-[18px] items-center justify-center rounded-full bg-[#ccff00] px-1 text-[10px] font-black leading-[18px] text-black shadow-[0_0_8px_rgba(204,255,0,0.6)] ring-2 ring-black"
+            >
               {badgeTotal > 9 ? '9+' : badgeTotal}
             </span>
           )}
diff --git a/src/components/wallet/CashuWalletCard.tsx b/src/components/wallet/CashuWalletCard.tsx
index 40490ea..ec97c6d 100644
--- a/src/components/wallet/CashuWalletCard.tsx
+++ b/src/components/wallet/CashuWalletCard.tsx
@@ -380,7 +380,11 @@ function CashuWalletCardNative() {
             <div className="flex items-center justify-between py-3 px-4 rounded-xl bg-orange-500/10 border border-orange-500/20">
               <div>
                 <div className="text-[10px] text-orange-400/80 uppercase tracking-widest font-bold mb-0.5">Balance</div>
-                <div className="text-2xl font-black tabular-nums leading-none">
+                <div
+                  className="text-2xl font-black tabular-nums leading-none"
+                  aria-live="polite"
+                  aria-label={`Wallet balance ${totalBalance.toLocaleString()} sats`}
+                >
                   {totalBalance.toLocaleString()}
                   <span className="text-sm font-semibold text-muted-foreground ml-1.5">sats</span>
                 </div>
diff --git a/src/pages/ConversationPage.tsx b/src/pages/ConversationPage.tsx
index 668e4cb..b50e29c 100644
--- a/src/pages/ConversationPage.tsx
+++ b/src/pages/ConversationPage.tsx
@@ -231,7 +231,12 @@ export default function ConversationPage() {
         </div>
 
         {/* Messages Area */}
-        <div className="flex-1 overflow-y-auto py-3 sm:py-4 space-y-2 sm:space-y-3 min-h-0">
+        <div
+          className="flex-1 overflow-y-auto py-3 sm:py-4 space-y-2 sm:space-y-3 min-h-0"
+          role="log"
+          aria-live="polite"
+          aria-label="Message conversation"
+        >
           {isLoading ? (
             <>
               <MessageSkeleton isFromMe={false} />