Refactor Modal component to use useFocusTrap hook

src/utils/hooks.js

@@ -40,3 +40,41 @@ export function useClickOutside(element, callback) {
         };
     });
 }
+
+/* Trap focus inside modal. */
+export function useFocusTrap(modalRef) {
+    useEffect(() => {
+        if (shown) {
+            const modal = modalRef.current;
+            const focusableElements = modal.querySelectorAll(
+                'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+            );
+            const firstElement = focusableElements[0];
+            const lastElement = focusableElements[focusableElements.length - 1];
+
+            const handleTab = (event) => {
+                if (event.key === "Tab") {
+                    if (event.shiftKey) {
+                        if (document.activeElement === firstElement) {
+                            lastElement.focus();
+                            event.preventDefault();
+                        }
+                    } else {
+                        if (document.activeElement === lastElement) {
+                            firstElement.focus();
+                            event.preventDefault();
+                        }
+                    }
+                }
+            };
+
+            modal.addEventListener("keydown", handleTab);
+
+            firstElement.focus();
+
+            return () => {
+                modal.removeEventListener("keydown", handleTab);
+            };
+        }
+    }, [shown]);
+}