From c5848112bb7c6d5019b783081f537076017d3e1d Mon Sep 17 00:00:00 2001
From: Ben <45583362+ben-basten@users.noreply.github.com>
Date: Thu, 5 Sep 2024 09:24:24 -0400
Subject: [PATCH] feat(web): add skip link to sidebar (#12330)

Co-authored-by: Alex <alex.tran1502@gmail.com>
---
 .../components/elements/buttons/skip-link.svelte   |  4 +++-
 .../lib/components/layouts/user-page-layout.svelte | 14 ++++++++------
 .../navigation-bar/navigation-bar.svelte           |  2 +-
 web/src/lib/i18n/en.json                           |  2 ++
 .../[[photos=photos]]/[[assetId=id]]/+page.svelte  |  4 +++-
 .../[[photos=photos]]/[[assetId=id]]/+page.svelte  |  4 +++-
 6 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/web/src/lib/components/elements/buttons/skip-link.svelte b/web/src/lib/components/elements/buttons/skip-link.svelte
index ae587a72aa..d1ad667379 100644
--- a/web/src/lib/components/elements/buttons/skip-link.svelte
+++ b/web/src/lib/components/elements/buttons/skip-link.svelte
@@ -1,10 +1,12 @@
 <script lang="ts">
+  import { t } from 'svelte-i18n';
   import Button from './button.svelte';
 
   /**
    * Target for the skip link to move focus to.
    */
   export let target: string = 'main';
+  export let text: string = $t('skip_to_content');
 
   let isFocused = false;
 
@@ -22,6 +24,6 @@
     on:focus={() => (isFocused = true)}
     on:blur={() => (isFocused = false)}
   >
-    <slot />
+    {text}
   </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 6511a9deba..5bca13b060 100644
--- a/web/src/lib/components/layouts/user-page-layout.svelte
+++ b/web/src/lib/components/layouts/user-page-layout.svelte
@@ -1,3 +1,7 @@
+<script lang="ts" context="module">
+  export const headerId = 'user-page-header';
+</script>
+
 <script lang="ts">
   import { openFileUploadDialog } from '$lib/utils/file-uploader';
   import NavigationBar from '../shared-components/navigation-bar/navigation-bar.svelte';
@@ -35,16 +39,14 @@
   </slot>
 
   <section class="relative">
-    {#if title || $$slots.title || $$slots.buttons}
+    {#if title || $$slots.buttons}
       <div
         class="absolute flex h-16 w-full place-items-center justify-between border-b p-4 dark:border-immich-dark-gray dark:text-immich-dark-fg"
       >
         <div class="flex gap-2 items-center">
-          <slot name="title">
-            {#if title}
-              <div class="font-medium">{title}</div>
-            {/if}
-          </slot>
+          {#if title}
+            <div class="font-medium" tabindex="-1" id={headerId}>{title}</div>
+          {/if}
           {#if description}
             <p class="text-sm text-gray-400 dark:text-gray-600">{description}</p>
           {/if}
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 b8df9cbbbe..044a81b222 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
@@ -46,7 +46,7 @@
 <svelte:window bind:innerWidth />
 
 <section id="dashboard-navbar" class="fixed z-[900] h-[var(--navbar-height)] w-screen text-sm">
-  <SkipLink>{$t('skip_to_content')}</SkipLink>
+  <SkipLink text={$t('skip_to_content')} />
   <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/i18n/en.json b/web/src/lib/i18n/en.json
index 113998dc89..b8f0032836 100644
--- a/web/src/lib/i18n/en.json
+++ b/web/src/lib/i18n/en.json
@@ -1144,6 +1144,8 @@
   "sign_up": "Sign up",
   "size": "Size",
   "skip_to_content": "Skip to content",
+  "skip_to_folders": "Skip to folders",
+  "skip_to_tags": "Skip to tags",
   "slideshow": "Slideshow",
   "slideshow_settings": "Slideshow settings",
   "sort_albums_by": "Sort albums by...",
diff --git a/web/src/routes/(user)/folders/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/folders/[[photos=photos]]/[[assetId=id]]/+page.svelte
index bbdf86da7f..2cd3d8c9f3 100644
--- a/web/src/routes/(user)/folders/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/folders/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
   import { page } from '$app/stores';
-  import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
+  import UserPageLayout, { headerId } from '$lib/components/layouts/user-page-layout.svelte';
   import GalleryViewer from '$lib/components/shared-components/gallery-viewer/gallery-viewer.svelte';
   import SideBarSection from '$lib/components/shared-components/side-bar/side-bar-section.svelte';
   import TreeItemThumbnails from '$lib/components/shared-components/tree/tree-item-thumbnails.svelte';
@@ -16,6 +16,7 @@
   import { t } from 'svelte-i18n';
   import type { PageData } from './$types';
   import Breadcrumbs from '$lib/components/shared-components/tree/breadcrumbs.svelte';
+  import SkipLink from '$lib/components/elements/buttons/skip-link.svelte';
 
   export let data: PageData;
 
@@ -48,6 +49,7 @@
 
 <UserPageLayout title={data.meta.title}>
   <SideBarSection slot="sidebar">
+    <SkipLink target={`#${headerId}`} text={$t('skip_to_folders')} />
     <section>
       <div class="text-xs pl-4 mb-2 dark:text-white">{$t('explorer').toUpperCase()}</div>
       <div class="h-full">
diff --git a/web/src/routes/(user)/tags/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/tags/[[photos=photos]]/[[assetId=id]]/+page.svelte
index 30f17da15d..a5d3630aa0 100644
--- a/web/src/routes/(user)/tags/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/tags/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -4,7 +4,7 @@
   import Button from '$lib/components/elements/buttons/button.svelte';
   import LinkButton from '$lib/components/elements/buttons/link-button.svelte';
   import Icon from '$lib/components/elements/icon.svelte';
-  import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
+  import UserPageLayout, { headerId } from '$lib/components/layouts/user-page-layout.svelte';
   import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
   import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
   import {
@@ -27,6 +27,7 @@
   import type { PageData } from './$types';
   import { dialogController } from '$lib/components/shared-components/dialog/dialog';
   import Breadcrumbs from '$lib/components/shared-components/tree/breadcrumbs.svelte';
+  import SkipLink from '$lib/components/elements/buttons/skip-link.svelte';
 
   export let data: PageData;
 
@@ -132,6 +133,7 @@
 
 <UserPageLayout title={data.meta.title} scrollbar={false}>
   <SideBarSection slot="sidebar">
+    <SkipLink target={`#${headerId}`} text={$t('skip_to_tags')} />
     <section>
       <div class="text-xs pl-4 mb-2 dark:text-white">{$t('explorer').toUpperCase()}</div>
       <div class="h-full">