Repository: next.js
Issue: [NEXT-1184] moving focus after navigations
Labels: Navigation,linear: next

### Verify canary release

- [X] I verified that the issue exists in the latest Next.js canary release

### Provide environment information

```bash
N/A
```

### Which area(s) of Next.js are affected? (leave empty if unsure)

App directory (appDir: true), Routing (next/router, next/navigation, next/link)

### Link to the code that reproduces this issue

https://github.com/vercel/app-playground

### To Reproduce

Open any Nextjs app, click on any link, then inspect focus - it stays on the link or gets lost if link is no longer on the page. This is more obvious to see if you use keyboard to <kbd>Tab</kbd> to any link then press <kbd>Enter</kbd>.

### Describe the Bug

I've been keeping my eye on the App Router roadmap since it said "Accessibility". Now that it is stable, I see that it announces the page title on every navigation. This is a great first step! However, this is _not_ enough most of the times.

Consider a basic example of a documentation website containing a sidebar and a content area. Now if a keyboard user navigates to a different page using a link in the sidebar, the focus stays on that link even after navigation; any "skip-to-content" links that would normally be near the top of the page (and therefore quick to find) are now several tab stops away. And this is assuming the link is even on the page; if it's not then the focus will get _lost_, which is not ideal at all.

When you look at a regular (non-SPA) website, the browser will reset focus to the top of the page after navigation instead of leaving it somewhere in the middle. This makes sense because it's a new page. Since Nextjs is trying to recreate navigations using client-side JavaScript, I think it would similarly make sense to simulate browser behavior and reset focus. However, even this may not be ideal in complex dynamic apps with nested layouts, because a screen-reader/keyboard user would have to tediously traverse through the lots of elements to get to the part that actually changed.

The "best" solution will differ for different apps and even for different scenarios within the same app. In 2019, there was some very useful user testing done by Marcy Sutton about [accessible client-side routing techniques](https://www.gatsbyjs.com/blog/2019-07-11-user-testing-accessible-client-routing/#recommendations-finding-common-ground) - one of the main suggestions in there was to add a skip-link and move focus to it upon navigation. Today, nextjs does nothing to help with this.

### Expected Behavior

I do not expect Nextjs to magically make the router 100% accessible out-of-the-box, but I _do_ expect at least some (or all) of the following:
- an option (per-link and global) to automatically reset focus to the top of page
- provide info about the topmost nested element that actually changed
- a hook/callback to do manual focus management after each navigation (e.g. gatsby's `onRouteUpdate` / sveltekit's `afterNavigate`)
- a built-in skip-link component that, if present, nextjs can automatically focus after navigations
- provide info about where the focus was before navigation
- provide info about whether the navigation was performed using the Back button and automatically move focus to where it previously was.
- provide info about whether the navigation was performed using mouse or keyboard
- the ability to disable next-route-announcer
- the ability to use regular browser navigations while keeping the "nice" things from `next/link` (such as prefetching)
- guidance and examples on how to use nextjs apis (including any new ones) to do accessible routing

Note: This issue is about **link** navigations, but implementing some of these would also help with making **form** navigations more accessible.

### Which browser are you using? (if relevant)

_No response_

### How are you deploying your application? (if relevant)

_No response_

<sub>[NEXT-1184](https://linear.app/vercel/issue/NEXT-1184/moving-focus-after-navigations)</sub>