perf: Replace use of :focus-visible shim

All targeted browsers now support :focus-visible. This commit removes
the use of the shim defined in @cloudscape-design/component-toolkit.
Once this change is merged, the shim can be removed.

Author: TrevorBurnham

src/alert/styles.scss

@@ -6,7 +6,6 @@
 @use 'sass:map';
 @use '../internal/styles/tokens' as awsui;
 @use '../internal/styles' as styles;
-@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 @use '../internal/generated/custom-css-properties/index.scss' as custom-props;
 @use '../internal/styles/foundation' as foundation;
 
@@ -82,7 +81,7 @@
   &:focus {
     outline: none;
   }
-  @include focus-visible.when-visible {
+  &:focus-visible {
     @include styles.focus-highlight(
       $gutter: awsui.$space-button-focus-outline-gutter,
       $border-radius: var(#{custom-props.$alertFocusRingBorderRadius}, awsui.$border-radius-control-default-focus-ring),

src/anchor-navigation/styles.scss

@@ -4,7 +4,6 @@
 */
 @use '../internal/styles/tokens' as awsui;
 @use '../internal/styles' as styles;
-@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 @use '../internal/styles/typography/constants.scss' as typography;
 
 $guide-line-width: 2px;
@@ -85,7 +84,7 @@ $guide-line-offset: -2px; // Negative to expand 2px beyond the element
     transition-property: all;
   }
 
-  @include focus-visible.when-visible {
+  &:focus-visible {
     @include styles.link-focus;
   }
 

src/annotation-context/annotation/styles.scss

@@ -5,7 +5,6 @@
 
 @use '../../internal/styles/tokens' as awsui;
 @use '../../internal/styles' as styles;
-@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 @use '../../internal/generated/custom-css-properties/index.scss' as custom-props;
 
 .annotation,
@@ -69,7 +68,7 @@
     outline: none;
   }
 
-  @include focus-visible.when-visible {
+  &:focus-visible {
     @include styles.focus-highlight(2px, awsui.$border-radius-control-circular-focus-ring);
   }
 

src/app-layout/drawer/styles.scss

@@ -4,7 +4,6 @@
 */
 @use '../../internal/styles/tokens' as awsui;
 @use '../../internal/styles' as styles;
-@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 @use '../constants' as constants;
 
 .toggle {

src/app-layout/toggles/styles.scss

@@ -5,7 +5,6 @@
 
 @use '../../internal/styles/tokens' as awsui;
 @use '../../internal/styles' as styles;
-@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 
 .toggle-button {
   cursor: pointer;
@@ -22,7 +21,7 @@
     outline: none;
     text-decoration: none;
   }
-  @include focus-visible.when-visible {
+  &:focus-visible {
     @include styles.focus-highlight(awsui.$space-button-inline-icon-focus-outline-gutter);
   }
 }

src/app-layout/visual-refresh-toolbar/toolbar/trigger-button/styles.scss

@@ -5,7 +5,6 @@
 
 @use '../../../../internal/styles' as styles;
 @use '../../../../internal/styles/tokens' as awsui;
-@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 
 .trigger {
   // reset native <button> tag styles

src/app-layout/visual-refresh/trigger-button.scss

@@ -5,7 +5,6 @@
 
 @use '../../internal/styles' as styles;
 @use '../../internal/styles/tokens' as awsui;
-@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 
 @mixin trigger-selected-styles {
   background: awsui.$color-background-layout-toggle-selected-default;
@@ -69,7 +68,7 @@ handleSplitPanelMaxWidth function in the context.
   pointer-events: auto;
   position: relative;
 
-  @include focus-visible.when-visible {
+  &:focus-visible {
     @include styles.focus-highlight(3px);
   }
 

src/breadcrumb-group/item/styles.scss

@@ -5,7 +5,6 @@
 
 @use '../../internal/styles' as styles;
 @use '../../internal/styles/tokens' as awsui;
-@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 
 .link:after {
   display: none;
@@ -32,7 +31,7 @@
       display: block;
     }
 
-    @include focus-visible.when-visible {
+    &:focus-visible {
       @include styles.link-focus;
     }
   }

src/breadcrumb-group/styles.scss

@@ -5,7 +5,6 @@
 
 @use '../internal/styles' as styles;
 @use '../internal/styles/tokens' as awsui;
-@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 
 .breadcrumb-group {
   @include styles.styles-reset;
@@ -86,7 +85,7 @@
   display: flex;
   gap: awsui.$space-xxs;
   max-inline-size: 100%;
-  @include focus-visible.when-visible {
+  &:focus-visible {
     @include styles.focus-highlight(awsui.$space-button-focus-outline-gutter);
   }
   &:hover {

src/button/styles.scss

@@ -8,7 +8,6 @@
 @use '../internal/styles/tokens' as awsui;
 @use '../internal/styles/foundation' as foundation;
 @use '../internal/generated/custom-css-properties/index.scss' as custom-props;
-@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 @use './constants' as constants;
 
 @mixin adjust-for-variant($variant) {
@@ -84,7 +83,7 @@
     text-decoration: none;
   }
 
-  @include focus-visible.when-visible {
+  &:focus-visible {
     @include styles.focus-highlight(
       $gutter: awsui.$space-button-focus-outline-gutter,
       $border-radius: var(#{custom-props.$styleFocusRingBorderRadius}, awsui.$border-radius-control-default-focus-ring),