let btnOpenModal1 = document.getElementById("btnOpenModal1");
let dialog1 = document.getElementById("dialog1");

let btnOpenModal2 = document.getElementById("btnOpenModal2");
let dialog2 = document.getElementById("dialog2");

btnOpenModal1.addEventListener("click", function onOpen() {
  if (typeof dialog1.showModal === "function") {
    dialog1.showModal();
    trapFocusIn(dialog1);
  } else {
    console.error(
      "L'API <dialog> n'est pas prise en charge par ce navigateur."
    );
  }
});

btnOpenModal2.addEventListener("click", function onOpen() {
  if (typeof dialog2.showModal === "function") {
    dialog2.showModal();
    trapFocusIn(dialog2);
  } else {
    console.error(
      "L'API <dialog> n'est pas prise en charge par ce navigateur."
    );
  }
});

//ferme une modal
function closeModal(modal) {
  modal.close();
}

//Contraint le focus a rester dans la modal
function trapFocusIn(modal) {
  modal.addEventListener("keydown", function (e) {
    let isTabPressed = e.key === "Tab" || e.keyCode === 9;

    if (!isTabPressed) {
      return;
    }

    let focusableElement = modal.querySelectorAll(
      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
    );
    let firstFocusableElement = focusableElement[0];
    let lastFocusableElement = focusableElement[focusableElement.length - 1];

    if (e.shiftKey) {
      // if shift key pressed for shift + tab combination
      if (document.activeElement === firstFocusableElement) {
        lastFocusableElement.focus(); // add focus for the last focusable element
        e.preventDefault();
      }
    } else {
      // if tab key is pressed
      if (document.activeElement === lastFocusableElement) {
        // if focused has reached to last focusable element then focus first focusable element after pressing tab
        firstFocusableElement.focus(); // add focus for the first focusable element
        e.preventDefault();
      }
    }
  });
}