Here’s an important update on native modal dialogues. TL;DR – it’s now OK to use dialog.
Last year I posted that Safari now supported the HTML dialog element meaning that we were within touching distance of being able to adopt it with confidence. My caveat was:
However first I think we’d need to make an informed decision regarding our satisfaction with support, based on the updated advice in Scott O’Hara’s article Having an Open Dialog.
(Accessibility expert Scott O’Hara has been diligently testing the dialog element for years.)
However the happy day has arrived. The other day Scott posted Use the dialog element (reasonably). It includes this advice:
I personally think it’s time to move away from using custom dialogs, and to use the
dialogelement instead.
That’s an important green-light!
And this of course means that we can stop DIYing modal dialogues from divs plus super-complicated scripting and custom ARIA, and instead let a native HTML element do most of the heavy lifting for us.
From a Design System perspective, I’d previously suggested to my team that when we revisit our Modal component we should err toward a good custom dialogue library first, however I’m now likely to recommend we go for native dialog instead. Which is great!