next/link behavior differs from native anchor when linking to fragment identifier
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 142k
- Forks
- 32.4k
- Avg merge
- 2d 14h
- Merged PRs (30d)
- 351
Description
What version of Next.js are you using?
13.1.2
What version of Node.js are you using?
18.12.0
What browser are you using?
Firefox 108, Chrome 108
What operating system are you using?
Ubuntu 22.04
How are you deploying your application?
Other
Describe the Bug
When linking to a fragment identfier with a native anchor, the link target receives focus:
<a href="#skip">Skip to main w/ native anchor</a>
<main id="skip" tabIndex={-1}>
<h1>Main</h1>
</main>
However, when using a next/link, which is recommended, the link target does not receive focus.
Focus behavior is important e.g. for skip links.
Expected Behavior
next/link should focus the fragment link target.
To Reproduce
Run this reproduction: https://github.com/stefanprobst/next-issue-fragment-link
Clicking the first link (w/ next/link) will do nothing, clicking second link will focus <main> (visible as pink background color).
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked reproduction and compare the next/link behavior with the native anchor in Firefox or Chrome. Trace the next/link navigation entry point responsible for fragment handling, then verify that activating the fragment link focuses the target element as the reproduction demonstrates.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, nextjs, react
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100