web: global data-focus-ring-hidden attribute

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>

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;

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>

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}

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;