Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

A11y: Set focus back to body after link was clicked

See original GitHub issue

I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

When navigating from one page to another, the new page should have its focus set on <body> as the document root.

Current Behavior

It’s not like this using next/link. Due to being a single page app the focus remains on the link that has been clicked. The page scrolls to the top to give a visual indication of a page change, but the focus doesn’t change.

Steps to Reproduce (for bugs)

I’ve created an example app to better demonstrate the problem: https://nextjs-focus-problem-zishcmqatc.now.sh/ Its repo is here: https://github.com/osartun/example-focus-problem

Context

I’ve noticed the problem while navigating my site with a screen reader and keyboard input. My site has a Next page link at the bottom of the page (see here, fyi: I fixed the problem with a work around on my site, so you can’t reproduce it there). After clicking and navigating to the next page, tabbing through the links started at the bottom of the page where the Next page link was.

Proposed solution

next/link scrolls to the top of the page after a successful navigation. https://github.com/zeit/next.js/blob/42e21288a91b2f58d90c3cc782766611de30630f/lib/link.js#L77 I think that should be extended with:

document.body.focus();

Issue Analytics

State:
Created 6 years ago
Reactions:3
Comments:5 (1 by maintainers)

Top GitHub Comments

1reaction

connor-baercommented, Jan 25, 2018

@osartun @ppatel221 Since it was such a small change, I took the liberty to fix it. #3545 just got merged. 😊

0reactions

osartuncommented, Jul 13, 2018

@mtrueblood From my understanding it shouldn’t make a difference whether two pages share the same template or not. But would need to try it out to confirm this assumption.