From 7959fe97b32b5c0f1ced079a26b5d91d894b9b5a Mon Sep 17 00:00:00 2001
From: Obiajulu-gif <okoyeemmanuel998@gmail.com>
Date: Sun, 30 Aug 2026 09:37:41 +0100
Subject: [PATCH] fix: improve mobile nav toast and error boundary

---
 src/components/layout/mobile-nav.tsx     |  5 +-
 src/components/shared/error-boundary.tsx | 12 ++--
 src/components/shared/toast.tsx          | 85 +++++++++++++++---------
 src/tests/shared/error-boundary.test.tsx |  2 +-
 4 files changed, 60 insertions(+), 44 deletions(-)

diff --git a/src/components/layout/mobile-nav.tsx b/src/components/layout/mobile-nav.tsx
index e031432..73b1bf1 100644
--- a/src/components/layout/mobile-nav.tsx
+++ b/src/components/layout/mobile-nav.tsx
@@ -22,15 +22,16 @@ export function MobileNav() {
             <Link
               key={link.href}
               href={link.href}
+              aria-label={link.label}
               aria-current={isActive ? "page" : undefined}
               className={cn(
-                "flex flex-col items-center gap-0.5 rounded-lg px-1.5 py-1.5 text-[10px] font-medium transition-colors min-w-0 sm:px-3 sm:py-2 sm:text-xs",
+                "flex min-h-11 min-w-11 flex-col items-center gap-0.5 rounded-lg px-1.5 py-1.5 text-[10px] font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 sm:px-3 sm:py-2 sm:text-xs",
                 isActive
                   ? "text-primary-600"
                   : "text-gray-500 hover:text-gray-900"
               )}
             >
-              <link.icon className="h-5 w-5 shrink-0" />
+              <link.icon className="h-5 w-5 shrink-0" aria-hidden="true" />
               <span className="max-sm:hidden">{link.label}</span>
             </Link>
           );
diff --git a/src/components/shared/error-boundary.tsx b/src/components/shared/error-boundary.tsx
index 10e9f65..8a62f68 100644
--- a/src/components/shared/error-boundary.tsx
+++ b/src/components/shared/error-boundary.tsx
@@ -132,16 +132,11 @@ class ErrorBoundaryInner extends React.Component<
   };
 
   private handleRetry = async () => {
-    const { retryCount } = this.state;
-    const delay = this.getExponentialBackoffDelay(retryCount);
-
     this.setState({ isRetrying: true });
 
     try {
-      // Wait before retrying
-      await new Promise((resolve) => setTimeout(resolve, delay));
-
       // Reset error state to retry rendering children
+      const { retryCount } = this.state;
       this.setState({
         hasError: false,
         error: null,
@@ -214,7 +209,7 @@ class ErrorBoundaryInner extends React.Component<
 
       // Default error UI
       return (
-        <div className="flex flex-col items-center justify-center py-16 px-4 text-center">
+        <div className="flex flex-col items-center justify-center py-16 px-4 text-center" role="alert">
           <div className="flex h-16 w-16 items-center justify-center rounded-full bg-red-100 mb-4">
             <AlertTriangle className="h-8 w-8 text-red-500" />
           </div>
@@ -222,7 +217,7 @@ class ErrorBoundaryInner extends React.Component<
             Something went wrong
           </h2>
           <p className="text-sm text-gray-600 max-w-md mb-2">
-            {error?.message || "An unexpected error occurred."}
+            We could not render this section. Try again or reload the page.
           </p>
           {retryCount > 0 && (
             <p className="text-xs text-gray-500 mb-6">
@@ -260,6 +255,7 @@ class ErrorBoundaryInner extends React.Component<
                 typeof window !== "undefined" && window.location.reload()
               }
               variant="outline"
+              aria-label="Reload the current page"
             >
               Reload Page
             </Button>
diff --git a/src/components/shared/toast.tsx b/src/components/shared/toast.tsx
index c0771c9..c6c3943 100644
--- a/src/components/shared/toast.tsx
+++ b/src/components/shared/toast.tsx
@@ -44,6 +44,14 @@ const variantIcons = {
 };
 
 const SWIPE_DISMISS_THRESHOLD = 80;
+const MAX_VISIBLE_TOASTS = 4;
+
+function createToastId() {
+  if (typeof crypto !== "undefined" && "randomUUID" in crypto) {
+    return crypto.randomUUID();
+  }
+  return Math.random().toString(36).slice(2);
+}
 
 export function Toast({
   message,
@@ -167,17 +175,21 @@ export function useToast() {
     (message: string, options: ToastVariant | AddToastOptions = "info") => {
       const opts: AddToastOptions =
         typeof options === "string" ? { variant: options } : options;
-      const id = Math.random().toString(36).slice(2);
-      setToasts((prev) => [
-        ...prev,
-        {
-          id,
-          message,
-          variant: opts.variant ?? "info",
-          autoClose: opts.autoClose,
-          action: opts.action,
-        },
-      ]);
+      setToasts((prev) => {
+        const withoutDuplicate = prev.filter(
+          (toast) => toast.message !== message || toast.variant !== (opts.variant ?? "info")
+        );
+        return [
+          ...withoutDuplicate,
+          {
+            id: createToastId(),
+            message,
+            variant: opts.variant ?? "info",
+            autoClose: opts.autoClose,
+            action: opts.action,
+          },
+        ].slice(-MAX_VISIBLE_TOASTS);
+      });
     },
     []
   );
@@ -224,17 +236,22 @@ export function ToastContextProvider({ children }: { children: ReactNode }) {
     (message: string, options: ToastVariant | AddToastOptions = "info") => {
       const opts: AddToastOptions =
         typeof options === "string" ? { variant: options } : options;
-      const id = Math.random().toString(36).slice(2);
-      setToasts((prev) => [
-        ...prev,
-        {
-          id,
-          message,
-          variant: opts.variant ?? "info",
-          autoClose: opts.autoClose,
-          action: opts.action,
-        },
-      ]);
+      setToasts((prev) => {
+        const variant = opts.variant ?? "info";
+        const withoutDuplicate = prev.filter(
+          (toast) => toast.message !== message || toast.variant !== variant
+        );
+        return [
+          ...withoutDuplicate,
+          {
+            id: createToastId(),
+            message,
+            variant,
+            autoClose: opts.autoClose,
+            action: opts.action,
+          },
+        ].slice(-MAX_VISIBLE_TOASTS);
+      });
     },
     []
   );
@@ -246,17 +263,19 @@ export function ToastContextProvider({ children }: { children: ReactNode }) {
   return (
     <ToastContext.Provider value={{ addToast }}>
       {children}
-      {toasts.map((toast, index) => (
-        <Toast
-          key={toast.id}
-          message={toast.message}
-          variant={toast.variant}
-          autoClose={toast.autoClose}
-          action={toast.action}
-          onClose={() => removeToast(toast.id)}
-          index={index}
-        />
-      ))}
+      <div aria-live="polite" aria-relevant="additions text">
+        {toasts.map((toast, index) => (
+          <Toast
+            key={toast.id}
+            message={toast.message}
+            variant={toast.variant}
+            autoClose={toast.autoClose}
+            action={toast.action}
+            onClose={() => removeToast(toast.id)}
+            index={index}
+          />
+        ))}
+      </div>
     </ToastContext.Provider>
   );
 }
diff --git a/src/tests/shared/error-boundary.test.tsx b/src/tests/shared/error-boundary.test.tsx
index 4423d0e..6e9f5e3 100644
--- a/src/tests/shared/error-boundary.test.tsx
+++ b/src/tests/shared/error-boundary.test.tsx
@@ -26,7 +26,7 @@ describe("ErrorBoundary", () => {
       </ErrorBoundary>
     );
     expect(screen.getByText("Something went wrong")).toBeInTheDocument();
-    expect(screen.getByText("Boom!")).toBeInTheDocument();
+    expect(screen.getByText(/could not render this section/i)).toBeInTheDocument();
   });
 
   it("renders a custom fallback when provided", () => {