Accessibility

[Palmik]

Hello! Thank you for this awesome library. Some of my users reached out to me indicating that their screen-reader NVDA does not detect the react-hot-toast popups. I am not able to reproduce myself as I use Linux, just wanted to let you know.

[SleeplessByte]

I can confirm that despite this library saying it's accessible, it is not.

NVDA on Chrome / Firefox

[timolins]

Hey, thanks for sharing. Do you have any suggestions on why this may be the case or what's missing? The related ARIA props appear to be set correctly.

[SleeplessByte]

aria props don't magically make something accessible.

Here is what NVDA reports when clicking the buttons on the https://react-hot-toast.com/ page:

🛎  Make me a toast  button  
Here's your toast 

✅  Success  button  
(nothing)

❌  Error  button  
(nothing)

⏳  Promise  button  
Could not save.  

↕️  Multi Line  button  
(nothing)

🌚  Dark Mode  button  
(nothing)

👏  Emoji  button  
(nothing)

🔩  JSX Content  button  
(nothing)

🎨  Themed  button  
(nothing)

️💨  TailwindCSS  button  
(nothing)

⬆️  Custom Position  button  
(nothing)

I have not looked at the implementation, nor the example page code, but I assume from your aria comment you are trying to rely on role="status" and/or role="alert" with aria-live="...". Spec-wise, these roles only must announce if there is a change to the content of such an element. I expect you mount these last minute, and thus they usually don't change content.

Related NVDA ticket (wontfix): nvaccess/nvda#14591

I think this is what's happening as the Promise and Make Toast one first show a spinner / temporary content, and then announce the new content.

If you want this to work, you need to mount the status message first, and then fill it with content on a next tick, or, have a single status on the page that is empty on document load, and changes based on the current toast/toasts.

That said, making a toast dissappear before its contents are announced effectively makes it inaccessible again, which is, among other reasons, why doing accessible toasts is considered hard and snackbars are not much better.

Personally I don't think it's wise to claim this is accessible, but allowing aria props is better than nothing. Next, if you want to make it less bad, you probably want to ensure messages are announced properly.