refactor: add focus trap to modal component (#12)

Author: leMaur

resources/assets/js/modal.js

@@ -4,9 +4,12 @@ import {
     clearAllBodyScrollLocks,
 } from "body-scroll-lock";
 
+import { createFocusTrap } from "focus-trap";
+
 const Modal = {
     previousPaddingRight: undefined,
     previousNavPaddingRight: undefined,
+    trappedElement: null,
 
     defaultSettings: {
         reserveScrollBarGap: true,
@@ -26,7 +29,7 @@ const Modal = {
             reserveScrollBarGap: !!settings.reserveScrollBarGap,
         });
 
-        scrollable.focus();
+        this.trapFocus(scrollable);
     },
 
     onModalClosed(scrollable, settings = Modal.defaultSettings) {
@@ -40,11 +43,32 @@ const Modal = {
 
         enableBodyScroll(scrollable);
 
+        this.releaseTrappedFocus();
+
         if (!document.querySelectorAll("[data-modal]").length) {
             clearAllBodyScrollLocks();
         }
     },
 
+    trapFocus(el) {
+        let trap = createFocusTrap(el, {
+            escapeDeactivates: false,
+            allowOutsideClick: true,
+        });
+
+        this.trappedElement = trap.activate();
+    },
+
+    releaseTrappedFocus() {
+        let trap = this.trappedElement;
+
+        if (trap) {
+            trap.deactivate();
+        }
+
+        this.trappedElement = null;
+    },
+
     alpine(
         extraData = {},
         modalName = "",

usage/ui.md

@@ -92,10 +92,11 @@ window.initClipboard = () => {
 
 ### Modals
 
-1. Install `body-scroll-lock`
+1. Install `body-scroll-lock` and `focus-trap`
 
 ```bash
 yarn add body-scroll-lock
+yarn add focus-trap
 ```
 
 2. Import the modal script in your `resources/js/app.js` file