SkipLinks.astro

---
type Props = Record<string, never>
---

<div class="skip-links">
  <a href="#main-content">Skip to main content</a>
</div>

<script type="module">
  // variables
  const skipLink = document.querySelector('.skip-links a')

  // execution
  skipLink.addEventListener('keydown', (event) => {
    if (!event.target.closest('a')) return
    const key = event.key

    if (key !== 'Enter') return
    event.preventDefault()
    const target = event.target.getAttribute('href')

    if (document.querySelector(target)) {
      const targetElement = document.querySelector(target)
      targetElement.setAttribute('tabindex', '-1')
      targetElement.focus()
    } else if (!document.querySelector(target) && document.querySelector('h1')) {
      const h1 = document.querySelector('h1')
      h1.setAttribute('tabindex', '-1')
      h1.focus()
    } else {
      console.warn('SkipLinks are not set, either missing an h1 or main content id on the page.')
    }
  })
</script>

<style is:global>
  .skip-links a {
    color: var(--action-color, #222);
    background-color: var(--background, #fff);
    border-bottom-right-radius: 6px;
    padding: 1rem 3.25rem;
    position: absolute;
    display: block;
    z-index: 9999;
    top: -100vh;
    left: 0;
  }

  .skip-links a:hover,
  .skip-links a:focus {
    top: 0;
    outline-offset: 2px;
  }
</style>