dialog-native02.html

<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Native Dialog - Test 2: initial focus on first focusable element</title>
    <link rel="stylesheet" href="https://russmaxdesign.github.io/accessible-forms/assets/css/examples.css">
    <style>
      dialog h2 {
        margin-top: 0;
      }

      dialog h2:focus {
        outline: 0;
        box-shadow: 0 0 0 1px #fff, 0 0 0 4px #000;
      }

      dialog::-webkit-backdrop {
        background: rgba(0, 0, 0, 0.75);
      }

      dialog::backdrop {
        background: rgba(0, 0, 0, 0.75);
      }

      @media (min-width: 42em) {
        dialog {
          width: 50%;
        }
      }

      /* Inert */
      [inert] {
        pointer-events: none;
        cursor: default;
      }

      [inert], [inert] * {
        -webkit-user-select: none;
           -moz-user-select: none;
            -ms-user-select: none;
                user-select: none;
      }
    </style>
    <script>
      window.console = window.console || function(t) {};
    </script>
    <script>
      if (document.location.search.match(/type=embed/gi)) {
        window.parent.postMessage("resize", "*");
      }
    </script>
  </head>
  <body translate="no">
    <div class="wrapper">
      <h1>Native Dialog - Test 2: initial focus on first focusable element</h1>
      <p><a href="https://cdpn.io/pen/debug/XWZXQmW" target="_blank">Debug version</a></p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam voluptatibus, animi ratione et voluptate assumenda harum, ipsa dignissimos aliquam perspiciatis suscipit ipsam, similique labore voluptates itaque temporibus provident qui laboriosam.</p>
      <button id="open-btn" class="button">Open Dialog</button>
      <p><a href="https://cdpn.io/pen/debug/XWZXQmW" target="_blank">Debug version</a></p>
    </div>

    <dialog>
      <h2 id="dialog-heading">Wombats</h2>
      <p id="dialog-description">Short-legged, Australian marsupials.</p>
      <p>Wombats are <a href="https://en.wikipedia.org/wiki/Marsupial" target="_blank">marsupials</a> with brown, tan or grey fur and from head to tail. They are expert diggers with short, muscular legs and sharp claws.</p>
      <button id="close-btn" class="button">Close</button>
    </dialog>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
<script id="rendered-js">
let openBtn = document.getElementById('open-btn'),
closeBtn = document.getElementById('close-btn'),
wrapper = document.querySelectorAll('.wrapper')[0],
dialog = document.querySelector('dialog');

// event listeners for open/close buttons
openBtn.addEventListener('click', openDialog);
closeBtn.addEventListener('click', closeDialog);

// open dialog
function openDialog() {
  dialog.showModal();
}

// close dialog
function closeDialog() {
  dialog.close();
  setTimeout(function () {
    openBtn.focus();
  });
}

// handle escape key close
document.addEventListener('keydown', e => {
  if ((e.keyCode || e.which) === 27) {
    closeDialog();
  }
});

// listen for click outside dialog to close 
dialog.addEventListener("click", e => {
  var rect = e.target.getBoundingClientRect();
  var minX = rect.left + e.target.clientLeft;
  var minY = rect.top + e.target.clientTop;
  if (e.clientX < minX || e.clientX >= minX + e.target.clientWidth ||
  e.clientY < minY || e.clientY >= minY + e.target.clientHeight) {
    closeDialog();
  }
});
//# sourceURL=pen.js
</script>
  </body>
</html>