New dialog component 🎁

[alexbassy]

Hey Kitty! Hope you are doing well ✨

Some people on the internet have recommended against building one’s own dialog from scratch. But there is a new dialog element on the block with a few new features out of the box.

Do you plan to write a post on this summarising the differences between the old and new, and how to roll your own dialog component? I'm sure many people like me are curious (and stubborn) and want to write their own while still keeping accessibility in mind.

Thanks! <3

[KittyGiraudel]

Hey Alex! Very nice to hear from you, I hope you’re doing well. 😊

Fortunately, I do not have to write such post because Scott O’Hara already did. This is basically as good as it gets in terms of breaking for the status quo around the <dialog> element. TL;DR: you can start using it but it might be worth relying on a library àla a11y-dialog for a little while longer. Back in April, I also explained why one would want to use a lib over the native element.

If you’re looking to learn more about building an accessible dialog script, I wrote about it for Smashing Magazine last year. Rob Levin also did a good piece about the pros and cons of rolling one’s own dialog implementation for CSS-Tricks.

I hope this helps! Don’t hesitate to ask if you have any other question. 💚

[alexbassy]

Amazing! Shame about the drawbacks outlined in your last response to a dialog question but grateful to see them plainly laid out there. Our designer (who rightly reviews all work before release) still uses Safari 14 which gives our team a real possibility of not completing work if it's not catering to older browsers. Seems the library is still the way to go for now 😅

Thanks for the answer - very helpful!