From 9c1dd373a5da347a2325f788c737d9504680e426 Mon Sep 17 00:00:00 2001
From: Ben Basten <45583362+ben-basten@users.noreply.github.com>
Date: Sun, 18 Feb 2024 03:34:27 +0000
Subject: [PATCH] feat(web): add skip link to top navigation (#7091)

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

* Styling skip link with tailwind
---
 .../components/elements/buttons/button.svelte |  2 ++
 .../elements/buttons/skip-link.svelte         | 27 +++++++++++++++++++
 .../layouts/user-page-layout.svelte           |  1 +
 .../navigation-bar/navigation-bar.svelte      |  2 ++
 .../side-bar/side-bar-section.svelte          |  1 +
 5 files changed, 33 insertions(+)
 create mode 100644 web/src/lib/components/elements/buttons/skip-link.svelte

diff --git a/web/src/lib/components/elements/buttons/button.svelte b/web/src/lib/components/elements/buttons/button.svelte
index dccecccd36..31817f206a 100644
--- 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
new file mode 100644
index 0000000000..457661d65f
--- /dev/null
+++ 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
index bd62ae67eb..197246d385 100644
--- 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
index 2c41742085..3879d6eb1d 100644
--- 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
index 297ada305d..233010153f 100644
--- 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 />