fix(button): update focus outline and offset (#2449)

eBay · Sep 20, 2024 · b2dfcf1 · b2dfcf1
1 parent ed9a37a
commit b2dfcf1
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 0 deletions.
diff --git a/.changeset/tricky-hats-bake.md b/.changeset/tricky-hats-bake.md
@@ -0,0 +1,5 @@
+---
+"@ebay/skin": minor
+---
+
+fix(button): update focus outline and offset
diff --git a/dist/button/button.css b/dist/button/button.css
@@ -22,6 +22,12 @@ button.btn--fixed-height,
 button.btn--truncated {
     height: 40px;
 }
+a.fake-btn:focus-visible,
+button.btn:focus-visible {
+    outline-offset: var(--spacing-25);
+    outline-style: solid;
+    outline-width: var(--spacing-25);
+}
 a.fake-btn:focus:not(:focus-visible),
 button.btn:focus:not(:focus-visible) {
     outline: none;

diff --git a/dist/cta-button/cta-button.css b/dist/cta-button/cta-button.css
@@ -21,6 +21,11 @@ a.cta-btn--fixed-height,
 a.cta-btn--truncated {
     height: 40px;
 }
+a.cta-btn:focus-visible {
+    outline-offset: var(--spacing-25);
+    outline-style: solid;
+    outline-width: var(--spacing-25);
+}
 a.cta-btn:focus:not(:focus-visible) {
     outline: none;
 }

diff --git a/src/sass/mixins/private/_button-mixins.scss b/src/sass/mixins/private/_button-mixins.scss
@@ -28,6 +28,12 @@ $button-border-radius-large: 24px;
         height: 40px;
     }
 
+    &:focus-visible {
+        outline-offset: var(--spacing-25);
+        outline-style: solid;
+        outline-width: var(--spacing-25);
+    }
+
     /* https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/ */
     &:focus:not(:focus-visible) {
         outline: none;