From f08d9edf3212736ad0dab7c0254257bdaa6c6078 Mon Sep 17 00:00:00 2001
From: mortezaei <mortezaei2324@gmail.com>
Date: Mon, 17 Aug 2026 17:25:05 +0330
Subject: [PATCH] refactor(ui): fix Button link nesting accessibility and add
 sync failure error toast

---
 src/app/questions-list/page.tsx       |  5 ++
 src/components/Componentes/button.tsx | 76 +++++++++++++++------------
 2 files changed, 47 insertions(+), 34 deletions(-)

diff --git a/src/app/questions-list/page.tsx b/src/app/questions-list/page.tsx
index 7a1768c..4690eeb 100644
--- a/src/app/questions-list/page.tsx
+++ b/src/app/questions-list/page.tsx
@@ -452,6 +452,11 @@ export default function QuestionsListPage() {
     } catch (err) {
       console.error("Failed to sync pending sections:", err);
       setIsSyncError(true);
+      setToastMessage(
+        t[
+          "Sending the match request failed. Please check your connection and try again."
+        ] ?? "Sending the match request failed. Please check your connection and try again."
+      );
     } finally {
       setIsSyncing(false);
     }
diff --git a/src/components/Componentes/button.tsx b/src/components/Componentes/button.tsx
index 0c9008c..5c013dc 100644
--- a/src/components/Componentes/button.tsx
+++ b/src/components/Componentes/button.tsx
@@ -153,7 +153,47 @@ export function Button({
     );
   };
 
-  const button = (
+  const content = isLoading ? (
+    <LoadingThreeDot />
+  ) : (
+    <span className="flex w-full items-center justify-center gap-2">
+      {renderArrow("left")}
+      <span className="flex min-w-0 flex-col items-center justify-center">
+        <span className="flex items-center justify-center gap-2 text-center group-16 font-semibold leading-none">
+          {children}
+        </span>
+        {description && !isOutlined ? (
+          <span
+            id={countdownId}
+            className="mt-1 text-center group-10 font-semibold leading-none text-white"
+          >
+            {description}
+          </span>
+        ) : null}
+      </span>
+      {countdownLocked ? (
+        <span className="shrink-0">
+          <CountdownProgress value={remainingSeconds} progress={progress} />
+        </span>
+      ) : (
+        renderArrow("right")
+      )}
+    </span>
+  );
+
+  if (href) {
+    return (
+      <Link
+        href={localizePath(href, locale)}
+        aria-disabled={isDisabled}
+        className={`${baseClassName} ${isDisabled ? "pointer-events-none" : ""}`}
+      >
+        {content}
+      </Link>
+    );
+  }
+
+  return (
     <button
       {...props}
       type={type}
@@ -161,41 +201,9 @@ export function Button({
       aria-describedby={description && !isOutlined ? countdownId : undefined}
       className={baseClassName}
     >
-      {isLoading ? (
-        <LoadingThreeDot />
-      ) : (
-        <span className="flex w-full items-center justify-center gap-2">
-          {renderArrow("left")}
-          <span className="flex min-w-0 flex-col items-center justify-center">
-            <span className="flex items-center justify-center gap-2 text-center group-16 font-semibold leading-none">
-              {children}
-            </span>
-            {description && !isOutlined ? (
-              <span
-                id={countdownId}
-                className="mt-1 text-center group-10 font-semibold leading-none text-white"
-              >
-                {description}
-              </span>
-            ) : null}
-          </span>
-          {countdownLocked ? (
-            <span className="shrink-0">
-              <CountdownProgress value={remainingSeconds} progress={progress} />
-            </span>
-          ) : (
-            renderArrow("right")
-          )}
-        </span>
-      )}
+      {content}
     </button>
   );
-
-  return href ? (
-    <Link href={localizePath(href, locale)}>{button}</Link>
-  ) : (
-    button
-  );
 }
 
 type CountdownProgressProps = {