Link Component affects tab order when using anchors affecting accessibility

[apricot13]

Link to the code that reproduces this issue

https://codesandbox.io/p/sandbox/modest-babbage-ywzvtv

To Reproduce

I've included a version using <a href="#"> and <Link href="#"> in my example above

Steps to replicate:

• Tab to the any item in the sidebar and hit enter
• Keep hitting tab again

Current vs. Expected behavior

When using plain html links <a href="#"> the behaviour of the page is expected to be: tab to a link with an anchor and hit enter - tabbing continues from that point on the page

When using <Link href="#"> however the behaviour is to continue from where you were tabbing before you hit enter so you lose context, this was flagged in one of our accessibility audits.

The documentation doesn't mention anything special about anchor link functionality

I've tried additional settings eg using /path#anchor instead of #anchor I've also tried href={{ hash: 'anchor' }}.

If you go directly to an anchor link url tabbing begins as expected on both versions

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP PREEMPT_DYNAMIC Sun Aug  6 20:05:33 UTC 2023
  Available memory (MB): 4102
  Available CPU cores: 2
Binaries:
  Node: 20.9.0
  npm: 9.8.1
  Yarn: 1.22.19
  pnpm: 8.10.2
Relevant Packages:
  next: 15.1.1-canary.17 // Latest available version is detected (15.1.1-canary.17).
  eslint-config-next: N/A
  react: 19.0.0
  react-dom: 19.0.0
  typescript: 5.3.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Navigation

Which stage(s) are affected? (Select all that apply)

next dev (local), next build (local), next start (local), Other (Deployed)

Additional context

This was flagged up in our accessibility audit - our fix for now is to use <a href="#">