[Spike] - Research the use of Toast in React Aria Components as a possible source for "flash messages"

[jupiter007]

We need a way to message users to give them feedback when they interact with the page, like clicking "Archive Template" or "Save as Draft" to let them know that it succeeded or failed.

Flash messages are a possible solution. Fraser suggested "Toast" as a possible solution since it's included within React Aria Components, but we are uncertain about whether it meets accessibility requirements. Also, we're wondering what the implementation is like, and how it compares to either creating our own custom solution.

[jupiter007]

So far, i tested out react-toastify which is the most popular toast messaging package. It worked, and was easy to style. The messages have a role=alert for screen readers, and also a close button to allow users to close. I was reading about role-alert here: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alert_role, and it seems that this might be sufficient to make the flash messages accessible.

I started reading about React Aria's "useToast" here: https://react-spectrum.adobe.com/react-aria/useToast.html. It's much more complicated, but it might add additional accessibility for screen readers. I will research that next.

[bofstein]

Going to demo on 1/7/25, see what's needed after

[jupiter007]

We should make updates so that:

• We position toast messages differently per device (mobile should include toast message at bottom of page, and desktop at the top, below the header)
• We can pass keys for (info, warning and error) to style the background colors.
• we can control widths of messages based on device
• Add toast messages to styleguide

Is there a built-in scroll to the toast message when it is displayed?