1 files changed, 36 insertions, 0 deletions
diff --git a/themes/danix-xyz-hacker/assets/js/form-components.js b/themes/danix-xyz-hacker/assets/js/form-components.js
index 35a5f27..ffa4260 100644
--- a/themes/danix-xyz-hacker/assets/js/form-components.js
+++ b/themes/danix-xyz-hacker/assets/js/form-components.js
@@ -89,3 +89,39 @@ export function renderToastContainer(Alpine) {
     }
   };
 }
+
+// Focus Trap for Modals - Week 5
+function createFocusTrap(modalElement) {
+  const focusableElements = modalElement.querySelectorAll(
+    'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+  );
+
+  if (focusableElements.length === 0) return;
+
+  const firstElement = focusableElements[0];
+  const lastElement = focusableElements[focusableElements.length - 1];
+
+  modalElement.addEventListener('keydown', (e) => {
+    if (e.key !== 'Tab') return;
+
+    if (e.shiftKey) {
+      // Shift + Tab
+      if (document.activeElement === firstElement) {
+        e.preventDefault();
+        lastElement.focus();
+      }
+    } else {
+      // Tab
+      if (document.activeElement === lastElement) {
+        e.preventDefault();
+        firstElement.focus();
+      }
+    }
+  });
+
+  // Set initial focus
+  firstElement.focus();
+}
+
+// Export for use in Alpine.js
+window.createFocusTrap = createFocusTrap;