feat(web): add skip link to sidebar (#12330)

Co-authored-by: Alex <alex.tran1502@gmail.com>

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>

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}

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