mirror of
https://github.com/immich-app/immich
synced 2025-11-07 17:27:20 +00:00
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:
parent
70e5febb72
commit
9c1dd373a5
5 changed files with 33 additions and 0 deletions
27
web/src/lib/components/elements/buttons/skip-link.svelte
Normal file
27
web/src/lib/components/elements/buttons/skip-link.svelte
Normal 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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue