fix: resolve the failure of skip-to-content button

[hazuki-keatsu]

Description

The existing skip-to-content button only used an anchor link to scroll to #main-content, but did not move keyboard/screen-reader focus to the main content. This meant that after activation, the focus remained on the skip link itself, failing to actually bypass the header navigation for assistive technology users.

This PR updates Header.astro to properly shift focus by adding a click handler for existing skip-to-content button.

Types of changes

• Bug Fix (non-breaking change which fixes an issue)
• New Feature (non-breaking change which adds functionality)
• Documentation Update (if none of the other choices apply)
• Others (any other types not listed above)

Checklist

• I have read the Contributing Guide
• I have added the necessary documentation (N/A)
• Breaking Change (fix or feature that would cause existing functionality to not work as expected)

[satnaing]

Thanks for tracking this down. Nice catch.
I just left a couple of minor suggestions.

[satnaing]

Can you drop all mb-0.5 in this PR please?
I don't see any problem without having a bottom margin in these layout.

Also, can you add an outline styling to #main-content so that the outline style stays consistent across the site.

You can just add #main-content in global.css just like this

@layer base {
  /* other styles */
  a,
  button,
  #main-content {
    @apply outline-accent outline-offset-1 focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-dashed;
  }
  /* other styles */
}

[hazuki-keatsu]

The Tags page may be a special example without any problem. But in the index page, the outline of main will be covered by the header and the footer: (The first image is from Firefox, and the second one is from Edge)

• Tags:
  

  

• Index
  

  

If you'd rather I not use mb-0.5 everywhere, I'll try your suggestion above.

[hazuki-keatsu]

Without additional margin:

With additional margin:

[satnaing]

If we're sure that only one page is affected, in this case index src/pages/index.astro, it'd be better to add a vertical margin on that page alone.

[hazuki-keatsu]

The only affected pages are src/pages/index.astro and src/pages/404.astro, as they do not use the Breadcrumb and BackButton components. These components add extra bottom margins (mb-1 and mb-2, respectively) which affect the outline spacing of the main element.

So, what's your preference? Would you rather add margins to each affected page individually, instead of applying a single my-1 class to all main-content elements?

[satnaing]

We'll just add extra margins (mb-0.5 if it's ok) in the affected pages.
Then we can update global.css according to my above suggested changes.

[hazuki-keatsu]

OK. I added margins for the affected pages. I used my-1 not my-0.5, as I found the outline will be covered by Header and Footer partially. So I thought my-1 will be the right choice.

[satnaing]

Looks good.
But, I don't see any updates on global.css yet.

[hazuki-keatsu]

I'm very sorry, that was my fault. I forgot to make the changes to global.css. It should be fine now. 😸

[satnaing]

LGTM, thanks.