4 ms·

It is what the element is for. It can be used for both a dialog or modal UI widget. And it can significantly streamline accessibility. MDN has a good overview

It is what the element is for. It can be used for both a dialog or modal UI widget. And it can significantly streamline accessibility. MDN has a good overview of the aria attributes associated with modal[0][1] and some more explainer on the dialog API[2] The long and short of it though is modal dialog is generally expected to halt user progression until dealt, where as a non modal dialog does not halt user progression and can be safely ignored from a user perspective. The differences are definitely subtle. It’s also why the dialog element has .show and .showModal as an API, they aren’t synonymous, they actually set different contexts implicitly for accessibility reasons. This is in part some of the criticism that people have of the dialog element, FWIW. There was a debate prior to its introduction to break these two UI patterns into separate elements, one being <dialog> and the other being <modal> so their semantics could be obvious and more easily preserved. I believe the additional complexity wasn’t worth the cost but it does leave this confusing situation about modal vs dialog around. To the create of the committee though it does go a long way in addressing both concerns, even at the cost of “obviousness” [0]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-modal https://developer.mozilla.org/en-US/docs/Web/Accessibility/A... [1]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/dialog_role https://developer.mozilla.org/en-US/docs/Web/Accessibility/A... [2]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog https://developer.mozilla.org/en-US/docs/Web/HTML/Element/di...

simonw 2y ago
So for the https://tools.simonwillison.net/side-panel-dialog https://tools.simonwillison.net/side-panel-dialog example - where clicking on an item opens up a "details" view in a side panel, which can then be dismissed - is the way I'm using dialog appropriate? If not, how should I use it instead? Code is here: https://github.com/simonw/tools/blob/main/side-panel-dialog.html https://github.com/simonw/tools/blob/main/side-panel-dialog.... Key code is that when you click an item it effectively does this: sidePanel.innerHTML = '...'; sidePanel.showModal(); I think this is a modal, because it's meant to entirely take focus from the rest of the page (until you dismiss the side panel).
- no_wizard 2y ago
  It looks to me like you’re using the dialog API well enough, but your background content isn’t inert, I can still scroll it, and if I wasn’t on mobile I’d see if tab would break the modal sandbox, as I suspect it might. You should try using this with a screen reader if you’re able, that’ll let you know where you may need further improvement. Right now the behavior on the page is that of a dialog and you’re using the (correct if you want a modal) modal API, that will cause issues for users You should also use the autofocus attribute if you want the modal to focus on something other than the close icon in the corner upon opening
  - simonw 2y ago
    I just added a toggle to https://tools.simonwillison.net/side-panel-dialog https://tools.simonwillison.net/side-panel-dialog that switches between show() and showModal() to help me explore the differences.

simonw 2y ago

So for the https://tools.simonwillison.net/side-panel-dialog https://tools.simonwillison.net/side-panel-dialog example - where clicking on an item opens up a "details" view in a side panel, which can then be dismissed - is the way I'm using dialog appropriate? If not, how should I use it instead? Code is here: https://github.com/simonw/tools/blob/main/side-panel-dialog.html https://github.com/simonw/tools/blob/main/side-panel-dialog.... Key code is that when you click an item it effectively does this: sidePanel.innerHTML = '...'; sidePanel.showModal(); I think this is a modal, because it's meant to entirely take focus from the rest of the page (until you dismiss the side panel).

no_wizard 2y ago
It looks to me like you’re using the dialog API well enough, but your background content isn’t inert, I can still scroll it, and if I wasn’t on mobile I’d see if tab would break the modal sandbox, as I suspect it might. You should try using this with a screen reader if you’re able, that’ll let you know where you may need further improvement. Right now the behavior on the page is that of a dialog and you’re using the (correct if you want a modal) modal API, that will cause issues for users You should also use the autofocus attribute if you want the modal to focus on something other than the close icon in the corner upon opening
- simonw 2y ago
  I just added a toggle to https://tools.simonwillison.net/side-panel-dialog https://tools.simonwillison.net/side-panel-dialog that switches between show() and showModal() to help me explore the differences.