Dialog Element

Why does this exist?

I've made many popups, modals, dialogs over the years but with dialog being a recent addition to the HTML spec, hadn't really used it. Lets see what it offers.

Howdy I'm a modal

open

Conclusion

There is quite a bit to like about the new dialog element especially on the accessibility front. Below is a list of functionality you get for free:

• Causes the rest of the DOM to be inert which allows focus to stay within the dialog element (focus trap)
• Focus is also given to the first focusable element in the modal
• The esc key can be used to close the modal
• The dialog element itself has the role of a dialog
• When used with its showModal function, aria-modal="true" is included

view code