vercel
accessibility: next-route-announcer bug report
Verify canary release
- [X] I verified that the issue exists in Next.js canary release
Provide environment information
Hello. As you know next.js support accessibility features for new page load screen reader notification with next-route-announcer. This feature is very helpful to screen readder user because even if new page loads, there is no DOM refresh, screen reader does not give any feedback. However this announcer have some bugs.
- Once I press the navigation link, announcer get document title text. It have role alert and aria-live polite, screen reader speak the text. But in some cases, announcer get prior page title text. After that, once I press another navigation link, it gets prior title text continuously. I will demonstrate this with video.
- Announcer text is like toast message for screen reader user. But The text is not disappeared. So screen reader user can detet toast text bottom of virtual buffer. It is confusing because this is just notification, so the text should be disappeared after some second later. You can view this issue with mp4 video that I attached. Please check this issue. thank you. sample with video.zip
Which example does this report relate to?
This is a accessibility and screen reader related issue.
What browser are you using? (if relevant)
No response
How are you deploying your application? (if relevant)
No response
Describe the Bug
- SomeTimes, announcer gets wrong page title text.
- Toast message is not disappeared.
Expected Behavior
- After new page load, announcer should get title text some seconds later, for example, 0.5.
- Role alert is not required, just aria-live is sufficient.
- After get title text, the text should be removed after 3 second.
To Reproduce
I attached zip file. You can reproduce my sample page with screen reader such as NVDA. Also you can watch the video.
For item 2, the new app-router-announcer avoids the issue by hiding the announcer inside a Shadow DOM element:
https://github.com/vercel/next.js/blob/cd70065bad00cb9d3b0e7c9a94ee9241e3c5f5d8/packages/next/src/client/components/app-router-announcer.tsx#L22-L25
…where it will be announced by a screen reader but not read as part of the page content. A fix for next-route-announcer, I think, could do the same thing.
