A11y: Set focus back to body after link was clicked #2768
Comments
timneutkens
added
good first issue
|
Hey, I'm interested in fixing this bug! is it okay if I work on it? |
|
Oh, sorry, I missed your message. For me it's totally ok if you work on it. However, I'm not involved in this project, so I don't make any decisions here. |
|
@osartun @ppatel221 Since it was such a small change, I took the liberty to fix it. #3545 just got merged. 😊 |
|
Question on this: does it matter if the link is pointing to the same page template as the page that it is on? Meaning, page 1 and page 2 both share the same page template. Clicking the link pushes the user to a new URL, but the focus remains on the link of the page. I'm referring to a link in a component that is shared between the 2 different pages, that just happen to share the same page template. Even after the fix of document.body.focus() in #3545, I'm still experiencing this issue. But the above information doesn't mention if the 2 pages are the same page template or not. |
|
@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. |
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/linkscrolls 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:
The text was updated successfully, but these errors were encountered: