sveltejs / sveltejs/svelte.dev

Skip links only work the first time

Open
#899 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

docs (functionality)
Dominant language
Svelte
Stars
330
Forks
278
Avg merge
2d 2h
Merged PRs (30d)
29

Description

Describe the bug

Skip links that reference to a specifc section inside the same page (eg href="#main) don't work properly when starting at the URL that already includes that id (when already starting at example.com/#main). I ran into the problem that when navigating the website using Tab, when using a skip link while already starting at the said URL, pressing Tab afterwards doesn't focus the first element inside the section I skipped to but instead the next element with a tabindex after the skip link.

The Skip to main content link above the navigation bar on the official svelte website which you can navigate to using Tab, also doesn't work when already starting at #main (eg when this skip link was used earlier), but instead of just focusing the wrong element after using the skip link, the skip link doesn't work at all, but I don't know how to reproduce this exact scenario.

Reproduction
// +page.svelte or +layout.svelte

<a href="#main">Skip to content</a>
<a href="#">Before main</a>

<main id="main">
    <a href="#">Inside main</a>
</main>

When navigating to that site and navigating to the Skip to content link using Tab, using the skip link appends #main to the URL and pressing Tab afterwards focuses the Inside main anchor element as expected. But navigating to the Skip to content link again using Tab (while leaving the URL as is with the #main) and pressing Tab after using the skip link again focuses the Before main anchor element and not the Inside main one.

But in this scenario using the Skip to content link while the URL already contains #main still moves you to #main, while the Skip to main content link on the official svelte website doesn't seem to work at all when the URL already includes #main.

Logs

No response

System Info

beginning of my deno.lock file:

{
    "version": "4",
    "specifiers": {
        "npm:@sveltejs/adapter-auto@3": "3.3.1_@sveltejs+kit@2.8.2__@sveltejs+vite-plugin-svelte@4.0.1___svelte@5.2.7____acorn@8.14.0___vite@5.4.11__svelte@5.2.7___acorn@8.14.0__vite@5.4.11_@sveltejs+vite-plugin-svelte@4.0.1__svelte@5.2.7___acorn@8.14.0__vite@5.4.11_svelte@5.2.7__acorn@8.14.0_vite@5.4.11",
        "npm:@sveltejs/kit@2": "2.8.2_@sveltejs+vite-plugin-svelte@4.0.1__svelte@5.2.7___acorn@8.14.0__vite@5.4.11_svelte@5.2.7__acorn@8.14.0_vite@5.4.11",
        "npm:@sveltejs/vite-plugin-svelte@4": "4.0.1_svelte@5.2.7__acorn@8.14.0_vite@5.4.11",
        "npm:svelte@5": "5.2.7_acorn@8.14.0",
        "npm:vite@5.4.11": "5.4.11",
        "npm:vite@^5.0.3": "5.4.11"
    },
    "npm": {
        "@ampproject/remapping@2.3.0": {
            "integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==",
            "dependencies": [
                "@jridgewell/gen-mapping",
                "@jridgewell/trace-mapping"
            ]
        }
    }
}

I hope inside it is everything that's needed

Browser: Brave: 1.73.91 Chromium: 131.0.6778.85 (Official Build) (64-bit)
OS: Windows 11 Version 23H2 (Build 22631.4317)

Severity

annoyance

Contributor guide

No contributing guide indexed for this repository

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 skip-link reproduction in +page.svelte or +layout.svelte, using the provided anchors and repeated navigation from a URL containing #main. Inspect how focus moves after the second activation, and verify that pressing Tab focuses the first element inside main both with and without an existing fragment in the URL.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
accessibility
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.