From 51f4ae3e448ec5a8071757a3567e7455373e9549 Mon Sep 17 00:00:00 2001
From: Monica Wheeler <monica.wheeler@kajabi.com>
Date: Tue, 1 Oct 2024 10:13:50 -0500
Subject: [PATCH] style: convert focus to focus-within (#1985)

---
 .../lib/stylesheets/components/_alert.scss    |  4 +--
 .../lib/stylesheets/components/_button.scss   | 24 ++++++++++-------
 .../lib/stylesheets/components/_checkbox.scss |  4 +--
 .../lib/stylesheets/components/_choice.scss   |  2 +-
 .../lib/stylesheets/components/_dropdown.scss |  3 ++-
 .../lib/stylesheets/components/_link.scss     | 26 +++++++++----------
 .../stylesheets/components/_media_tile.scss   |  2 +-
 .../lib/stylesheets/components/_radio.scss    |  2 +-
 .../lib/stylesheets/components/_tab.scss      | 10 ++++---
 .../lib/stylesheets/components/_tag.scss      |  6 ++---
 .../lib/stylesheets/core/mixins/_sage.scss    |  5 ++--
 11 files changed, 49 insertions(+), 39 deletions(-)

diff --git a/packages/sage-assets/lib/stylesheets/components/_alert.scss b/packages/sage-assets/lib/stylesheets/components/_alert.scss
index d51040e8a5..354bb2fe1d 100644
--- a/packages/sage-assets/lib/stylesheets/components/_alert.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_alert.scss
@@ -172,7 +172,7 @@ $-alert-border-colors: (
       text-decoration: underline;
     }
 
-    &:focus {
+    &:focus-visible {
       @include sage-focus-outline--update-color(sage-color(purple, 30));
     }
   }
@@ -199,7 +199,7 @@ $-alert-border-colors: (
       text-decoration: none;
     }
 
-    &:focus {
+    &:focus-visible {
       @include sage-focus-outline--update-color(sage-color(purple, 30));
     }
   }
diff --git a/packages/sage-assets/lib/stylesheets/components/_button.scss b/packages/sage-assets/lib/stylesheets/components/_button.scss
index 2d11487671..dee431d146 100644
--- a/packages/sage-assets/lib/stylesheets/components/_button.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_button.scss
@@ -524,7 +524,7 @@ a.sage-btn {
         }
       }
       @else if ($-style-type-name == focus) {
-        &:focus,
+        &:focus-visible,
         &:active {
           color: map-get($-style-type-configs, color);
           background-color: map-get($-style-type-configs, background-color);
@@ -562,10 +562,10 @@ a.sage-btn {
         box-shadow: map-get($sage-toolbar-button-borders, hover);
       }
 
-      .sage-toolbar > &:focus,
-      .sage-toolbar > .sage-dropdown .sage-dropdown__trigger &:focus,
-      .sage-toolbar__group > &:focus,
-      .sage-toolbar__group > .sage-dropdown .sage-dropdown__trigger &:focus {
+      .sage-toolbar > &:focus-visible,
+      .sage-toolbar > .sage-dropdown .sage-dropdown__trigger &:focus-visible,
+      .sage-toolbar__group > &:focus-visible,
+      .sage-toolbar__group > .sage-dropdown .sage-dropdown__trigger &:focus-visible {
         z-index: sage-z-index(default, 2);
         box-shadow: map-get($sage-toolbar-button-borders, focus);
       }
@@ -580,8 +580,8 @@ a.sage-btn {
   .sage-toolbar__group > .sage-search ~ &:not(.sage-btn--subtle):not(:disabled):not([aria-disabled="true"]):hover {
     box-shadow: map-get($sage-toolbar-button-borders, hover-large);
   }
-  .sage-toolbar__group > .sage-input ~ &:not(.sage-btn--subtle):not(:disabled):not([aria-disabled="true"]):focus,
-  .sage-toolbar__group > .sage-search ~ &:not(.sage-btn--subtle):not(:disabled):not([aria-disabled="true"]):focus {
+  .sage-toolbar__group > .sage-input ~ &:not(.sage-btn--subtle):not(:disabled):not([aria-disabled="true"]):focus-visible,
+  .sage-toolbar__group > .sage-search ~ &:not(.sage-btn--subtle):not(:disabled):not([aria-disabled="true"]):focus-visible {
     box-shadow: map-get($sage-toolbar-button-borders, focus);
   }
 }
@@ -597,7 +597,11 @@ a.sage-btn {
     border-color: sage-color(charcoal, 100);
   }
 
-  &:focus,
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible,
   &:active {
     color: sage-color(charcoal, 300);
     background-color: sage-color(white);
@@ -755,7 +759,7 @@ a.sage-btn {
       color: sage-color(white);
     }
 
-    &:focus {
+    &:focus-visible {
       color: sage-color(white);
     }
   }
@@ -765,7 +769,7 @@ a.sage-btn {
   &.sage-banner__close.sage-btn--primary {
     color: inherit;
 
-    &:focus,
+    &:focus-visible,
     &:active {
       color: inherit;
 
diff --git a/packages/sage-assets/lib/stylesheets/components/_checkbox.scss b/packages/sage-assets/lib/stylesheets/components/_checkbox.scss
index 343c460a00..81c73ec6ae 100644
--- a/packages/sage-assets/lib/stylesheets/components/_checkbox.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_checkbox.scss
@@ -213,7 +213,7 @@ $-checkbox-focus-outline-color: sage-color(purple, 30);
     background-color: sage-color(grey, 100);
   }
 
-  &:focus:not(:disabled),
+  &:focus-visible:not(:disabled),
   &:active:not(:disabled) {
     outline: none;
     border-color: $-checkbox-focus-outline-color;
@@ -264,7 +264,7 @@ $-checkbox-focus-outline-color: sage-color(purple, 30);
       background-color: $-checkbox-color-error;
     }
 
-    &:focus:not(:disabled),
+    &:focus-visible:not(:disabled),
     &:active:not(:disabled) {
       border-color: $-checkbox-color-error;
     }
diff --git a/packages/sage-assets/lib/stylesheets/components/_choice.scss b/packages/sage-assets/lib/stylesheets/components/_choice.scss
index 59291d8e78..c4a777f18d 100644
--- a/packages/sage-assets/lib/stylesheets/components/_choice.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_choice.scss
@@ -65,7 +65,7 @@ $-choice-radio-color-checked-inner: map-get($sage-radio-colors, checked-inner);
     color: $-choice-color-active;
   }
 
-  &:focus {
+  &:focus-visible {
     border-color: sage-color(purple, 30);
     outline: none;
   }
diff --git a/packages/sage-assets/lib/stylesheets/components/_dropdown.scss b/packages/sage-assets/lib/stylesheets/components/_dropdown.scss
index 12b1d20cad..afa35f8c9c 100644
--- a/packages/sage-assets/lib/stylesheets/components/_dropdown.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_dropdown.scss
@@ -48,7 +48,7 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs);
       background-color: sage-color(white);
     }
 
-    &:focus,
+    &:focus-visible,
     &:focus-within {
       z-index: sage-z-index(default, 2);
       box-shadow: map-get($sage-toolbar-button-borders, focus);
@@ -123,6 +123,7 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs);
   @extend %t-sage-body;
 
   &:active,
+  &:focus-visible,
   &:focus-within {
     outline: none;
 
diff --git a/packages/sage-assets/lib/stylesheets/components/_link.scss b/packages/sage-assets/lib/stylesheets/components/_link.scss
index cc374bd398..37b3142922 100644
--- a/packages/sage-assets/lib/stylesheets/components/_link.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_link.scss
@@ -17,7 +17,7 @@ $-link-base-styles: (
     hover: (
       color: sage-color(primary, 400),
     ),
-    focus: (
+    focus-visible: (
       color: sage-color(primary, 300),
     ),
   ),
@@ -28,7 +28,7 @@ $-link-base-styles: (
     hover: (
       color: sage-color(black),
     ),
-    focus: (
+    focus-visible: (
       color: sage-color(charcoal, 400),
     ),
   ),
@@ -39,7 +39,7 @@ $-link-base-styles: (
     hover: (
       color: sage-color(grey, 100),
     ),
-    focus: (
+    focus-visible: (
       color: sage-color(white),
     ),
   ),
@@ -50,7 +50,7 @@ $-link-base-styles: (
     hover: (
       color: sage-color(red, 400),
     ),
-    focus: (
+    focus-visible: (
       color: sage-color(red, 300),
       focus-outline: sage-color(red, 200),
     ),
@@ -74,7 +74,7 @@ $-link-base-styles: (
     cursor: pointer;
   }
 
-  &:focus {
+  &:focus-visible {
     color: sage-color(primary, 300);
 
     @include sage-focus-outline--update-color(sage-color(purple, 30));
@@ -99,8 +99,8 @@ $-link-base-styles: (
       box-shadow: sage-border-interactive(hover);
     }
 
-    &:focus::before {
-      box-shadow: sage-border-interactive(focus);
+    &:focus-visible::before {
+      box-shadow: sage-border-interactive(focus-visible);
     }
 
     &:active::before {
@@ -111,11 +111,11 @@ $-link-base-styles: (
       box-shadow: sage-border-interactive(error);
     }
 
-    &:focus:invalid::before {
+    &:focus-visible:invalid::before {
       box-shadow: sage-border-interactive(error-focus);
     }
 
-    &:focus::after {
+    &:focus-visible::after {
       border: 0;
     }
 
@@ -137,9 +137,9 @@ $-link-base-styles: (
         }
         /* stylelint-enable max-nesting-depth */
       }
-      @else if ($-style-type-name == focus) {
+      @else if ($-style-type-name == focus-visible) {
         /* stylelint-disable max-nesting-depth */
-        &:focus,
+        &:focus-visible,
         &:active {
           color: map-get($-style-type-configs, color);
 
@@ -178,7 +178,7 @@ $-link-base-styles: (
 
   &:hover,
   &:active,
-  &:focus {
+  &:focus-visible {
     color: inherit;
     outline: 0;
 
@@ -239,7 +239,7 @@ $-link-base-styles: (
     text-decoration: underline;
   }
 
-  &:focus {
+  &:focus-visible {
     color: $-link-subtext-color-hover;
     text-decoration: none;
   }
diff --git a/packages/sage-assets/lib/stylesheets/components/_media_tile.scss b/packages/sage-assets/lib/stylesheets/components/_media_tile.scss
index 0b457bf687..a126277cd5 100644
--- a/packages/sage-assets/lib/stylesheets/components/_media_tile.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_media_tile.scss
@@ -77,7 +77,7 @@ $-media-tile-breakpoints: (
     color: inherit;
   }
 
-  &:focus {
+  &:focus-visible {
     outline: 0;
 
     &::after {
diff --git a/packages/sage-assets/lib/stylesheets/components/_radio.scss b/packages/sage-assets/lib/stylesheets/components/_radio.scss
index 467f9ccca4..1122c0e480 100644
--- a/packages/sage-assets/lib/stylesheets/components/_radio.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_radio.scss
@@ -176,7 +176,7 @@ $-radio-focus-outline-color: currentColor;
     }
   }
 
-  &:focus:not(:disabled),
+  &:focus-visible:not(:disabled),
   &:active:not(:disabled) {
     outline: none;
 
diff --git a/packages/sage-assets/lib/stylesheets/components/_tab.scss b/packages/sage-assets/lib/stylesheets/components/_tab.scss
index 945e590fc3..21a9cfc039 100644
--- a/packages/sage-assets/lib/stylesheets/components/_tab.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_tab.scss
@@ -43,6 +43,10 @@ $-tab-color-disabled: map-get($sage-tab-colors, disabled);
   }
 
   &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
     @include sage-focus-ring();
     border-radius: sage-border(radius-small);
 
@@ -95,11 +99,11 @@ $-tab-color-disabled: map-get($sage-tab-colors, disabled);
       opacity: 0;
     }
 
-    &:focus {
+    &:focus-visible {
       border-radius: sage-border(radius-small);
     }
 
-    &:focus::after,
+    &:focus-visible::after,
     &.sage-tab--active::after {
       opacity: 1;
     }
@@ -124,7 +128,7 @@ $-tab-color-disabled: map-get($sage-tab-colors, disabled);
     border-bottom-right-radius: 0;
     border-bottom-left-radius: 0;
 
-    &:focus {
+    &:focus-visible {
       border-radius: sage-border(radius-small);
     }
   }
diff --git a/packages/sage-assets/lib/stylesheets/components/_tag.scss b/packages/sage-assets/lib/stylesheets/components/_tag.scss
index 295eb8b1f7..e2ef901f1b 100644
--- a/packages/sage-assets/lib/stylesheets/components/_tag.scss
+++ b/packages/sage-assets/lib/stylesheets/components/_tag.scss
@@ -63,7 +63,7 @@ $-tag-button-icon-mobile-size: rem(24px);
     color: $-tag-button-color;
   }
 
-  &:focus {
+  &:focus-visible {
     color: $-tag-button-color;
     border-color: sage-color(primary, 200);
   }
@@ -73,12 +73,12 @@ $-tag-button-icon-mobile-size: rem(24px);
     height: $-tag-button-icon-mobile-size;
   }
 
-  &:not(:focus):hover {
+  &:not(:focus-visible):hover {
     color: inherit;
     background-color: transparent;
   }
 
-  &:not(:focus):hover::after {
+  &:not(:focus-visible):hover::after {
     background-color: transparent;
   }
 }
diff --git a/packages/sage-assets/lib/stylesheets/core/mixins/_sage.scss b/packages/sage-assets/lib/stylesheets/core/mixins/_sage.scss
index 74012ac311..79cd6ccafe 100644
--- a/packages/sage-assets/lib/stylesheets/core/mixins/_sage.scss
+++ b/packages/sage-assets/lib/stylesheets/core/mixins/_sage.scss
@@ -182,7 +182,7 @@
   $focus-width-inner: 1px,
   $focus-width-outter: 3px
 ) {
-  &:focus {
+  &:focus-visible {
     z-index: sage-z-index(default, 1);
     outline: none;
     box-shadow: 0 0 0 $focus-width-inner #fff, 0 0 0 $focus-width-outter $focus-shadow;
@@ -208,6 +208,7 @@
   position: relative;
 
   &:focus,
+  &:focus-visible,
   &:focus-within {
     outline: none;
   }
@@ -234,7 +235,7 @@
     will-change: transform;
   }
 
-  &:focus:not(:disabled):not([aria-disabled="true"]),
+  &:focus-visible:not(:disabled):not([aria-disabled="true"]),
   &:active:not(:disabled):not([aria-disabled="true"]) {
     &::after {
       transform: translate3d(-50%, -50%, 0) scale(1);