Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Toast notifications now announced properly by screen reader #3391

Conversation

Harshit-7373
Copy link
Contributor

@Harshit-7373 Harshit-7373 commented Mar 13, 2025

Fixes #3382

Changes:

  1. I updated the time limit for both toast notifications ("Sketch Saved" and "AutoSave Enabled"). Earlier, the "Sketch Saved" notification used to disappear very quickly, within just 2-3 seconds. Now, both notifications remain visible for 10-12 seconds.

  2. I added an ARIA live region with the status set to "assertive", ensuring that as soon as a toast notification appears, screen readers announce it immediately.

Screen.Recording.2025-03-13.at.4.17.38.PM.mov

This video shows the duration for which the "Sketch Saved" and "AutoSave Enabled" notifications remain visible on the screen.

Screenshot 2025-03-13 at 4 21 19 PM

This image shows the announcement made by the screen reader.

I have verified that this pull request:

  • has no linting errors (npm run lint)
  • has no test errors (npm run test)
  • is from a uniquely-named feature branch and is up to date with the develop branch.
  • is descriptively named and links to an issue number, i.e. Fixes #123

Sorry, something went wrong.

@dsaw
Copy link

dsaw commented Mar 13, 2025

I think the issue warrants having a discussion on how the approaches impact usability before embarking on a fix - the approaches listed in the linked ticket are possibilities but all of them have implications.
The fix has a region with 'assertive" status means that any toast will get announced and potentially interrupt what the user is doing, making it intrusive at times. Actions like 'Saving the sketch' may not be considered that urgent enough to warrant an intrusive alert.
Similarly, increasing the duration although a decent option may still be inadequate from a UX perspective as the notification may outlast the action for too long. Thinking about the use cases and the implications is important from an accessibility standpoint. @raclim

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
@Harshit-7373
Copy link
Contributor Author

I have successfully changed the ARIA live region to "polite," ensuring that the screen reader will finish the current speech before announcing the toast message. However, the original duration for "Sketch Saved" was only 3-4 seconds, making it difficult for the screen reader to announce it in time. By the time the screen reader finishes the current speech, the "Sketch Saved" message will have already disappeared. Therefore, I believe increasing the duration is a necessary update to effectively resolve this issue. @raclim @dsaw

@Harshit-7373 Harshit-7373 changed the title FIXED : - Toast notifications now announced properly by screen reader… Toast notifications now announced properly by screen reader… Mar 13, 2025
@Harshit-7373 Harshit-7373 changed the title Toast notifications now announced properly by screen reader… Toast notifications now announced properly by screen reader Mar 13, 2025
<div
id="toast-live-region"
aria-live="polite"
style={{ position: 'absolute', left: '-9999px' }}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We probably want to preserve the original setup here, such as referencing toast__close rather than adding the styling here.

@raclim
Copy link
Collaborator

raclim commented Mar 13, 2025

Thanks for taking a shot at this!

I think I'm not entirely sure yet if this might be the approach we want to go with, and agree with @dsaw that we might want to discuss several options for implementing this first (for example, where are all the places in the editor that the toast is called, how long should the toast be up for, etc), and potentially look into how other platforms might be integrating something similar.

Since this might take a bit more research first, I think it might be best to take a step back before implementing this. I'm going to close this for now—I think there were some good points raised within this PR though, so I think this discussion should be continued within the linked issue!

@raclim raclim closed this Mar 13, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Accessibility: Toast notification don't get announced on screen reader
3 participants