fkhadra / fkhadra/react-toastify
Screen reader reads the toast content three times
- 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
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