[NEXT-1178] Remove focus from next/link element after page change

Run next info (available from version 12.0.8 and up)

No response

What version of Next.js are you using?

12

What version of Node.js are you using?

14

What browser are you using?

Chrome, Firefox

What operating system are you using?

macOS

How are you deploying your application?

other

Describe the Bug

In Chrome & Firefox, when changing pages using a next/link the clicked anchor remains focused after page change. This causes anchor styles to remain in their focused state.

I found this issue - https://github.com/vercel/next.js/issues/2768 from a few years ago that solved this problem.
This is the PR created by @connor-baer for that issue - https://github.com/vercel/next.js/pull/3545. The solution was to do document.body.focus() on every route change.

However, the issue appears to be back.

Expected Behavior

When changing pages with a next/link the clicked link should no longer have focus after page change.

To Reproduce

Visit this in chrome or firefox and click the header links: https://stackblitz.com/edit/nextjs-js-focus-issue

_NEXT-1178

Start with the linked StackBlitz reproduction and inspect next/link navigation and route-change handling in the Next.js source. Verify the behavior in Chrome and Firefox, then confirm that navigating with a link no longer leaves the clicked anchor focused or visibly styled as focused.