Hot HTML Summer: Dialog

This post is a part of a series where I write a post for each module of the web.dev Learn HTML course. I'll note things I didn't know, highlight interesting items, and generally enjoy having a Hot HTML Summer.

This post covers the Dialog module of Learn HTML. Each section below corresponds to a section in this module of the course. The quoted items are relevant passages from the course.

There’s no anchor for this section, it’s the first part of the module.

Dialogs can be either modal (only the content in the dialog can be interacted with) or non-modal (it’s still possible to interact with content outside of the dialog).

Learning new things right out of the gate.

Go to this section at Learn HTML.

Once opened, there are three ways to close the dialog: the escape key, submitting a form with a button that has the formmethod="dialog" set (or if the form itself has method="dialog" set), and the HTMLDialogElement.close() method.

This is in reference to an example CodePen. Good to know the different ways to handle closing the modal.

When the dialog is opened, focus moves into the dialog. Focus is set on the first element in the sequential keyboard navigation order within that dialog.

I learned about this a few lessions ago in the focus module. Manuel Matuzović also has a recent post testing various content combinations across browsers that provides more detail.

Go to this section at Learn HTML.

The HTMLDialogElement.show() similarly opens a dialog, but without adding a backdrop or causing anything to become inert. The escape key does not close non-modal dialogs. Because of this, it is even more important to ensure you include a method of closing the non-modal dialog. In doing so, if the closer is outside the dialog, realize the focus will go to the element that opened the dialog, which may not be the best user experience.

Woof, yeah. The heading in the non-modal dialog in this example is appropriately titled Bad User Experience.

Go to this section at Learn HTML.

You don’t need the HTMLDialogElement.close() method to close a dialog. You don’t need JavaScript at all. To close the <dialog> without JavaScript, include a form with a dialog method by either setting method="dialog" on the <form> or formmethod="dialog" on the button.

When I first saw that <dialog> was available I ran to CodePen to try it out. I can’t remember where I read it so I don’t know where the code example came from, but it used Javascript to both open and close the dialog via onclick on the button element (window.dialog.showModal() and window.dialog.close()). Upon reading the above passage I ran back to CodePen and created a new example setting formmethod="dialog" on the buttons (one “X” close in the upper right and one text labeled close below the text).

Out of habit I added :focus-visible to the button elements instead of :focus, this may not visually indicate focus on the first interactive element in your dialog even though it will still receive focus. The same goes for explicitly setting autofocus, the focus will be set but may not visually indicated.

As Hidde de Vries explains, when using :focus-visible the browser decides if it’s best to indicate focus based on a number of different heuristics. As an example, in Chrome if the dialog was opened via keyboard the focus was indicated. If the dialog was opened via mouse the focus was not indicated. This was a simplistic test, but best to use good old :focus for this one to ensure proper indication.

Also of note, you currently still need JavaScript to open the dialog via the showModal() method. Although there has been active discussion about the adding the ability to open without JavaScript at the repository for the HTML spec that started in 2018.