From 0e1750e215bb132d540b3bd0f98ba68329d829e7 Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Sun, 27 Apr 2025 20:35:50 +0600
Subject: [PATCH] web: use outline for focus ring instead of box-shadow

- prevents conflicts with existing box-shadow(s) on basically all components
- removes the need for data-focus-ring-hidden or any other weird workarounds
---
 web/src/app.css                                  | 12 +++++++-----
 web/src/components/dialog/PickerItem.svelte      |  3 ++-
 web/src/components/donate/DonateShareCard.svelte |  7 ++-----
 3 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/web/src/app.css b/web/src/app.css
index a5d394f0..cb1b36cd 100644
--- a/web/src/app.css
+++ b/web/src/app.css
@@ -14,7 +14,8 @@
     --purple: #5857d4;
     --orange: #f19a38;
 
-    --focus-ring: 0 0 0 2px var(--blue) inset;
+    --focus-ring: solid 2px var(--blue);
+    --focus-ring-offset: -2px;
 
     --button: #f4f4f4;
     --button-hover: #ededed;
@@ -240,13 +241,14 @@ button, .button {
 }
 
 :focus-visible {
-    box-shadow: var(--focus-ring) !important;
     outline: none;
-    z-index: 1;
 }
 
-[data-focus-ring-hidden]:focus-visible {
-    box-shadow: none !important;
+button:focus-visible,
+a:focus-visible {
+    outline: var(--focus-ring);
+    outline-offset: var(--focus-ring-offset);
+    z-index: 1;
 }
 
 .button.elevated {
diff --git a/web/src/components/dialog/PickerItem.svelte b/web/src/components/dialog/PickerItem.svelte
index 64ded001..6fd0ebe0 100644
--- a/web/src/components/dialog/PickerItem.svelte
+++ b/web/src/components/dialog/PickerItem.svelte
@@ -72,7 +72,8 @@
         width: 100%;
         height: 100%;
         position: absolute;
-        box-shadow: var(--focus-ring);
+        outline: var(--focus-ring);
+        outline-offset: var(--focus-ring-offset);
         border-radius: inherit;
     }
 
diff --git a/web/src/components/donate/DonateShareCard.svelte b/web/src/components/donate/DonateShareCard.svelte
index 704d2c4f..92b2ee0e 100644
--- a/web/src/components/donate/DonateShareCard.svelte
+++ b/web/src/components/donate/DonateShareCard.svelte
@@ -162,12 +162,9 @@
         box-shadow: 0 0 0 2px rgba(255, 255, 255, var(--donate-border-opacity));
     }
 
-    #share-qr:focus-visible {
-        box-shadow: none !important;
-    }
-
     #share-qr:focus-visible :global(svg) {
-        box-shadow: 0 0 0 2px var(--blue);
+        outline: var(--focus-ring);
+        outline-offset: var(--focus-ring-offset);
     }
 
     #action-buttons {