JSFiddle - React, Tailwind, and code Playground

by Venkatesh Dematti

HTML

<input type="radio" value="yes" id="yes" name="useful">
<label for="no">Yes</label>

<input type="radio" value="yes" id="no" name="useful">
<label for="no">No</label>

JavaScript

document.addEventListener("DOMContentLoaded", function () {
    const feedbackButton = document.getElementById(
      "feedback-form-button-modal"
    );
    const feedbackDialog = document.querySelector(".feedback-form-dialog");
    let closeButton = null;
    if (feedbackDialog) {
      closeButton = feedbackDialog.querySelector(".modal-btn--close");
    }

    const focusableElementsString =
      'a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex="0"], [contenteditable]';
    let firstFocusableElement;
    let lastFocusableElement;
    let scrollPosition = 0;

    // Keyboard trap withing dialog
    const setFocusableElements = () => {
      if (feedbackDialog) {
        const focusableElements = feedbackDialog.querySelectorAll(
          focusableElementsString
        );
        firstFocusableElement = focusableElements[0];
        lastFocusableElement = focusableElements[focusableElements.length - 1];
      }
    };

    const onKeyDown = (event) => {
      if (event.key === "Escape") {
        closeModal();
      }
    };

    const trapTabKey = (e) => {
      const isTabPressed = e.key === "Tab" || e.keyCode === 9;
      if (!isTabPressed) {
        return;
      }

      const geckoContainer = document.querySelector(
        ".footer-feedback-gecko-container"
      );
      const iframeElem = geckoContainer
        ? geckoContainer.querySelector("iframe")
        : null;

      if (iframeElem)  {
        if(e.shiftKey) {
          alert("asd");
          e.preventDefault();
        }
      }

      if (e.shiftKey && document.activeElement === firstFocusableElement) {
        e.preventDefault();
        lastFocusableElement.focus(); // Shift + Tab from first to last element
      } else if (
        !e.shiftKey &&
        document.activeElement === lastFocusableElement
      ) {
        e.preventDefault();
        firstFocusableElement.focus(); // Tab...