From 1429780a8f8b312e18218e14b13a90566104419d Mon Sep 17 00:00:00 2001
From: Mark Teekman <markteekman@users.noreply.github.com>
Date: Sun, 22 Jan 2023 11:35:43 +0100
Subject: [PATCH] Use SkipLinks component from the provided package

---
 src/components/SkipLinks.vue | 55 ------------------------------------
 src/components/TheHeader.vue |  4 +--
 2 files changed, 2 insertions(+), 57 deletions(-)
 delete mode 100644 src/components/SkipLinks.vue

diff --git a/src/components/SkipLinks.vue b/src/components/SkipLinks.vue
deleted file mode 100644
index 745c8a7..0000000
--- a/src/components/SkipLinks.vue
+++ /dev/null
@@ -1,55 +0,0 @@
-<script setup>
-import { ref } from 'vue'
-
-const skipLinks = ref(null)
-
-const setFocusOnElement = (element) => {
-  element.setAttribute('tabindex', '-1')
-  element.focus()
-}
-
-const skipFocusToContent = (event) => {
-  const target = skipLinks.value.querySelector('a').getAttribute('href')
-
-  if (document.querySelector(target)) {
-    const targetElement = document.querySelector(target)
-    setFocusOnElement(targetElement)
-  } else if (!document.querySelector(target) && document.querySelector('h1')) {
-    const h1 = document.querySelector('h1')
-    setFocusOnElement(h1)
-  } else if (!document.querySelector(target) && !document.querySelector('h1')){
-    const main = document.querySelector('main')
-    setFocusOnElement(main)
-  } else {
-    console.warn('SkipLinks are not set, either missing an h1, main landmark or main content id on the page.')
-  }
-}
-</script>
-
-<template>
-  <div class="skip-links" ref="skipLinks">
-    <a href="#main-content" class="skip-link" @keydown.enter="skipFocusToContent">Skip to main content</a>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.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: 10;
-    top: -100vh;
-    left: 0;
-
-    &:hover,
-    &:focus {
-      top: 0;
-      outline-offset: 2px;
-    }
-  }
-}
-</style>
diff --git a/src/components/TheHeader.vue b/src/components/TheHeader.vue
index d7ea950..c377ca8 100644
--- a/src/components/TheHeader.vue
+++ b/src/components/TheHeader.vue
@@ -1,6 +1,6 @@
 <template>
   <header>
-    <SkipLinks />
+    <SkipLinks>Hello</SkipLinks>
     <TheNavigation />
   </header>
-</template>
\ No newline at end of file
+</template>