react-hot-toast icon indicating copy to clipboard operation
react-hot-toast copied to clipboard

Toasts not being read by NVDA

Open pjsachdev opened this issue 3 years ago • 4 comments

Fantastic library, thank you very much for building it!

I noticed whilst testing with NVDA that the toasts were not being spoken by the screen reader. I believe this is because aria-live regions need to be in the DOM on page load.

This PR adds the aria-live="polite" attribute to the Toaster component which seems to resolve the issue with NVDA.

pjsachdev avatar Jun 28 '21 20:06 pjsachdev

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/timo/react-hot-toast/BUgTPnWTwMHZu2k2GfbDPy9P9Von
✅ Preview: https://react-hot-toast-git-fork-pjsachdev-aria-live-timo1.vercel.app

vercel[bot] avatar Jun 28 '21 20:06 vercel[bot]

Can we get this merged?

javagaba avatar Nov 24 '21 13:11 javagaba

Hey! Thanks for this PR.

I'm wondering how this impacts the per-toast API: https://github.com/timolins/react-hot-toast/blob/d1456c4e4fdc8210f24b08334a2a464efa815eb0/src/core/toast.ts#L27

Will this overwrite this behaviour?

timolins avatar Nov 24 '21 13:11 timolins

Will this overwrite this behaviour?

I think so. If you wanted to keep the per-toast option, you'd probably need to render a toast container for each required politeness level and render toasts into the appropriate one as needed.

diondiondion avatar Apr 21 '22 13:04 diondiondion