Skip To Content button doesn't work properly

[AnishDe12020]

Update: Opened as an issue in #3105

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.

Details on the code

I have added a button to the layout of my website, that is in `__layout.svelte`. Here is the code:

<script>
  import "../app.css";
  import WipBanner from "../components/wip-banner.svelte";
  import Header from "../components/header.svelte";
  import Footer from "../components/footer.svelte";
  import BackToTop from "../components/back-to-top.svelte";
  import Socials from "../components/socials.svelte";
  import data from "../data.json";
</script>

<div class="max-w-[1920px] mx-auto">
  <a href="#content" class="skip-content-link">Skip To Content</a> <!-- the skip to content button -->
  <BackToTop />
  <WipBanner />
  <Header />
  <slot />
  <Footer />
  <Socials
    socialsData={data.socials}
    classNames="fixed bottom-8 left-8 flex-col space-y-6 hidden md:flex"
    showText
  />
</div>

I have added some styles in app.css for the same:

.skip-content-link {
  position: absolute;
  transform: translateY(-100%);
  background: #1d3dae;
  padding: 1rem 0.5rem;
  border-radius: 0rem 0rem 1rem 0rem;
}

.skip-content-link:focus {
  transform: translateY(0%);
}

At last, I have given the content an id of content in index.svelte so that it can be scrolled down to whenever the skip to content button is engaged:

<main id="content">
  <Hero />
  <BlogPosts blogPosts={data.blogPosts} blogBaseUrl={data.blogBaseUrl} />
  <Projects projects={data.projects} />
  <Skills skillsData={data.skills} />
  <Contact emailAddress={data.emailAddress} />
</main>

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.

I have also hosted it as a preview deployment - https://portfolio-nlaow838l-anishde12020.vercel.app/

The code for this specific feature - https://github.com/AnishDe12020/portfolio/tree/skip-to-content-button

I am not opening an issue because it can also be an issue on my end and not necessarily with SvelteKit. Any help would be appreciated.

[geoffrich]

Everything you're doing seems correct. I think this might be a bug in SvelteKit.

I was implementing this feature on the SvelteKit doc site and ran into the same issue: sveltejs/sites#245. I was able to work around it by setting rel=external on the link, which is an attribute used by SvelteKit. But this attribute shouldn't be necessary outside of SvelteKit.

[AnishDe12020]

That seems to work. Thanks a lot for the help. But, as you mentioned, it is a bug with sveltekit. Maybe we should open an issue for this.

[bluwy]

Yes, please open an issue for this! I don't think navigating by hash should affect focus in any way.

[AnishDe12020]

Sure, opened at #3105