Test avoid focus

by murgiaMarco

HTML

<div id="containerDiv">

<span>Titolo Div principale</span>
<br>
<label>First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label>Last name:</label>
<input type="text" id="lname" name="lname"><br><br>


<div id="modalDivID" class="modalDiv">

<span id="titoloModale" tabindex="0">Titolo della modale</span><br>
<label>First name:</label>
<input type="text" id="fname2" name="fname"><br><br>
<label>Last name:</label>
<input type="text" id="lname2" name="lname"><br><br>
<label>First name:</label>
<input type="text" id="fname3" name="fname"><br><br>
<label>Last name:</label>
<input type="text" id="lname3" name="lname"><br><br>
<label>First name:</label>
<input type="text" id="fname4" name="fname"><br><br>
<label>Last name:</label>
<input type="text" id="lname4" name="lname"><br><br>
<input type="button" value="close modal" onclick="closeModal()"> <br><br>
<span id="fineModale" tabindex="0"></span>
</div>


<label>First name:</label>
<input type="text" id="fname5" name="fname"><br><br>
<input type="button" value="open modal" onclick="openModal()"> <br><br>
<label>Last name:</label>
<input type="text" id="lname5" name="lname"><br><br>
<label>First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label>Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">

</div>

SCSS

input:focus{
  background-color: yellow;
}

.modalDiv{
  height: 400px;
  width: 400px;
  background: green;
  position: absolute;
  top: 0;
  right: 20px;
  padding: 20px;
  display:none;
}

JavaScript

var activeBeforeModal;
var firstFocusableModalElement;
var lastFocusableModalElement;


function openModal() {
	activeBeforeModal = document.activeElement;
  firstFocusableModalElement = document.getElementById("titoloModale");
  lastFocusableModalElement = document.getElementById("fineModale");

  //console.log("activeBeforeModal value: ", activeBeforeModal);
  document.getElementById("modalDivID").style.display = "block";  
  document.getElementById("titoloModale").focus();  

  document.getElementById("containerDiv").addEventListener(
  "keydown",
  blockTabbing,
  true,
	); 
}

function closeModal() {
  document.getElementById("modalDivID").style.display = "none";
  restoreTabbing();
  activeBeforeModal.focus();
}

function blockTabbing(event){
	console.log("blockTabbing");

    if (event.defaultPrevented) {
      return; // Should do nothing if the default action has been cancelled
    }

    let handled = false;
    console.log("keydown keycode: ", event.keyCode);
  	if (event.keyCode == 9 || (event.shiftKey && event.keyCode == 9)) {
      // Handle the event with KeyboardEvent.keyCode
      if(document.activeElement == lastFocusableModalElement){
      	firstFocusableModalElement.focus();
      }
      
    }
	
}

function restoreTabbing(){
console.log("restoreTabbing");
document.getElementById("containerDiv").removeEventListener("keydown", blockTabbing, true);
}