vercel / vercel/next.js

next/link behavior differs from native anchor when linking to fragment identifier

Open
#22,838 6 comments 4 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Linking and Navigating not stale
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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.