Screen reader loses toasts especially when using multiple toasts.

[ardunster]

Do you want to request a feature or report a bug?

Accessibility bug.

What is the current behavior?

If a toast renders while reloads are happening on the page, Voiceover (MacOS screen reader) loses them and does not announce them. If multiple toasts render at the same time without any reloads on the page, Voiceover will only read the most recent one on top. This happens even if autoClose is false or if the other toasts are still on the screen; it just never sees them.

What is the expected behavior?

All toasts should get announced by the screen reader.

I can work around this issue by a) setting a limit of 1 and b) setting a delay of 1000 on each toast call. (It'd be nice if I could set a delay on the toast container itself). However, this means our UX has to change for other users as well and we cannot display success/failure for all actions at once.

I am unsure about setting up a reproduction. It happens when we call a toast at the same time we signal a component to make a new API call to refresh data that probably changed based on user's interaction.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

This is using React 18, tried in both Safari and Chrome on MacOS with Voiceover. First time we are trying it.

[Manviel]

Actually, this is a major bug!

[Jasowills]

Is this still open for fixing