From 23c9eb73aa53dfadc1a1f0b3292228819f1fb7b9 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Tue, 23 Jul 2024 14:41:55 +0600
Subject: [PATCH] web: global `data-focus-ring-hidden` attribute

---
 web/src/components/misc/Placeholder.svelte |  4 +++-
 web/src/routes/+layout.svelte              | 16 ++++------------
 web/src/routes/+page.svelte                |  7 ++++++-
 web/src/routes/settings/+layout.svelte     | 10 ++++++++--
 web/src/routes/updates/+page.svelte        |  6 +-----
 5 files changed, 22 insertions(+), 21 deletions(-)

diff --git a/web/src/components/misc/Placeholder.svelte b/web/src/components/misc/Placeholder.svelte
index b9a73b1d..167bed1d 100644
--- a/web/src/components/misc/Placeholder.svelte
+++ b/web/src/components/misc/Placeholder.svelte
@@ -6,7 +6,9 @@
 
 <div id="placeholder-container" class="center-column-container">
     <Meowbalt emotion="smile" />
-    <div data-first-focus tabindex="-1">{`${pageName} page is not ready yet!`}</div>
+    <div tabindex="-1" data-first-focus data-focus-ring-hidden>
+        {`${pageName} page is not ready yet!`}
+    </div>
 </div>
 
 <style>
diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index 53e38e1a..ed8ed818 100644
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -319,6 +319,10 @@
         z-index: 1;
     }
 
+    :global([data-focus-ring-hidden]:focus-visible) {
+        box-shadow: none !important;
+    }
+
     :global(button:active, .button:active) {
         background-color: var(--button-hover);
     }
@@ -366,18 +370,6 @@
         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/+page.svelte b/web/src/routes/+page.svelte
index 1e1cc3ff..eebcdec3 100644
--- a/web/src/routes/+page.svelte
+++ b/web/src/routes/+page.svelte
@@ -10,7 +10,12 @@
 </svelte:head>
 
 <div id="cobalt-save-container" class="center-column-container">
-    <main id="cobalt-save" data-first-focus tabindex="-1">
+    <main
+        id="cobalt-save"
+        tabindex="-1"
+        data-first-focus
+        data-focus-ring-hidden
+    >
         <Meowbalt emotion="smile" />
         <Omnibox />
     </main>
diff --git a/web/src/routes/settings/+layout.svelte b/web/src/routes/settings/+layout.svelte
index 2a356db5..d6c485ce 100644
--- a/web/src/routes/settings/+layout.svelte
+++ b/web/src/routes/settings/+layout.svelte
@@ -67,8 +67,9 @@
                 <h3
                     id="settings-page-title"
                     aria-level="1"
-                    data-first-focus
                     tabindex="-1"
+                    data-first-focus
+                    data-focus-ring-hidden
                 >
                     {#if !isHome}
                         {$t(`settings.page.${currentPageTitle}`)}
@@ -155,7 +156,12 @@
     </div>
 
     {#if !isMobile || !isHome}
-        <main id="settings-page-content" data-first-focus tabindex="-1">
+        <main
+            id="settings-page-content"
+            tabindex="-1"
+            data-first-focus
+            data-focus-ring-hidden
+        >
             <slot></slot>
         </main>
     {/if}
diff --git a/web/src/routes/updates/+page.svelte b/web/src/routes/updates/+page.svelte
index 70f4e5ca..c1e0f907 100644
--- a/web/src/routes/updates/+page.svelte
+++ b/web/src/routes/updates/+page.svelte
@@ -70,7 +70,7 @@
 
 <svelte:window on:keydown={handleKeydown} />
 
-<div class="news" data-first-focus tabindex="-1">
+<div class="news" tabindex="-1" data-first-focus data-focus-ring-hidden>
     {#if changelog}
         <div id="left-button" class="button-wrapper-desktop">
             {#if prev}
@@ -135,10 +135,6 @@
         justify-content: space-evenly;
     }
 
-    .news:focus-visible {
-        box-shadow: none !important;
-    }
-
     .button-wrapper-desktop {
         display: flex;
         justify-content: center;