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); }