feat(frontend): add accessibility and loading states

Author: bamiebot-maker

Dechat/dex_with_fiat_frontend/src/components/BankDetailsModal.tsx

@@ -17,7 +17,7 @@ import {
   Clock,
   RefreshCw,
 } from 'lucide-react';
-import { motion, AnimatePresence } from 'framer-motion';
+import { motion, AnimatePresence, useReducedMotion } from 'framer-motion';
 import { fetchLockedQuote, type LockedQuote } from '@/lib/cryptoPriceService';
 import SkeletonWallet from '@/components/ui/skeleton/SkeletonWallet';
 import { useNotifications } from '@/hooks/useNotifications';
@@ -164,6 +164,7 @@ export default function BankDetailsModal({
   xlmAmount,
 }: BankDetailsModalProps) {
   const modalRef = useRef<HTMLDivElement>(null);
+  const prefersReducedMotion = useReducedMotion();
   const {
     beneficiaries,
     isLoaded: beneficiariesLoaded,
@@ -665,10 +666,10 @@ export default function BankDetailsModal({
   return (
     <motion.div
       className="theme-overlay fixed inset-0 z-50 flex items-center justify-center backdrop-blur-sm"
-      initial={{ opacity: 0 }}
+      initial={prefersReducedMotion ? false : { opacity: 0 }}
       animate={{ opacity: 1 }}
       exit={{ opacity: 0 }}
-      transition={{ duration: 0.2 }}
+      transition={prefersReducedMotion ? { duration: 0 } : { duration: 0.2 }}
     >
       <motion.div
         ref={modalRef}
@@ -678,10 +679,22 @@ export default function BankDetailsModal({
         tabIndex={-1}
         className="theme-surface theme-border relative w-full max-w-md mx-4 border rounded-2xl shadow-2xl p-6"
         variants={modalVariants}
-        initial="hidden"
+        initial={prefersReducedMotion ? false : 'hidden'}
         animate="visible"
         exit="exit"
       >
+        <div
+          role="status"
+          aria-live="polite"
+          aria-atomic="true"
+          className="sr-only"
+        >
+          {step === 1 && 'Bank selection step.'}
+          {step === 2 && 'Account verification step.'}
+          {step === 3 && 'Payout confirmation step.'}
+          {step === 4 && 'Payout status step.'}
+        </div>
+
         {/* Header */}
         <div className="flex items-center justify-between mb-6">
           <div className="flex items-center gap-2">

Dechat/dex_with_fiat_frontend/src/components/StellarChatInterface.tsx

@@ -3,6 +3,7 @@
 import SkeletonChat from '@/components/ui/skeleton/SkeletonChat';
 import SkeletonSidebar from '@/components/ui/skeleton/SkeletonSidebar';
 import { useState, useCallback, useEffect, useRef } from 'react';
+import { useReducedMotion } from 'framer-motion';
 import {
   Wallet,
   LogOut,
@@ -67,6 +68,7 @@ const HEALTH_POLL_INTERVAL_MS = 60_000;
 
 function StellarChatInterfaceContent() {
   const { t } = useTranslation();
+  const prefersReducedMotion = useReducedMotion();
   const {
     connection,
     connect,
@@ -942,7 +944,14 @@ function StellarChatInterfaceContent() {
           {/* Messages */}
           <div className="flex-1 min-h-0 flex flex-col">
             {!isHydrated || (isLoading && messages.length === 0) ? (
-              <SkeletonChat />
+              <div
+                role="status"
+                aria-live="polite"
+                aria-atomic="true"
+                className="flex-1"
+              >
+                <SkeletonChat />
+              </div>
             ) : (
               <ErrorBoundary
                 isDarkMode={isDarkMode}

Dechat/dex_with_fiat_frontend/src/components/ToastProvider.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useState, useEffect, useCallback, useRef, ReactNode } from 'react';
+import { useReducedMotion } from 'framer-motion';
 import { X, CheckCircle, AlertCircle, Info, AlertTriangle } from 'lucide-react';
 import { toastStore, AppToast, ToastVariant } from '@/lib/toastStore';
 import { useTheme } from '@/contexts/ThemeContext';
@@ -17,6 +18,7 @@ interface ToastItemProps {
 
 function ToastItem({ toast, onDismiss, isDarkMode }: ToastItemProps) {
   const touchStartX = useRef(0);
+  const prefersReducedMotion = useReducedMotion();
   const touchStartTime = useRef(0);
   const [offsetX, setOffsetX] = useState(0);
   const [isSwiping, setIsSwiping] = useState(false);
@@ -89,10 +91,12 @@ function ToastItem({ toast, onDismiss, isDarkMode }: ToastItemProps) {
     ? { transform: `translateX(${offsetX}px)`, opacity: Math.max(0, 1 - Math.abs(offsetX) / 300) }
     : { transform: 'translateX(0)', opacity: 1 };
 
+  const motionPreference = prefersReducedMotion ? { transition: 'none' } : {};
+
   return (
     <div
       className={getVariantStyles(toast.variant)}
-      style={swipeStyle}
+      style={{ ...swipeStyle, ...motionPreference }}
       onTouchStart={handleTouchStart}
       onTouchMove={handleTouchMove}
       onTouchEnd={handleTouchEnd}
@@ -121,10 +125,13 @@ export function ToastProvider({ children }: ToastProviderProps) {
   const { isDarkMode } = useTheme();
 
   useEffect(() => {
-    const unsubscribe = toastStore.subscribe(() => {
+    const syncToasts = () => {
       const currentToasts = toastStore.getToasts();
       setToasts(currentToasts.slice(0, MAX_VISIBLE_TOASTS));
-    });
+    };
+
+    syncToasts();
+    const unsubscribe = toastStore.subscribe(syncToasts);
 
     return () => unsubscribe();
   }, []);
@@ -136,7 +143,12 @@ export function ToastProvider({ children }: ToastProviderProps) {
   return (
     <>
       {children}
-      <div className="fixed bottom-4 right-4 z-50 flex flex-col gap-2 max-w-sm">
+      <div
+        role="status"
+        aria-live="polite"
+        aria-atomic="true"
+        className="fixed bottom-4 right-4 z-50 flex flex-col gap-2 max-w-sm"
+      >
         {toasts.map((toast) => (
           <ToastItem
             key={toast.id}

Dechat/dex_with_fiat_frontend/src/components/__tests__/BankDetailsModal.a11y.test.tsx

@@ -0,0 +1,61 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import BankDetailsModal from '../BankDetailsModal';
+
+vi.mock('@/lib/chatTelemetry', () => ({
+  chatTelemetry: {
+    fiatPayoutStep: vi.fn(),
+  },
+}));
+
+vi.mock('@/hooks/useNotifications', () => ({
+  useNotifications: () => ({
+    addNotification: vi.fn(),
+  }),
+}));
+
+vi.mock('@/hooks/useBeneficiaries', () => ({
+  useBeneficiaries: () => ({
+    beneficiaries: [],
+    isLoaded: true,
+    addBeneficiary: vi.fn(),
+    renameBeneficiary: vi.fn(),
+    deleteBeneficiary: vi.fn(),
+  }),
+}));
+
+vi.mock('@/hooks/useTxHistory', () => ({
+  useTxHistory: () => ({
+    addEntry: vi.fn(),
+  }),
+}));
+
+vi.mock('@/hooks/useIdempotentAction', () => ({
+  useIdempotentAction: () => ({
+    execute: async (fn: (key: string) => Promise<void>) => {
+      await fn('test-key');
+      return null;
+    },
+    isProcessing: false,
+  }),
+}));
+
+vi.mock('@/hooks/useAccessibleModal', () => ({
+  useAccessibleModal: vi.fn(),
+}));
+
+vi.mock('@/lib/clientSession', () => ({
+  getOrCreateClientSessionId: () => 'test-session-id',
+}));
+
+describe('BankDetailsModal accessibility', () => {
+  it('renders a polite live region for announcements', () => {
+    render(
+      <BankDetailsModal isOpen={true} onClose={() => undefined} xlmAmount={100} />,
+    );
+
+    const liveRegion = screen.getByRole('status');
+    expect(liveRegion).toHaveAttribute('aria-live', 'polite');
+    expect(liveRegion).toHaveAttribute('aria-atomic', 'true');
+  });
+});

Dechat/dex_with_fiat_frontend/src/components/__tests__/ToastProvider.test.tsx

@@ -0,0 +1,31 @@
+import { render, screen, act } from '@testing-library/react';
+import { describe, expect, it, beforeEach, vi } from 'vitest';
+import { ToastProvider } from '../ToastProvider';
+import { toastStore } from '@/lib/toastStore';
+
+vi.mock('@/contexts/ThemeContext', () => ({
+  useTheme: () => ({ isDarkMode: false }),
+}));
+
+describe('ToastProvider', () => {
+  beforeEach(() => {
+    toastStore.clearToasts();
+  });
+
+  it('renders a polite live region for toast announcements', () => {
+    act(() => {
+      toastStore.addToast('Saved successfully', 'success');
+    });
+
+    render(
+      <ToastProvider>
+        <div>children</div>
+      </ToastProvider>,
+    );
+
+    const liveRegion = screen.getByRole('status');
+    expect(liveRegion).toHaveAttribute('aria-live', 'polite');
+    expect(liveRegion).toHaveAttribute('aria-atomic', 'true');
+    expect(screen.getByText('Saved successfully')).toBeTruthy();
+  });
+});

Dechat/dex_with_fiat_frontend/src/components/ui/skeleton/Skeleton.tsx

@@ -7,6 +7,11 @@ type SkeletonProps = {
 
 export default function Skeleton({ className }: SkeletonProps) {
   return (
-    <div className={cn('animate-pulse rounded-md bg-gray-700/40', className)} />
+    <div
+      className={cn(
+        'animate-pulse motion-reduce:animate-none rounded-md bg-gray-700/40',
+        className,
+      )}
+    />
   );
 }