So I made a little toast message demo tonight. It also works with the keyboard if you tab. It will focus on the close button of the toaster and it you hit ENTER, the toast is toast!
See the Pen https://codepen.io/nickytonline/pen/OJJmLyK by nickytonline (@nickytonline) on CodePen.
I was just having a little fun, but it brought up a question for me. What type of HTML element should a toast message be?
What is the semantic element that should be used for a toast message? It doesn't feel like <dialog /> or <button />. For the moment, I have it as <div />, but would definitely love to use something with more meaning. Here's my little demo I put together. https://t.co/gr98HmpWPF
— Nick Taylor (he/him) (@nickytonline) October 24, 2019
I will have a follow up post sometime in the near future explaining all the moving parts. 😉
Photo by Jonathan Pielmayer on Unsplash