NFT card with expandable image using the dialog element

Hi, everyone! 👋🏻

This was a fun challenge in which I learned how to use the <dialog> element to create a modal. It takes care of most of the things that should be considered when implementing a modal:

• Making the background inert while open
• Focusing the first interactive element inside the modal after opening it
• After closing the modal, returning focus to the element that was focused before opening it
• Adding a backdrop
• Being able to close it with the Esc key

Questions:

• Are there any accessibility improvements to be made?
• Do you think the <dialog> element is ready to be used in production? As of September 27, 2022, it is supported by 92.18% of browsers in use globally.

Any feedback, comments and suggestions are very welcome and appreciated. Thank you!