Fix - FormThemeSwitch focus state now only displays when keyboard nav…

…igation used
freakyleaf · Oct 3, 2023 · 36b4a70 · 36b4a70
1 parent c61fc7b
commit 36b4a70
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 3 deletions.
diff --git a/client/src/scss/partials/components/form/_form-theme-switch.scss b/client/src/scss/partials/components/form/_form-theme-switch.scss
@@ -46,7 +46,7 @@
     padding-right: $spacer-6;
   }
 
-  .form-theme-switch__input:focus + & {
+  .focus-visible .form-theme-switch__input:focus + & {
     @extend %focus-outer;
   }
 }

diff --git a/client/src/scss/partials/setup/_a11y.scss b/client/src/scss/partials/setup/_a11y.scss
@@ -39,7 +39,7 @@ $focusable-box-shadow-focused: 0 0 0 $spacer-2 $color-state-focus;
 %focusable-inner {
   box-shadow: inset $focusable-box-shadow-initial;
 
-  &:focus-visible {
+  .focus-visible & {
     &:focus { // `.focus-visible` is added to `body` with JS when the user is tabbing
       @extend %focus-inner;
     }
@@ -49,7 +49,7 @@ $focusable-box-shadow-focused: 0 0 0 $spacer-2 $color-state-focus;
 %focusable-outer {
   box-shadow: $focusable-box-shadow-initial;
 
-  &:focus-visible {
+  .focus-visible & {
     &:focus { // `.focus-visible` is added to `body` with JS when the user is tabbing
       @extend %focus-outer;
     }