HTMLMedium

What problems do <dialog> and <details> solve natively?

#html#ui#a11y

Answer

<dialog> gives a real modal with free focus trapping, ::backdrop and Esc handling:

html

<dialog id="dlg"><form method="dialog"><button>Close</button></form></dialog>

js

dlg.showModal(); // modal (rest of the page goes inert)
dlg.show();      // non-modal

<details> gives a JS-free disclosure:

html

<details name="faq">
  <summary>What is the refund policy?</summary>
  <p>Within 30 days.</p>
</details>

The name attribute groups them - opening one closes its siblings (exclusive accordion).

HTMLMedium

#html#ui#a11y

<dialog> gives a real modal with free focus trapping, ::backdrop and Esc handling:

html

<dialog id="dlg"><form method="dialog"><button>Close</button></form></dialog>

js

dlg.showModal(); // modal (rest of the page goes inert)
dlg.show();      // non-modal

<details> gives a JS-free disclosure:

html

<details name="faq">
  <summary>What is the refund policy?</summary>
  <p>Within 30 days.</p>
</details>

The name attribute groups them - opening one closes its siblings (exclusive accordion).