Merge pull request #13278 from rak-phillip/task/tertiary-button-focus

Add focus ring to tertiary buttons
rancher · Feb 5, 2025 · 5a83c03 · 5a83c03
2 parents 29e4b82 + 6b73c3f
commit 5a83c03
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 8 deletions.
diff --git a/shell/assets/styles/base/_basic.scss b/shell/assets/styles/base/_basic.scss
@@ -89,14 +89,6 @@ TEXTAREA,
   }
 }
 
-BUTTON,
-.btn {
-   &:focus, &.focused {
-    outline: none;
-    box-shadow: 0 0 0 var(--outline-width) var(--outline);
-    background: var(--primary-hover-bg);
-   }
-}
 A {
   @include link-color(var(--link), var(--body-text));
 

diff --git a/shell/assets/styles/global/_button.scss b/shell/assets/styles/global/_button.scss
@@ -126,6 +126,11 @@ button,
   &.btn:not(.btn-sm) {
     line-height: $btn-height - 2px;
   }
+
+  &:focus-visible {
+    @include focus-outline;
+    outline-offset: 2px;
+  }
 }
 
 .role-link {