add tab focus

Author: salahlalami

index.html

@@ -40,8 +40,8 @@
         <h1>Lightweight vanilla js modal component</h1>
         <p>
           This is just 2kb Lightweight vanilla js modal component with zero
-          dependencies , with option esc close , outside click close , custom
-          height , widht : check code in github :
+          dependencies , with option esc close , outside click close , tab key
+          focus inside Modal custom height , widht : check code in github :
           <a href="https://github.com/idurar/vanilla-js-modal">
             vanilla js modal github repo</a
           >
@@ -53,6 +53,11 @@ <h1>Lightweight vanilla js modal component</h1>
     <div id="delete-record" style="display: none">
       <div class="popup-container">
         <p>your Modal content here !</p>
+        <input
+          type="text"
+          style="float: left; margin-right: 20px; height: 35px"
+        />
+        <button class="closeModal" style="margin: 0">close Modal</button>
       </div>
     </div>
   </body>

src/modal.js

@@ -18,8 +18,54 @@ function closeClick(e) {
     closeModal();
   }
 }
+function trapTabKey(e) {
+  const vanillaModal = document.querySelector(".vanilla-modal");
+  const FOCUSABLE_ELEMENTS = [
+    "a[href]",
+    "area[href]",
+    'input:not([disabled]):not([type="hidden"]):not([aria-hidden])',
+    "select:not([disabled]):not([aria-hidden])",
+    "textarea:not([disabled]):not([aria-hidden])",
+    "button:not([disabled]):not([aria-hidden])",
+    "iframe",
+    "object",
+    "embed",
+    "[contenteditable]",
+    '[tabindex]:not([tabindex^="-"])',
+  ];
+
+  const nodes = vanillaModal.querySelectorAll(FOCUSABLE_ELEMENTS);
+  let focusableNodes = Array(...nodes);
+
+  if (focusableNodes.length === 0) return;
+
+  focusableNodes = focusableNodes.filter((node) => {
+    return node.offsetParent !== null;
+  });
+
+  // if disableFocus is true
+  if (!vanillaModal.contains(document.activeElement)) {
+    focusableNodes[0].focus();
+  } else {
+    const focusedItemIndex = focusableNodes.indexOf(document.activeElement);
+
+    if (e.shiftKey && focusedItemIndex === 0) {
+      focusableNodes[focusableNodes.length - 1].focus();
+      e.preventDefault();
+    }
 
-const closeModal = function () {
+    if (
+      !e.shiftKey &&
+      focusableNodes.length > 0 &&
+      focusedItemIndex === focusableNodes.length - 1
+    ) {
+      focusableNodes[0].focus();
+      e.preventDefault();
+    }
+  }
+}
+
+function closeModal() {
   const vanillaModal = document.querySelector(".vanilla-modal");
   if (vanillaModal) {
     vanillaModal.classList.remove("modal-visible");
@@ -30,7 +76,8 @@ const closeModal = function () {
   document.removeEventListener("keydown", escKey);
   document.removeEventListener("click", outsideClick, true);
   document.removeEventListener("click", closeClick);
-};
+  document.removeEventListener("keydown", trapTabKey);
+}
 
 const modal = {
   init: function () {
@@ -66,6 +113,7 @@ const modal = {
     vanillaModal.classList.add("modal-visible");
     document.addEventListener("click", outsideClick, true);
     document.addEventListener("keydown", escKey);
+    document.addEventListener("keydown", trapTabKey);
     document
       .getElementById("modal-content")
       .addEventListener("click", closeClick);