[Training Modal] Prevent keyboard navigation behind the modal

[Crazy-Unicooorn]

No description provided.

[Crazy-Unicooorn]

  const modifiedElements = useRef(new Set<Element>());

  useEffect(() => {
    const focusableElements = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
    const modalOpen = document.getElementById("modal");

    if (displayModal) {
      const elements = document.querySelectorAll(focusableElements);
      elements.forEach((el: Element) => {
        if (!modalOpen?.contains(el)) {
          el.setAttribute("tabindex", "-1");
          modifiedElements.current.add(el);
        }
      });
    } else {
      modifiedElements.current.forEach((el: Element) => {
        el.removeAttribute("tabindex");
      });
      modifiedElements.current.clear();
    }
  }, [displayModal]);