<dialog id="dialog" open>
    <form>
    <button type="submit" aria-label="close" formmethod="dialog" formnovalidate>X</button>
  </form>
    <h2 id="dialogid">Bad user Experience</h2>
  <p>When you opened the dialog, not that focus was added to the X. What would happen if there ws nothing interactive in the dialog?</p>
      <ol>
      <li>Try closing this dialog using <kbd>Esc</kbd>. Does it work?</li>
      <li>Close this modal with a form submission (the X): if the formmethod is set to `dialog`, the dialog will close. (open the dialog up again after you try it.)</li>
        <li>Activate the "close the dialog" button. Where does focus go?</li>

      </ol>
  <p>If these two buttons weren't included, how could the user close the dialog?</p>
  </form>
</dialog>

<button id="modalless">Open modalless dialog</button>
<p id="text"></p>
<hr/>
<h2>Random interactive elements</h2>
<p>Before opening the dialog, tab thru these interactive elements. Then try again when the dialog is open.</p>
<p>When the dialog is open, because the dialog was opened with <code>show()</code> it is non-modal. Are these normally interactive elements interactive? They should be.</p>
<p><a href="https://machinelearningworkshop.com">Machine Learning Workshop</a></p>
  <p><label>Here is a useless input: <input></label></p>
      <p>
       <label>Here is a useless select:
           <select name="yummy">
          <option>Maple Syrup</option>
          <option>Ice Cream</option>
          <option>Bacon</option>
           </select>
       </label>
    </p>
<button id="closeIt">close the dialog</button>
body {
  background: #a4bacc99;
  color: #226daa;
  font-family: Raleway, sans-serif;
  accent-color: #226DAA;
}
a:hover, a:focus {
  text-underline-offset: 0.25em;
}
[aria-label="close"] {
  appearance: none;
  float: right;
  border: 1px solid;
  border-radius: 50%;
}
:focus {
  outline: 2px solid #226DAA;
}
dialog {width: 30rem; max-width: 60vw;}
li {margin-bottom: 1em;}
const dialog = document.getElementById('dialog');
const text = document.getElementById('text');
const jsbutton = document.getElementById('closeIt');
const modalless = document.getElementById('modalless');
const reset = document.getElementById('reset');

modalless.addEventListener('click', (event) => {
  dialog.show();
  text.textContent = '';
});

jsbutton.addEventListener('click', (event) => {
  dialog.close();
  text.innerHTML += '"close the dialog" closed the dialog.<br/>';
});


dialog.addEventListener('cancel', (event) => {
  text.innerHTML += 'cance event happened<br/>';
});

dialog.addEventListener('close', (event) => {
  text.innerHTML += 'close event happened<br/>';
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.