Cover image for Can Microsoft Edge help save the dialog tag?

Can Microsoft Edge help save the dialog tag?

macargnelutti profile image Matteo Cargnelutti Updated on ・3 min read

If there is one "new" HTML element I am excited about more than I probably should, it is <dialog>. We've all implemented modal window systems from scratch at some point, and, let's face it, it is extremely hard to get it right, especially in terms of accessibility.

As such, the <dialog> element, which has been part of the HTML 5 specifications for quite a few years, seem to be an ideal solution to a now decades old problem: a single wrapper tag and a few simple JavaScript methods allowing to create and operate modals in an optimal way.

Surprisingly, while the specs are pretty clear and lots of guides on how to use <dialog> exist, support is still lacking and very much Chrome-centric, which puts this feature at risk of deprecation.

How come such a seemingly great feature hasn't taken off? What could help it make a strong come back? Let's try to figure it out.

The Firefox case, and the wait for HTML inert

Firefox's history with the <dialog> element is somewhat complex and tumultuous: it was first implemented, then retracted and put behind a flag and there is no clear indication that it will be brought back anytime soon.

But reading through Mozilla's bug tracker somewhat informs us on the reasons behind this withdrawal: accessibility seems to be the main concern here, as modals tend to be problematic with focus management, since they kind of "hack" the natural flow of the page.
The upcoming inert=true HTML attribute, allowing to tell assistive tools to "ignore" parts of the DOM tree and therefore manage focus more easily, appears to be the missing piece in the equation: current implementations of <dialog> don't seem to be relying on it, which could later lead to interoperability issues.

This therefore looks like a deadlock: as of January 2020, specification work for the inert attribute is still underway, important questions remain to be answered, and while an effective polyfill exists, browser support of the feature itself is too limited to encourage widespread use of it.

Microsoft Edge to the rescue?

While the debate over whether discarding the original Microsoft Edge rendering engine to replace it with Chromium is bad for diversity is absolutely legitimate, there are some positive aspects to this transition.

This shows in the case we are interested in today, as the new Microsoft Edge supports both <dialog> and inert, which it likely inherited from Chromium's implementations. Having another major browser vendor supporting this set of features might help renew the community's interest for them, and help with standardization and implementation efforts.

While implementations vary and many challenges are yet to be overcome, it appears that the destiny of <dialog> is linked to the one of inert: it will be interesting to see how both features evolve over the next few months and years, and how they help improve how the web is experienced, were they to be massively supported and adopted.

Interestingly enough, <dialog> is on Webkit's 2020 goals list, which will likely bring support for it in Safari in the near future: could this be a sign?

Photo: Miguel Á. PadriñÑn

Posted on by:

macargnelutti profile

Matteo Cargnelutti


CTO & Software Developer at Grafton Studio, Boston MA. Interested in everything Web standards, Python, Javascript. He/Him, πŸ‡ΊπŸ‡ΈπŸ‡«πŸ‡·. Opinions are my own.


Editor guide