refactor: code review suggestions

eBay · Sep 18, 2024 · 12f9923 · 12f9923
1 parent 133d1d2
commit 12f9923
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 8 deletions.
diff --git a/dist/button/button.css b/dist/button/button.css
@@ -22,16 +22,15 @@ button.btn--fixed-height,
 button.btn--truncated {
     height: 40px;
 }
-a.fake-btn:focus,
-button.btn:focus {
+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;
-    outline-offset: 0;
 }
 
 button.btn[aria-disabled="true"],

diff --git a/dist/cta-button/cta-button.css b/dist/cta-button/cta-button.css
@@ -21,14 +21,13 @@ a.cta-btn--fixed-height,
 a.cta-btn--truncated {
     height: 40px;
 }
-a.cta-btn:focus {
+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;
-    outline-offset: 0;
 }
 
 a.cta-btn:visited {

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