fix: adds focus outline none back to components with focus visible ap…

…plied (#2006)
Kajabi · Oct 18, 2024 · b5632c3 · b5632c3
1 parent d9b8036
commit b5632c3
Show file tree

Hide file tree

Showing 8 changed files with 32 additions and 4 deletions.
diff --git a/packages/sage-assets/lib/stylesheets/components/_button.scss b/packages/sage-assets/lib/stylesheets/components/_button.scss
@@ -190,6 +190,10 @@ $-btn-loading-min-height: rem(36px);
   transition: $-btn-transition;
   transition-property: border, background-color, box-shadow;
 
+  &:focus {
+    outline: none;
+  }
+
   &:disabled,
   &[aria-disabled="true"] {
     @include sage-button-style-disabled;
@@ -601,10 +605,6 @@ a.sage-btn {
     border-color: sage-color(grey, 300);
   }
 
-  &:focus {
-    outline: none;
-  }
-
   &:focus-visible,
   &:active {
     background-color: sage-color(white);

diff --git a/packages/sage-assets/lib/stylesheets/components/_checkbox.scss b/packages/sage-assets/lib/stylesheets/components/_checkbox.scss
@@ -213,6 +213,10 @@ $-checkbox-focus-outline-color: sage-color(purple, 300);
     background-color: sage-color(grey, 100);
   }
 
+  &:focus:not(:disabled) {
+    outline: none;
+  }
+
   &:focus-visible:not(:disabled),
   &:active:not(:disabled) {
     outline: none;

diff --git a/packages/sage-assets/lib/stylesheets/components/_choice.scss b/packages/sage-assets/lib/stylesheets/components/_choice.scss
@@ -65,6 +65,10 @@ $-choice-radio-color-checked-inner: map-get($sage-radio-colors, checked-inner);
     color: $-choice-color-active;
   }
 
+  &:focus {
+    outline: none;
+  }
+
   &:focus-visible {
     border-color: sage-color(purple, 300);
     outline: none;

diff --git a/packages/sage-assets/lib/stylesheets/components/_dropdown.scss b/packages/sage-assets/lib/stylesheets/components/_dropdown.scss
@@ -122,6 +122,10 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs);
 
   @extend %t-sage-body;
 
+  &:focus {
+    outline: none;
+  }
+
   &:active,
   &:focus-visible,
   &:focus-within {

diff --git a/packages/sage-assets/lib/stylesheets/components/_link.scss b/packages/sage-assets/lib/stylesheets/components/_link.scss
@@ -176,6 +176,10 @@ $-link-base-styles: (
     color: sage-color(grey, 600);
   }
 
+  &:focus {
+    outline: none;
+  }
+
   &:hover,
   &:active,
   &:focus-visible {

diff --git a/packages/sage-assets/lib/stylesheets/components/_media_tile.scss b/packages/sage-assets/lib/stylesheets/components/_media_tile.scss
@@ -77,6 +77,10 @@ $-media-tile-breakpoints: (
     color: inherit;
   }
 
+  &:focus {
+    outline: none;
+  }
+
   &:focus-visible {
     outline: 0;
 

diff --git a/packages/sage-assets/lib/stylesheets/components/_radio.scss b/packages/sage-assets/lib/stylesheets/components/_radio.scss
@@ -176,6 +176,10 @@ $-radio-focus-outline-color: currentColor;
     }
   }
 
+  &:focus:not(:disabled) {
+    outline: none;
+  }
+
   &:focus-visible:not(:disabled),
   &:active:not(:disabled) {
     outline: none;

diff --git a/packages/sage-assets/lib/stylesheets/components/_switch.scss b/packages/sage-assets/lib/stylesheets/components/_switch.scss
@@ -95,6 +95,10 @@ $-switch-toggle-size: rem(16px);
   border-radius: $-switch-border-radius;
   transition: background 0.3s ease-out;
 
+  &:focus {
+    outline: none !important; /* stylelint-disable-line declaration-no-important */
+  }
+
   .sage-switch--has-border & {
     position: absolute;
   }