From 1234cc10836ace2524ebca2c5f38185f6e04cd71 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Tue, 23 Jul 2024 14:04:19 +0600
Subject: [PATCH] web/settings: focus the page after navigation

mobile: focus page header
desktop: focus page content
---
 web/src/routes/+layout.svelte          | 12 ++++++++++++
 web/src/routes/settings/+layout.svelte | 26 ++++++++++++++++----------
 2 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index 236e844d..53e38e1a 100644
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -366,6 +366,18 @@
         margin-block: 0;
     }
 
+    :global(
+            h1:focus-visible,
+            h2:focus-visible,
+            h3:focus-visible,
+            h4:focus-visible,
+            h5:focus-visible,
+            h6:focus-visible,
+            main:focus-visible
+        ) {
+        box-shadow: none !important;
+    }
+
     :global(h1) {
         font-size: 24px;
         letter-spacing: -1px;
diff --git a/web/src/routes/settings/+layout.svelte b/web/src/routes/settings/+layout.svelte
index b09d24b1..2a356db5 100644
--- a/web/src/routes/settings/+layout.svelte
+++ b/web/src/routes/settings/+layout.svelte
@@ -29,16 +29,17 @@
 
     $: currentPageTitle = $page.url.pathname.split("/").at(-1);
     $: stringPageTitle =
-        currentPageTitle !== "settings" ? ` / ${$t(`settings.page.${currentPageTitle}`)}` : "";
+        currentPageTitle !== "settings"
+            ? ` / ${$t(`settings.page.${currentPageTitle}`)}`
+            : "";
 
     $: isMobile = screenWidth <= 750;
-    $: isHome = $page.url.pathname === '/settings';
+    $: isHome = $page.url.pathname === "/settings";
     $: {
         if (!isMobile && isHome) {
             goto(defaultSettingsPage(), { replaceState: true });
         }
     }
-
 </script>
 
 <svelte:head>
@@ -63,7 +64,12 @@
                         <IconArrowLeft />
                     </a>
                 {/if}
-                <h3 id="settings-page-title" aria-level="1">
+                <h3
+                    id="settings-page-title"
+                    aria-level="1"
+                    data-first-focus
+                    tabindex="-1"
+                >
                     {#if !isHome}
                         {$t(`settings.page.${currentPageTitle}`)}
                     {:else}
@@ -140,16 +146,16 @@
                 {/if}
             </SettingsNavSection>
 
-        {#if isMobile && isHome}
-            <div class="subtext settings-version center">
-                {versionText}
-            </div>
-        {/if}
+            {#if isMobile && isHome}
+                <div class="subtext settings-version center">
+                    {versionText}
+                </div>
+            {/if}
         </nav>
     </div>
 
     {#if !isMobile || !isHome}
-        <main id="settings-page-content">
+        <main id="settings-page-content" data-first-focus tabindex="-1">
             <slot></slot>
         </main>
     {/if}