Add accessible announcements for wallet and escrow updates

src/__tests__/accessibility/announcements.test.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { render, screen, act } from '@testing-library/react';
+import { ScreenReaderAnnouncer } from '@/components/accessibility/ScreenReaderAnnouncer';
+import { announceToScreenReader } from '@/lib/accessibility/announcements';
+
+describe('Accessible Announcements for Wallet & Escrow Updates', () => {
+  it('renders polite and assertive live regions correctly', () => {
+    render(<ScreenReaderAnnouncer />);
+
+    act(() => {
+      announceToScreenReader('Escrow milestone funded successfully', 'polite');
+    });
+
+    const politeRegion = screen.getByText('Escrow milestone funded successfully');
+    expect(politeRegion).toBeInTheDocument();
+    expect(politeRegion.closest('div')).toHaveAttribute('aria-live', 'polite');
+  });
+
+  it('handles assertive error announcements for failed transactions', () => {
+    render(<ScreenReaderAnnouncer />);
+
+    act(() => {
+      announceToScreenReader('Wallet transaction failed', 'assertive');
+    });
+
+    const assertiveRegion = screen.getByText('Wallet transaction failed');
+    expect(assertiveRegion).toBeInTheDocument();
+    expect(assertiveRegion.closest('div')).toHaveAttribute('aria-live', 'assertive');
+  });
+});

src/components/accessibility/ScreenReaderAnnouncer.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import React from 'react';
+import { useScreenReaderAnnouncer } from '@/lib/accessibility/announcements';
+
+export function ScreenReaderAnnouncer() {
+  const announcement = useScreenReaderAnnouncer();
+
+  if (!announcement) return null;
+
+  return (
+    <>
+      <div
+        aria-live="polite"
+        aria-atomic="true"
+        className="sr-only"
+        style={{ position: 'absolute', width: 1, height: 1, padding: 0, margin: -1, overflow: 'hidden', clip: 'rect(0, 0, 0, 0)', whiteSpace: 'nowrap', border: 0 }}
+      >
+        {announcement.priority === 'polite' ? announcement.message : ''}
+      </div>
+      <div
+        aria-live="assertive"
+        aria-atomic="true"
+        className="sr-only"
+        style={{ position: 'absolute', width: 1, height: 1, padding: 0, margin: -1, overflow: 'hidden', clip: 'rect(0, 0, 0, 0)', whiteSpace: 'nowrap', border: 0 }}
+      >
+        {announcement.priority === 'assertive' ? announcement.message : ''}
+      </div>
+    </>
+  );
+}

src/lib/accessibility/announcements.ts

@@ -0,0 +1,36 @@
+import { useEffect, useState } from 'react';
+
+export type AnnouncementPriority = 'polite' | 'assertive';
+
+export interface Announcement {
+  id: string;
+  message: string;
+  priority: AnnouncementPriority;
+}
+
+let globalAnnouncerListener: ((announcement: Announcement) => void) | null = null;
+
+export function announceToScreenReader(message: string, priority: AnnouncementPriority = 'polite') {
+  if (globalAnnouncerListener) {
+    globalAnnouncerListener({
+      id: Math.random().toString(36).substring(2, 9),
+      message,
+      priority,
+    });
+  }
+}
+
+export function useScreenReaderAnnouncer() {
+  const [currentAnnouncement, setCurrentAnnouncement] = useState<Announcement | null>(null);
+
+  useEffect(() => {
+    globalAnnouncerListener = (announcement) => {
+      setCurrentAnnouncement(announcement);
+    };
+    return () => {
+      globalAnnouncerListener = null;
+    };
+  }, []);
+
+  return currentAnnouncement;
+}