Focus trap in a dialog modal and after exiting, focus on the last element clicked

Viewed 20

I have multiple modals with different id's.

<div id="#Modal" tabindex="-1" class= active" style="left: Opx;" role="dialog" >
   <div id="#Modal-text' tabindex="0">
      <div class="container">
         <div class= close-btn">
            <a class="closer noprint href=" javascript:void(0) aria-label="Close dialog" tabindex="0"></a>
         </div>
      </div>
      <div class= content">..modal content goes here</div>
      <div class="focus-guard" tabindex="0"></div>
   </div>
   <div id="#Modal-anothertext' tabindex="0"></div>
   <div id="#Modal-sample' tabindex="0"></div>
</div>

The jquery function add a focus guard div and add an event listener to it whenever a tab or keyboard navigation, through it, it will go again to the close button:

"use strict"

jquery(document).ready(function ($) {

// Check if modal exists
if ($(" [id+='Modal-']").length {
   // Check id's if containstring of 'Modal-' and check if modal has child with #focus-guard
   if ($("[id*='Modal-']").find("focus-guard").length === 0) {
      console.log("does not exist");
      const focusGuard = document.createElement("div");
      focusGuard.setAttribute("class", "focus-guard");
      focusGuard.setAttribute("tabindex", "0");
      
      // Add focus guard to parent
      $("[id*='Modal-']").append(focusGuard);
      
      // The closer button is being added in the DOM upon clicking modal, that's why I used DOMNodeInserted
      $(document).bind("DOMNodeInserted", function (e) {
         if (e.target.className="container") {         
            const close = document.querySelector(".closer");
            console.log(close);
            
            focusGuard.addEventListener("focus", () => {
               close.focus();
            });        
         }           
      });
   }
});
}

Have tried also some possible selectors and isolating a single modal. Unfortunately, the eventlistener on focus guard div does not trigger and I cannot target speciffically the "closer noprint" class.

I know it's not right to have a selector like an array("[id=Modal-]"*) to refer to the parent element of the modal but since it's multiple, not sure if this will be the right thing to do. Might there be a simple solution for this one.

Also stuck with a function that focuses on the last item clicked after dismissing the modal.

0 Answers
Related