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
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.
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.
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.
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
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.
<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