feat: improve keyboard accessibility

package.json

@@ -43,7 +43,7 @@
     "@dicebear/initials": "^6.0.4",
     "lemmy-js-client": "^0.18.0-rc.2",
     "markdown-it": "^13.0.1",
-    "mono-svelte": "^0.3.5"
+    "mono-svelte": "^0.3.7"
   },
   "type": "module"
 }

src/routes/+layout.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import Navbar from '$lib/components/ui/Navbar.svelte'
   import '../style/app.css'
-  import { navigating } from '$app/stores'
+  import { navigating, page } from '$app/stores'
   import nProgress from 'nprogress'
   import 'nprogress/nprogress.css'
   import Moderation from '$lib/components/lemmy/moderation/Moderation.svelte'
@@ -10,9 +10,10 @@
   import { pwaInfo } from 'virtual:pwa-info'
   import { inDarkTheme, theme } from '$lib/ui/colors.js'
   import { userSettings } from '$lib/settings.js'
-  import { ToastContainer } from 'mono-svelte'
+  import { Button, ToastContainer } from 'mono-svelte'
   import { onMount } from 'svelte'
   import { browser } from '$app/environment'
+  import { Forward, Icon } from 'svelte-hero-icons'
 
   nProgress.configure({
     minimum: 0.4,
@@ -40,6 +41,13 @@
 
   onMount(() => {
     if (browser) {
+      if (window.location.hash == 'main') {
+        history.replaceState(
+          null,
+          '',
+          window.location.toString().replace('#main', '')
+        )
+      }
       window
         .matchMedia('(prefers-color-scheme: dark)')
         .addEventListener('change', (event) => {
@@ -54,6 +62,14 @@
   {@html webManifest}
 </svelte:head>
 
+<Button
+  class="fixed -top-16 focus:top-0 left-0 m-4 z-[300] transition-all"
+  href="#main"
+>
+  <Icon src={Forward} mini size="16" slot="prefix" />
+  Skip Navigation
+</Button>
+
 <div
   class="flex flex-col min-h-screen
   font-inter
@@ -72,6 +88,7 @@
     <main
       class="p-3 sm:p-6 min-w-0 w-full flex-[3] sm:rounded-tl-lg
       border-slate-200 dark:border-zinc-900 sm:border-l border-t bg-slate-25 dark:bg-zinc-950"
+      id="main"
     >
       <slot />
     </main>

yarn.lock

@@ -3023,10 +3023,18 @@ mlly@^1.2.0, mlly@^1.4.0:
     pkg-types "^1.0.3"
     ufo "^1.1.2"
 
-mono-svelte@^0.3.5:
-  version "0.3.5"
-  resolved "https://registry.yarnpkg.com/mono-svelte/-/mono-svelte-0.3.5.tgz#1b9ae079ea54a1454f014d8ab8571c3a799a530f"
-  integrity sha512-rYOzJ+2T67XL8qLBYiyzUtuRl0eVjF+Fj+odiR3MpL8oSSdXi8up5WN5Ylfh3rxnl5ln1PtzG3PbHLwPWj4Kvw==
+mono-svelte@^0.3.7:
+  version "0.3.7"
+  resolved "https://registry.yarnpkg.com/mono-svelte/-/mono-svelte-0.3.7.tgz#d8100ca072699d672fb951dc33cb9d9f9fb2b60f"
+  integrity sha512-hgxFt7JhaX+jLIQNpbi29XJZ5yuYk3kyCX6sEBsUppxcrT/xqN7ajAm8uXaHg/kSORoiIBR38iHftEMMbeaxgA==
+  dependencies:
+    svelte-focus-trap "^1.2.0"
+    svelte-hero-icons "^5.0.0"
+
+mousetrap@^1.6.5:
+  version "1.6.5"
+  resolved "https://registry.yarnpkg.com/mousetrap/-/mousetrap-1.6.5.tgz#8a766d8c272b08393d5f56074e0b5ec183485bf9"
+  integrity sha512-QNo4kEepaIBwiT8CDhP98umTetp+JNfQYBWvC1pc6/OAibuXtRcxZ58Qz8skvEHYvURne/7R8T5VoOI7rDsEUA==
 
 mri@^1.1.0:
   version "1.2.0"
@@ -3769,6 +3777,13 @@ svelte-check@^3.0.1:
     svelte-preprocess "^5.0.4"
     typescript "^5.0.3"
 
+svelte-focus-trap@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/svelte-focus-trap/-/svelte-focus-trap-1.2.0.tgz#8794510edea7afb527a53c60c1207aa9b9c9cda5"
+  integrity sha512-/hIUHgKcFlewsQreq8v7DYNBkQe7rR0c94PNBOCsmeUwoIYAy6iXJ1pH0k3rWpjwZHKtUxeXbX1iRFlFhipbeg==
+  dependencies:
+    mousetrap "^1.6.5"
+
 svelte-hero-icons@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/svelte-hero-icons/-/svelte-hero-icons-5.0.0.tgz#a3c46156af7c68c70be2350ecfe866b3de4122e0"