cotugno/immich
2
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2024-11-16 02:18:50 -07:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/lib/components/elements/buttons/button.svelte
View File

@ -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]}"

27
web/src/lib/components/elements/buttons/skip-link.svelte Normal file
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>

1
web/src/lib/components/layouts/user-page-layout.svelte
View File

@ -23,6 +23,7 @@
<slot name="header" />
</header>
<main
tabindex="-1"
class="relative grid h-screen grid-cols-[theme(spacing.18)_auto] overflow-hidden bg-immich-bg pt-[var(--navbar-height)] dark:bg-immich-dark-bg md:grid-cols-[theme(spacing.64)_auto]"
>
<slot name="sidebar">

2
web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte
View File

@ -3,6 +3,7 @@
import { page } from '$app/stores';
import IconButton from '$lib/components/elements/buttons/icon-button.svelte';
import LinkButton from '$lib/components/elements/buttons/link-button.svelte';
import SkipLink from '$lib/components/elements/buttons/skip-link.svelte';
import Icon from '$lib/components/elements/icon.svelte';
import { featureFlags } from '$lib/stores/server-config.store';
import { resetSavedUser, user } from '$lib/stores/user.store';
@ -39,6 +40,7 @@
</script>
<section id="dashboard-navbar" class="fixed z-[900] h-[var(--navbar-height)] w-screen text-sm">
<SkipLink>Skip to content</SkipLink>
<div
class="grid h-full grid-cols-[theme(spacing.18)_auto] items-center border-b bg-immich-bg py-2 dark:border-b-immich-dark-gray dark:bg-immich-dark-bg md:grid-cols-[theme(spacing.64)_auto]"
>

1
web/src/lib/components/shared-components/side-bar/side-bar-section.svelte
View File

@ -3,6 +3,7 @@
<section
id="sidebar"
tabindex="-1"
class="immich-scrollbar group relative z-10 flex w-18 flex-col gap-1 overflow-y-auto bg-immich-bg pt-8 transition-all duration-200 dark:bg-immich-dark-bg hover:sm:w-64 hover:sm:border-r hover:sm:pr-6 hover:sm:shadow-2xl hover:sm:dark:border-r-immich-dark-gray md:w-64 md:pr-6 hover:md:border-none hover:md:shadow-none"
>
<slot />