I recently read this article by Keith Grant which introduced the newly arrived
<dialog></dialog>. Excited by this new UI element, I immediately sat down to experiment with it to see how it can be used effectively as a modal — the most common use of it. While experimenting, I discovered a neat CSS trick on how to trap focus within the
<dialog></dialog> element, a common accessibility requirement for modals, and a notoriously difficult one.
<dialog></dialog> demos in this article are tested on Chrome and Firefox browsers only. Safari has some weird issue where not all elements are focused while doing a normal keyboard navigation with Tab key!