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

* feat(web): add skip link to top nav * Styling skip link with tailwind
immich-app · Feb 18, 2024 · 9c1dd37 · 9c1dd37
1 parent 70e5feb
commit 9c1dd37
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 0 deletions.
diff --git a/web/src/lib/components/elements/buttons/button.svelte b/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]}"

diff --git a/web/src/lib/components/elements/buttons/skip-link.svelte b/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>
diff --git a/web/src/lib/components/layouts/user-page-layout.svelte b/web/src/lib/components/layouts/user-page-layout.svelte
@@ -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">

diff --git a/web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte b/web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte
@@ -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]"
   >

diff --git a/web/src/lib/components/shared-components/side-bar/side-bar-section.svelte b/web/src/lib/components/shared-components/side-bar/side-bar-section.svelte
@@ -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 />