[Video](https://www.youtube.com/watch?v=GDzzIlRhEzM)

In today's GUI Challenge, @AdamArgyleInk shows how to visually enhance the dialog element while maintaining great accessible and international UX.

Chapters:

- 0:00 - Introduction
- 0:22 - Overview
- 0:53 - dialog UX Review
- 2:33 - dialog Markup
- 3:00 - Show/Hide
- 4:20 - Debugging Corner
- 5:38 - Adaptive color
- 6:09 - Layout
- 7:10 - Reduced Motion
- 8:30 - UX
- 9:55 - Custom events
- 11:00 - Scrollable
- 13:37 - International layout
- 14:52 - Recap
- 15:30 - Outro

Resources:

- Read along → <https://goo.gle/3E8K72W>
- Try a demo → <https://goo.gle/3viMNa6>
- Get the source → <https://goo.gle/3jyxgxF>

Watch more GUI Challenges → <https://goo.gle/GUIchallenges>

Subscribe to Google Chrome Developers → <https://goo.gle/ChromeDevs>

[Back to all episodes](https://web.dev/shows/)