-
-
Notifications
You must be signed in to change notification settings - Fork 1.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Focus broken when navigating with hash #3105
Comments
It seems to be because we kit/packages/kit/src/runtime/client/router.js Line 164 in e79cf04
This prevented browser's default sequential focus navigation starting point behaviour. Don't call But it won't work if the target is on another page( Wondering if there's any prior art in other frameworks regarding this. Would like it to work like traditional page navigation. I don't know any dom API that could do this. And we can't just set focus on the target element. As the element might not be focusable and if we make it focusable it might show a focus ring. The only thing I could think of now is to just create a dummy element, insert before the target element, focus it and remove it. |
Looks like we're already detecting "hash navigation with no url change" scenarios at: kit/packages/kit/src/runtime/client/router.js Lines 155 to 162 in e79cf04
I don't remember why we decided to emit a |
#2588 was the motivation for adding
I don't think we really considered that. If that works better I think we could change it. Though according to @jasonlyu123's comment above #3105 (comment) I'm not sure that would fix all cases |
As a note, this affects all navigation by hash, not just skip-to-content links, which makes it much less of an edge case. For instance, if I'm navigating by keyboard around the SvelteKit docs and hit enter on a link to another section of the page (e.g. https://kit.svelte.dev/docs#configuration), the page scrolls to the relevant section, but my focus is reset to the top of the page. This requires me to tab forever to reach the section I was linked to, if I can even find it. This also means that if I'm navigating the docs with a screen reader, all the intra-page links are unusable, since they'll make me lose my spot and reset my position to the top of the page. Essentially, this bug makes experiences like the SvelteKit docs (with lots of hash links inside the page) inaccessible to screen reader and keyboard-only users. |
If we're navigating to another page with a hash, or a page without SSR, I think we had already covered that together with the scrolling logic when we navigate to the new page. I think the only case where this wouldn't work is if we intentionally disable the router, which would be expected behaviour. Might need to double check this though. |
Describe the bug
In an effort to make tab navigation better on my site, I was implementing a skip to content button which would skip the navbar and directly go to the content. I have implemented it as it is normally implemented but I am running into a small problem. Normally, focussing on the skip to content button and then pressing enter gets you to the content, and pressing the tab key after that makes you cycle through the content. In my implementation, I am brought to the skip to content button twice before I can cycle through the site's content.
Reproduction
Add a skip to content link to a page (basically a link that is the first thing to come into focus and shows up when tabbed on landing on the website and else remains hidden). Set the
href
to an id the link points to (usually something likemain
orcontent
that is after that page's navbar/header). Navigate to the site, press tab, press enter, again press tab and the skip to content link will again show up.Logs
System Info
Severity
serious, but I can work around it
Additional Information
Hosted Preview - https://portfolio-nlaow838l-anishde12020.vercel.app/
Source code (THIS SPECIFIC COMMIT) - AnishDe12020/portfolio@d2406ff
Details on the code
I have added a button to the layout of my website, that is in `__layout.svelte`. Here is the code:I have added some styles in
app.css
for the same:At last, I have given the content an
id
ofcontent
inindex.svelte
so that it can be scrolled down to whenever the skip to content button is engaged:Note: I was following this article on css-tricks: https://css-tricks.com/how-to-create-a-skip-to-content-link/
For more context, here is a screen recording -
2021-12-23.22-50-58.mp4
Also, I have tried this on another SvelteKit project and had faced the same issue.
Discussion we are coming from - #3098
Currently using a workaround as suggested in sveltejs/sites#245
The text was updated successfully, but these errors were encountered: