processing / processing/p5.js-web-editor

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

Open
#3,382 7 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Area:Accessibility Bug Priority:High Ready for Work
Dominant language
JavaScript
Stars
1.7k
Forks
1.7k
Avg merge
3d 4h
Merged PRs (30d)
8

Description

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 :)

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the missing announcement in editor.p5js.org with Chrome and a screen reader, then locate the toast implementation and its ARIA live-region behavior. Compare the "Sketch saved" and "autosave enabled" cases; done means toast status messages are announced before disappearing, with coverage for the affected actions if the repository provides tests.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
accessibility, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.