Skip links only work the first time

[Vulcagon]

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_@[email protected]__@[email protected][email protected][email protected][email protected][email protected][email protected][email protected]_@[email protected][email protected][email protected][email protected][email protected][email protected][email protected]",
        "npm:@sveltejs/kit@2": "2.8.2_@[email protected][email protected][email protected][email protected][email protected][email protected][email protected]",
        "npm:@sveltejs/vite-plugin-svelte@4": "[email protected][email protected][email protected]",
        "npm:svelte@5": "[email protected]",
        "npm:[email protected]": "5.4.11",
        "npm:vite@^5.0.3": "5.4.11"
    },
    "npm": {
        "@ampproject/[email protected]": {
            "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

[benmccann]

svelte.dev/packages/site-kit/src/lib/nav/SkipLink.svelte

Line 11 in 8aa34c1

{#if children}{@render children()}{:else}Skip to main content{/if}