Alternatives/improvements to toasts
ojeytonwilliams opened this issue · 2 comments
Discuss your ideas or share your views:
Typically in freeCodeCamp UIs we do not use toasts. From talking to @QuincyLarson the main concern is a11y. We want to make sure that all users have time to read the information and that screenreaders announce it.
From my testing, our current toasts are most of the way there, but leave a few things to be desired.
- They disappear quite quickly (this is easy enough to configure, though)
- They do not appear in the tab hierarchy, so it's unclear how a keyboard user would manually dismiss them
Are there superior alternatives to give this kind of instant feedback? Or, could the current toasts do the job if we make them last longer, fit them into the focus order and ensure they can be dismissed via the keyboard?
@ahmadabdolsaheb @bbsmooth this is a little outside of my comfort zone, so any insight would be very welcome.
If anyone wants to quickly test out the toasts feel free to join/leave https://chapter.freecodecamp.dev/chapters/4. The annoying repetition of the "This is a testing site" message is because we implemented that as an alert. It's not ideal, but it's not the fault of the toasts.
There are Chakra alerts with close buttons that might be good alternatives to the current toast. If this feature is not in the MVP, we could use the alert component from the component library.
Thanks @ahmadabdolsaheb, I had a quick play with the closeable alert and it seems to provide a better UX out of the box