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

[dsaw]

p5.js version

No response

What is your operating system?

Windows

Web browser and version

Google Chrome 133.0.6943.143

Actual Behavior

The toast notification for some actions (like "sketch saved") doesn't get announced by the screen reader

Expected Behavior

Since a toast is a notification, it should be announced in a timely manner particularly since the toast will go away. Sometimes a toast like "autosave enabled" does get announced. I think there is an ARIA live region encapsulating the toast, but since the toast element would disappear from the DOM once visibility is switched off, the live region cannot be announced in due time.

Thoughts on approaching this and similar issues: 1).Set an announcement live region in the page, and update it whenever any status update sent in a toast happens. 2). Increase the duration of the toast might be helpful for giving enough time for the user to finish their action

Steps to reproduce

Steps:

1. Open a sketch on editor.p5js.org
2. Login with your credentials
3. Open up a screen reader
4. Edit and save a sketch
5. The toast shows up "Sketch saved", however, it doesn't get announced by the screen reader.

Snippet:

// Paste your code here :)

[Jatin24062005]

Hey @dsaw, could you please provide a video or screenshot of the issue? I’m not very familiar with screen readers, and it would help me understand the problem better.

[Harshit-7373]

Hi , @dsaw , I have found the issue and updated the toast duration. Now, the "Sketch saved" toast stays visible for a while. Could you provide any information regarding the announcement live region?

[hxrshxz]

@raclim I would like to work on this issue can you please assign it to me

[raclim]

@hxrshxz Thanks for your interest in this issue! Could you provide a bit of insight into how you would approach it!

[hxrshxz]

Hi @raclim I will approch this by implementing a persistent ARIA live region that remains in the DOM at all times right now what happens is, toast notifications disappear before screen readers can announce them. we can add a hidden <div> with role="status" and aria-live="polite" that gets updated with the toast message content whenever a notification is triggered. This ig screen readers can announce the message even after the visual toast disappears.after this I will verify the fix works with a screen reader, I will make changes in thee approach if requred but this will be my first approach