improves modal accessibility

web/assets/css/modals.css

@@ -1,25 +1,15 @@
-@keyframes position {
-  0% {
-    top: 0;
-  }
-  25% {
-    top: 15%;
-  }
-  50% {
-    top: 30%;
-  }
-  75% {
-    top: 40%;
-  }
-  100% {
-    top: 50%;
-  }
+.has-modal {
+  overflow: hidden;
+}
+
+.modal-show {
+  display: block !important;
 }
 
 .playground-modes__modal {
   display: none;
   position: fixed;
-  z-index: 10;
+  z-index: 1000;
   left: 0;
   top: 0;
   width: 100vw;
@@ -34,9 +24,8 @@
   border-radius: 8px;
   border: 1px solid #e0e0e0;
   background-color: #fefefe;
-  z-index: 11;
+  z-index: 1001;
   position: absolute;
-  animation: 3s ease-in linear position;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);

web/assets/js/components/modals/playground-mode.js

@@ -8,39 +8,102 @@ import { ModesService } from "../../services/modes.js";
 const celEditor = new AceEditor("cel-input");
 const dataEditor = new AceEditor("data-input");
 
-const toggleModeButton = document.getElementById("toggle-mode");
-
 const playgroundModesModalEl = document.getElementById(
   "playground-modes__modal"
 );
-const closePlaygroundModesModalButton = document.querySelector(
-  ".playground-modes__modal-close-btn"
-);
-toggleModeButton.addEventListener("click", () => {
-  playgroundModesModalEl.style.display = "block";
-});
 
-renderModeOptions();
+var modal = modal || {
+  set: Array.from(document.querySelectorAll("[data-modal]")),
+  openTriggers: Array.from(document.querySelectorAll("[data-modal-trigger]")),
+  closeTriggers: Array.from(document.querySelectorAll("[data-modal-close]")),
+  focusable:
+    "a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), object, embed, *[tabindex], *[contenteditable], label, div.playground-modes__options",
+  focused: "",
+};
 
-closePlaygroundModesModalButton.addEventListener("click", closeModal);
+modal.init = function () {
+  modal.set.forEach((modal) => {
+    modal.setAttribute("aria-hidden", "true");
+  });
+  modal.openTriggers.forEach((trigger) => {
+    trigger.addEventListener("click", function (e) {
+      e.preventDefault();
+      let name = this.dataset.modalTrigger;
+      modal.el = modal.set.find(function (value) {
+        return value.dataset.modal === name;
+      });
+      modal.show();
+    });
+  });
+  modal.closeTriggers.forEach((trigger) => {
+    trigger.addEventListener("click", function (e) {
+      e.preventDefault();
+      modal.hide();
+    });
+  });
+};
 
-window.onclick = (event) => {
-  if (event.target === playgroundModesModalEl) {
-    closeModal();
-  }
+modal.show = function () {
+  document.body.classList.add("has-modal");
+  document.querySelector(".main-content").setAttribute("aria-hidden", true);
+  modal.focused = document.activeElement;
+  modal.el.setAttribute("aria-hidden", "false");
+  modal.el.classList.add("modal-show");
+  modal.focusableChildren = Array.from(
+    modal.el.querySelectorAll(modal.focusable) ?? []
+  );
+  modal.focusableChildren[0].focus();
+  modal.el.onkeydown = function (e) {
+    modal.trap(e);
+  };
+};
+
+modal.hide = function () {
+  document.body.classList.remove("has-modal");
+  document.querySelector(".main-content").setAttribute("aria-hidden", false);
+  modal.el.setAttribute("aria-hidden", "true");
+  modal.el.classList.remove("modal-show");
+  modal.focused.focus();
+};
+
+window.onclick = (e) => {
+  if (e.target === playgroundModesModalEl) modal.hide();
 };
 
-window.onkeydown = (ev) => {
-  if (ev.key === "Escape") closeModal();
+modal.trap = function (e) {
+  if (e.which == 27) {
+    modal.hide();
+  }
+  if (e.which == 9) {
+    let currentFocus = document.activeElement;
+    let totalOfFocusable = modal.focusableChildren.length;
+    let focusedIndex = modal.focusableChildren.indexOf(currentFocus);
+    if (e.shiftKey) {
+      if (focusedIndex === 0) {
+        e.preventDefault();
+        modal.focusableChildren[totalOfFocusable - 1].focus();
+      }
+    } else {
+      if (focusedIndex == totalOfFocusable - 1) {
+        e.preventDefault();
+        modal.focusableChildren[0].focus();
+      }
+    }
+  }
 };
 
+renderModeOptions();
+modal.init();
+
 function handleModeClick(event, mode, element) {
   const { value } = event.target;
 
   document
     .querySelectorAll(".playground-modes__options--option")
     .forEach((option) => option.classList.remove("active"));
 
+  localStorage.removeItem("example-selected");
+
   element.classList.add("active");
   renderUIChangesByMode(mode);
   localStorage.setItem(localStorageKey, value);