Docs: next-route-announcer and page transitions

[thebuilder]

What is the improvement or update you wish to see?

The next-route-announcer is a hidden feature in Next.js, and most of the time it will just work without you doing anything.
But, one area where I see a big issue is the moment you're trying to do a page transition. Because you always have to keep the previous page in the DOM until it's animated out, it causes next-route-announcer to update with the title of the page you are leaving, instead of the one you're going to. The result is properly a worse a11y experience, then if it didn't exist.

I've had to do some pretty ugly hacks in the past to get this to work, which included adding an extra h1 to the page so the correct title is picked up. This specific issue can hopefully be avoided after #31147, so you can update the document.title before the page transition occurs. But, since the only way you could know of this feature to begin with is to dig into the source code, most developers will not be aware they need to update the title immediately during a page transition.

• Add a section to the docs about a11y, that outlines what next-route-announcer does, and how you can work with it.
• Ensure the Next.js examples follow these guidelines, and properly update the page title.

Is there any context that might help us understand?

Next.js code examples of page transitions fall into the trap:

• https://github.com/vercel/next.js/tree/canary/examples/with-framer-motion
• https://github.com/vercel/next.js/tree/canary/examples/with-next-page-transitions

If you try to find tutorials on how to do page transitions in Next.js, they all fall into this trap, as will all developers who have followed these guides.

• https://dev.to/ivandotv/full-page-transitions-with-next-js-1co5
• https://wallis.dev/blog/nextjs-page-transitions-with-framer-motion
• https://javascript.plainenglish.io/how-to-create-page-transitions-in-next-js-with-framer-motion-47642c462c62

Does the docs page already exist? Please link to it.

No response

[molebox]

Hey @thebuilder thanks for opening this issue. We have taken a look and it seems there is indeed a bug. We will fix that and also update the documentation to explain how this works. 🙏

[omidantilong]

Hey @molebox did this ever get updated? I've encountered it just now and there's been a recent report of the same bug (#35831)

I can see the <next-route-announcer> getting updated with the previous page's title when navigating to a new one. I had a click around some of the "showcase" sites on the Next homepage and a few of them suffer the same problem. It's really odd 🤔

Thanks :)

[leerob]

As mentioned in the original issue here, #31147 was patched and released.

Further, since then, we now have Accessibility documentation, which talks about route annoucements!

[github-actions]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.