From 2b05a5ce609e270cb417305e08c2b20fcad50684 Mon Sep 17 00:00:00 2001
From: Jacob Berglund <jacob@jberglund.se>
Date: Thu, 12 Dec 2024 11:10:53 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Changed=20from=20:focus=20to=20:?=
 =?UTF-8?q?focus-visible=20to=20avoid=20showing=20outlines=20when=20clicki?=
 =?UTF-8?q?ng=20buttons=20or=20checkboxes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/linkButton/linkButton.module.css             | 6 +++---
 .../sections/testimonials/testimonials.module.css           | 4 ++--
 src/components/tag/tag.module.css                           | 2 +-
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/linkButton/linkButton.module.css b/src/components/linkButton/linkButton.module.css
index 29eabecc0..8269198cc 100644
--- a/src/components/linkButton/linkButton.module.css
+++ b/src/components/linkButton/linkButton.module.css
@@ -37,7 +37,7 @@
   &:hover {
     --_button-radius: var(--_button-hoverRadius);
   }
-  &:focus {
+  &:focus-visible {
     --_button-radius: var(--_button-hoverRadius);
     outline: 2px solid var(--surface-yellow);
     outline-offset: 1px;
@@ -85,7 +85,7 @@
   &:hover {
     --_button-background: var(--background-bg-dark);
   }
-  &:focus {
+  &:focus-visible {
     --_button-border: 1px solid var(--surface-yellow);
   }
   &:active {
@@ -127,7 +127,7 @@
   &:hover {
     --_button-background: var(--background-bg-dark);
   }
-  &:focus {
+  &:focus-visible {
     --_button-border: 1px solid var(--surface-yellow);
   }
   &:active {
diff --git a/src/components/sections/testimonials/testimonials.module.css b/src/components/sections/testimonials/testimonials.module.css
index b9f9fde39..b84ef4128 100644
--- a/src/components/sections/testimonials/testimonials.module.css
+++ b/src/components/sections/testimonials/testimonials.module.css
@@ -114,7 +114,7 @@
     }
   }
 
-  &:focus {
+  &:focus-visible {
     outline: 2px solid var(--stroke-primary);
     border-radius: 0.9375rem;
   }
@@ -179,7 +179,7 @@
     }
   }
 
-  &:focus {
+  &:focus-visible {
     outline: 2px solid #3995ef;
     border-radius: 0.9375rem;
   }
diff --git a/src/components/tag/tag.module.css b/src/components/tag/tag.module.css
index 9f8b84313..cd112129d 100644
--- a/src/components/tag/tag.module.css
+++ b/src/components/tag/tag.module.css
@@ -22,7 +22,7 @@
 .tag:active {
   --_tag-borderColor: var(--background-bg-light-secondary);
 }
-.tag:focus {
+.tag:focus-visible {
   outline: 2px solid var(--surface-yellow, #ffd02f);
 }