-
-
Notifications
You must be signed in to change notification settings - Fork 1.5k
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
Toast notifications now announced properly by screen reader #3391
Conversation
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. |
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 |
<div | ||
id="toast-live-region" | ||
aria-live="polite" | ||
style={{ position: 'absolute', left: '-9999px' }} |
There was a problem hiding this comment.
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.
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! |
Fixes #3382
Changes:
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.
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.
This image shows the announcement made by the screen reader.
I have verified that this pull request:
npm run lint
)npm run test
)develop
branch.Fixes #123