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

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

* Styling skip link with tailwind
This commit is contained in:
Ben Basten 2024-02-18 03:34:27 +00:00 committed by GitHub
parent 70e5febb72
commit 9c1dd373a5
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 33 additions and 0 deletions

View file

@ -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>