From 40459dcf46ff9ef75546550668b46bb08f22cde5 Mon Sep 17 00:00:00 2001
From: Salmatcre8 <abdullahiummusalmat@gmail.com>
Date: Sun, 26 Apr 2026 19:11:25 +0100
Subject: [PATCH 1/2] feat: add keyboard navigation focus trap to modals

---
 components/escrow/TransactionConfirmModal.tsx | 11 ++-
 components/ui/confirm-dialog.tsx              | 19 +++---
 hooks/useFocusTrap.ts                         | 68 +++++++++++++++++++
 3 files changed, 89 insertions(+), 9 deletions(-)
 create mode 100644 hooks/useFocusTrap.ts

diff --git a/components/escrow/TransactionConfirmModal.tsx b/components/escrow/TransactionConfirmModal.tsx
index 64d3c3f1..0637346a 100644
--- a/components/escrow/TransactionConfirmModal.tsx
+++ b/components/escrow/TransactionConfirmModal.tsx
@@ -16,6 +16,8 @@ interface TransactionConfirmModalProps {
   error?: string | null;
 }
 
+import { useFocusTrap } from "@/hooks/useFocusTrap";
+
 /**
  * A modal for confirming Stellar transactions.
  * Displays amount, estimated fee, and provides feedback during/after submission.
@@ -32,13 +34,20 @@ export default function TransactionConfirmModal({
   transactionHash,
   error,
 }: TransactionConfirmModalProps) {
+  const containerRef = useFocusTrap(isOpen, onClose);
+
   if (!isOpen) return null;
 
   const isSuccess = !!transactionHash;
 
   return (
     <div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-dark-950/80 backdrop-blur-sm animate-in fade-in duration-200">
-      <div className="relative w-full max-w-md glass-card shadow-2xl overflow-hidden animate-in zoom-in-95 duration-300">
+      <div 
+        ref={containerRef}
+        className="relative w-full max-w-md glass-card shadow-2xl overflow-hidden animate-in zoom-in-95 duration-300"
+        role="dialog"
+        aria-modal="true"
+      >
         <button
           onClick={onClose}
           className="absolute top-4 right-4 p-2 text-dark-500 hover:text-white transition-colors"
diff --git a/components/ui/confirm-dialog.tsx b/components/ui/confirm-dialog.tsx
index 9b032f53..a908ca0f 100644
--- a/components/ui/confirm-dialog.tsx
+++ b/components/ui/confirm-dialog.tsx
@@ -16,6 +16,8 @@ interface ConfirmDialogProps {
   variant?: "danger" | "primary";
 }
 
+import { useFocusTrap } from "@/hooks/useFocusTrap";
+
 export function ConfirmDialog({
   isOpen,
   onClose,
@@ -26,22 +28,20 @@ export function ConfirmDialog({
   cancelText = "Cancel",
   variant = "primary",
 }: ConfirmDialogProps) {
-  // Handle escape key
-  useEffect(() => {
-    const handleEscape = (e: KeyboardEvent) => {
-      if (e.key === "Escape") onClose();
-    };
+  variant = "primary",
+}: ConfirmDialogProps) {
+  const containerRef = useFocusTrap(isOpen, onClose);
 
+  // Lock body scroll when modal is open
+  useEffect(() => {
     if (isOpen) {
-      window.addEventListener("keydown", handleEscape);
       document.body.style.overflow = "hidden";
     }
 
     return () => {
-      window.removeEventListener("keydown", handleEscape);
       document.body.style.overflow = "unset";
     };
-  }, [isOpen, onClose]);
+  }, [isOpen]);
 
   return (
     <AnimatePresence>
@@ -58,12 +58,15 @@ export function ConfirmDialog({
 
           {/* Dialog */}
           <motion.div
+            ref={containerRef}
             initial={{ opacity: 0, scale: 0.9, y: 20 }}
             animate={{ opacity: 1, scale: 1, y: 0 }}
             exit={{ opacity: 0, scale: 0.9, y: 20 }}
             transition={{ type: "spring", duration: 0.5, bounce: 0.3 }}
             className="relative w-full max-w-md overflow-hidden rounded-3xl border border-white/10 bg-dark-900/90 shadow-2xl backdrop-blur-md"
             onClick={(e) => e.stopPropagation()}
+            role="dialog"
+            aria-modal="true"
           >
             {/* Close button */}
             <button
diff --git a/hooks/useFocusTrap.ts b/hooks/useFocusTrap.ts
new file mode 100644
index 00000000..c0d0e31a
--- /dev/null
+++ b/hooks/useFocusTrap.ts
@@ -0,0 +1,68 @@
+import { useEffect, useRef } from "react";
+
+const FOCUSABLE_ELEMENTS_SELECTOR =
+  'a[href], button, textarea, input[type="text"], input[type="radio"], input[type="checkbox"], select, [tabindex]:not([tabindex="-1"])';
+
+export function useFocusTrap(isOpen: boolean, onClose?: () => void) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const triggerRef = useRef<HTMLElement | null>(null);
+
+  useEffect(() => {
+    if (!isOpen) {
+      if (triggerRef.current) {
+        triggerRef.current.focus();
+      }
+      return;
+    }
+
+    // Capture the element that had focus before the modal opened
+    if (document.activeElement instanceof HTMLElement) {
+      triggerRef.current = document.activeElement;
+    }
+
+    const container = containerRef.current;
+    if (!container) return;
+
+    const focusableElements = container.querySelectorAll<HTMLElement>(FOCUSABLE_ELEMENTS_SELECTOR);
+    const firstElement = focusableElements[0];
+    const lastElement = focusableElements[focusableElements.length - 1];
+
+    if (firstElement) {
+      firstElement.focus();
+    }
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape" && onClose) {
+        onClose();
+        return;
+      }
+
+      if (e.key !== "Tab") return;
+
+      if (!focusableElements.length) {
+        e.preventDefault();
+        return;
+      }
+
+      if (e.shiftKey) {
+        if (document.activeElement === firstElement) {
+          e.preventDefault();
+          lastElement?.focus();
+        }
+      } else {
+        if (document.activeElement === lastElement) {
+          e.preventDefault();
+          firstElement?.focus();
+        }
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [isOpen, onClose]);
+
+  return containerRef;
+}

From 0a14c6a45bdaa9642347907132a61e6da3ad6ef0 Mon Sep 17 00:00:00 2001
From: Salmatcre8 <abdullahiummusalmat@gmail.com>
Date: Sun, 26 Apr 2026 19:19:29 +0100
Subject: [PATCH 2/2] fix: syntax error in confirm-dialog

---
 components/ui/confirm-dialog.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/components/ui/confirm-dialog.tsx b/components/ui/confirm-dialog.tsx
index a908ca0f..70254bcf 100644
--- a/components/ui/confirm-dialog.tsx
+++ b/components/ui/confirm-dialog.tsx
@@ -27,8 +27,6 @@ export function ConfirmDialog({
   confirmText = "Confirm",
   cancelText = "Cancel",
   variant = "primary",
-}: ConfirmDialogProps) {
-  variant = "primary",
 }: ConfirmDialogProps) {
   const containerRef = useFocusTrap(isOpen, onClose);