Add option to turn off next-route-announcer

[WestonThayer]

Goals

1. Add configuration option to disable next-route-announcer

Non-Goals

1. Disable next-route-announcer by default (it's good that it's on out-of-the-box)

Background

next-route-announcer / https://nextjs.org/docs/accessibility#route-announcements assumes it's strategy of an assertive ARIA live region that announces the page title / h1 / pathname is desirable for all apps.

But many apps explicitly manage focus on route transitions (ex: Slack), moving it between interactive elements. Screen readers and other assistive technologies follow/announce focus, so next-route-announcer adds unnecessary noise to the UX.

Please provide a way to disable next-route-announcer.

Proposal

https://nextjs.org/docs/advanced-features/custom-app or https://nextjs.org/docs/api-reference/next.config.js/introduction seem like natural configuration seem like natural places to configure to me, but I don't feel strongly.

[jussimi]

An ugly workaround is to set the display of the route-announcer to none.

#__next-route-announcer__ {
  display: none;
}

The component remains in the document, but at least screen-readers don't read the content.

[harshtohai]

next-route-announcer{
display:none;
}

add this to global.css and done.

[lucasbasquerotto]

The next-route-announcer component is causing CSP style issues due to not having a way to define a nonce in a configuration for it, at least not that I found (it creates a component <next-route-announcer style="position: absolute"></next-route-announcer>), which means that it seems to not be production ready yet.

CSS workarounds do not solve this issue. The component must not be included in the DOM.

Is there no way to disable it? I keep receiving this error in our production build, and NextJS seems to force this component with no way to disable it.