feat(web): add skip link to top navigation (#7091)

* feat(web): add skip link to top nav

* Styling skip link with tailwind

web/src/lib/components/elements/buttons/button.svelte

@@ -66,6 +66,8 @@
   {disabled}
   {title}
   on:click
+  on:focus
+  on:blur
   class="{className} inline-flex items-center justify-center transition-colors disabled:cursor-not-allowed disabled:opacity-60 {colorClasses[
     color
   ]} {sizeClasses[size]}"

web/src/lib/components/elements/buttons/skip-link.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import Button from './button.svelte';
+
+  /**
+   * Target for the skip link to move focus to.
+   */
+  export let target: string = 'main';
+
+  let isFocused = false;
+
+  const moveFocus = () => {
+    const targetEl = document.querySelector<HTMLElement>(target);
+    targetEl?.focus();
+  };
+</script>
+
+<div class="absolute top-2 left-2 transition-transform {isFocused ? 'translate-y-0' : '-translate-y-10 sr-only'}">
+  <Button
+    size={'sm'}
+    rounded={false}
+    on:click={moveFocus}
+    on:focus={() => (isFocused = true)}
+    on:blur={() => (isFocused = false)}
+  >
+    <slot />
+  </Button>
+</div>