sveltejs / sveltejs/svelte.dev
Skip links only work the first time
Nobody has claimed this yet.
- 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
- 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 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