fkhadra / fkhadra/react-toastify

Screen reader reads the toast content three times

Open
#1,291 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
13.4k
Forks
741
PR merge metrics
No merged PRs in 30d

Description

This can be verified for example with the project https://stackblitz.com/edit/react-toastify-next-js?file=README.md

When you click the notify button the screen reader (NVDA on Windows 11 for me) reads
👋 Hey Next.js!close notification timer
notification 👋 Hey Next.js!
close button
👋 Hey Next.js!close notification timer

The last line is read when the toast is destroyed.

I assume that the reason for repetition is that the library puts 'role' on the toast instead of the toast container. Setting role implicitly makes an element a live region and live regions within live regions cause problems like this.

Contributor guide

Open the contributing guide

Research direction

Start with the linked StackBlitz reproduction and inspect how the toast and toast container assign role and live-region behavior. Confirm the change with NVDA on Windows 11: clicking the notify button should announce the toast content once, and destroying it should not cause another repetition.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
accessibility, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
65/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.