refactor(ui): fix Button link nesting accessibility and add sync failure error toast

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);
     }

src/components/Componentes/button.tsx

@@ -153,15 +153,7 @@ export function Button({
     );
   };
 
-  const button = (
-    <button
-      {...props}
-      type={type}
-      disabled={isDisabled}
-      aria-describedby={description && !isOutlined ? countdownId : undefined}
-      className={baseClassName}
-    >
-      {isLoading ? (
+  const content = isLoading ? (
     <LoadingThreeDot />
   ) : (
     <span className="flex w-full items-center justify-center gap-2">
@@ -187,14 +179,30 @@ export function Button({
         renderArrow("right")
       )}
     </span>
-      )}
-    </button>
   );
 
-  return href ? (
-    <Link href={localizePath(href, locale)}>{button}</Link>
-  ) : (
-    button
+  if (href) {
+    return (
+      <Link
+        href={localizePath(href, locale)}
+        aria-disabled={isDisabled}
+        className={`${baseClassName} ${isDisabled ? "pointer-events-none" : ""}`}
+      >
+        {content}
+      </Link>
+    );
+  }
+
+  return (
+    <button
+      {...props}
+      type={type}
+      disabled={isDisabled}
+      aria-describedby={description && !isOutlined ? countdownId : undefined}
+      className={baseClassName}
+    >
+      {content}
+    </button>
   );
 }