chore: Use CSS-native :focus-visible to track visible focus state (batch 1) (#3598)

avinashbot · web-flow · commit c28592097a23 · 2025-06-25T12:39:05.000Z
diff --git a/src/alert/styles.scss b/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 './motion';
 
@@ -76,7 +75,7 @@
   &:focus {
     outline: none;
   }
-  @include focus-visible.when-visible {
+  &:focus-visible {
     @include styles.focus-highlight(awsui.$space-button-focus-outline-gutter);
   }
 }
diff --git a/src/anchor-navigation/styles.scss b/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;
   }
 
diff --git a/src/annotation-context/annotation/styles.scss b/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;
 
 @use './arrow';
@@ -66,7 +65,7 @@
     outline: none;
   }
 
-  @include focus-visible.when-visible {
+  &:focus-visible {
     @include styles.focus-highlight(2px, awsui.$border-radius-control-circular-focus-ring);
   }
 
diff --git a/src/breadcrumb-group/item/styles.scss b/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;
     }
   }
diff --git a/src/breadcrumb-group/styles.scss b/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 {
diff --git a/src/button/styles.scss b/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) {
@@ -80,7 +79,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),
diff --git a/src/calendar/styles.scss b/src/calendar/styles.scss
@@ -5,7 +5,6 @@
 
 @use '../internal/styles/index' as styles;
 @use '../internal/styles/tokens' as awsui;
-@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 @use '../internal/styles/typography/index' as typographyConstants;
 @use './motion';
 
@@ -152,7 +151,7 @@
 
     &:focus {
       outline: none;
-      @include focus-visible.when-visible {
+      &:focus-visible {
         @include styles.focus-highlight(
           awsui.$space-calendar-grid-focus-outline-gutter,
           awsui.$border-radius-calendar-day-focus-ring
@@ -169,7 +168,7 @@
       z-index: 2;
       font-weight: styles.$font-weight-bold;
       &:focus {
-        @include focus-visible.when-visible {
+        &:focus-visible {
           @include styles.focus-highlight(
             awsui.$space-calendar-grid-focus-outline-gutter,
             awsui.$border-radius-calendar-day-focus-ring,
diff --git a/src/checkbox/styles.scss b/src/checkbox/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;
 
 $checkbox-size: awsui.$size-control;
 
diff --git a/src/code-editor/ace-editor.scss b/src/code-editor/ace-editor.scss
@@ -6,7 +6,6 @@
 @use '../internal/styles' as styles;
 @use '../internal/styles/tokens' as awsui;
 @use './background-inline-svg.scss' as utils;
-@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 
 /* stylelint-disable selector-combinator-disallowed-list, @cloudscape-design/no-implicit-descendant */
 
@@ -74,7 +73,7 @@
   .ace_fold-widget,
   .ace_gutter_annotation {
     box-shadow: none;
-    @include focus-visible.when-visible {
+    &:focus-visible {
       @include styles.focus-highlight(-1px);
     }
   }
@@ -145,7 +144,7 @@
 
     .ace_fold-widget,
     .ace_gutter_annotation {
-      @include focus-visible.when-visible {
+      &:focus-visible {
         @include styles.focus-highlight(
           -2px,
           awsui.$border-radius-control-default-focus-ring,
diff --git a/src/code-editor/pane.scss b/src/code-editor/pane.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 pane-row-border($border-color) {
   $border: awsui.$border-item-width solid $border-color;
diff --git a/src/code-editor/resizable-box/styles.scss b/src/code-editor/resizable-box/styles.scss
@@ -5,7 +5,6 @@
 @use '../../internal/styles' as styles;
 @use '../../internal/styles/tokens' as awsui;
 @use '../background-inline-svg.scss' as utils;
-@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 
 .resizable-box {
   position: relative;
diff --git a/src/code-editor/styles.scss b/src/code-editor/styles.scss
@@ -6,7 +6,6 @@
 @use '../internal/styles' as styles;
 @use '../internal/styles/tokens' as awsui;
 @use '../internal/styles/foundation' as foundation;
-@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 @use './ace-editor';
 @use './pane';
 
@@ -163,7 +162,7 @@
     }
   }
 
-  @include focus-visible.when-visible {
+  &:focus-visible {
     @include styles.focus-highlight(awsui.$space-code-editor-status-focus-outline-gutter);
   }
 
diff --git a/src/date-picker/styles.scss b/src/date-picker/styles.scss
@@ -5,7 +5,6 @@
 
 @use '../internal/styles/index' as styles;
 @use '../internal/styles/tokens' as awsui;
-@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 @use '../internal/styles/typography/index' as typographyConstants;
 
 .root {
@@ -22,7 +21,7 @@
   &:focus {
     outline: none;
   }
-  @include focus-visible.when-visible {
+  &:focus-visible {
     @include styles.container-focus(awsui.$border-radius-dropdown);
   }
 }
diff --git a/src/date-range-picker/calendar/grids/styles.scss b/src/date-range-picker/calendar/grids/styles.scss
@@ -5,7 +5,6 @@
 
 @use '../../../internal/styles/index' as styles;
 @use '../../../internal/styles/tokens' as awsui;
-@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 @use '../../../calendar/calendar' as calendar;
 
 @mixin border-radius($horizontal, $vertical) {
@@ -72,7 +71,7 @@
     background-color: transparent;
   }
 
-  @include focus-visible.when-visible {
+  &:focus-visible {
     z-index: 2;
     @include styles.focus-highlight(
       awsui.$space-calendar-grid-focus-outline-gutter,
@@ -162,7 +161,7 @@
   position: relative;
   z-index: 2;
   font-weight: styles.$font-weight-bold;
-  @include focus-visible.when-visible {
+  &:focus-visible {
     @include styles.focus-highlight(
       awsui.$space-calendar-grid-selected-focus-outline-gutter,
       awsui.$border-radius-calendar-day-focus-ring,
diff --git a/src/date-range-picker/styles.scss b/src/date-range-picker/styles.scss
@@ -5,7 +5,6 @@
 
 @use '../internal/styles/index' as styles;
 @use '../internal/styles/tokens' as awsui;
-@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 @use '../internal/styles/typography/index' as typographyConstants;
 @use './motion';
 
@@ -149,7 +148,7 @@ $calendar-header-color: awsui.$color-text-body-default;
   &:focus {
     outline: none;
   }
-  @include focus-visible.when-visible {
+  &:focus-visible {
     @include styles.container-focus(awsui.$border-radius-dropdown);
   }
 }
diff --git a/src/expandable-section/styles.scss b/src/expandable-section/styles.scss
@@ -4,7 +4,6 @@
 */
 @use '../internal/styles' as styles;
 @use '../internal/styles/tokens' as awsui;
-@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 @use '../container/shared' as container;
 
 @use './motion';
@@ -145,7 +144,7 @@ $icon-total-space-medium: calc(#{$icon-width-medium} + #{$icon-margin-left} + #{
       padding-inline-start: calc(#{container.$header-padding-horizontal} + #{$icon-total-space-medium});
     }
 
-    @include focus-visible.when-visible {
+    &:focus-visible {
       // HACK: Remediate focus border
       padding-block: calc(#{awsui.$space-scaled-s} - #{awsui.$border-divider-section-width});
       padding-inline: calc(#{awsui.$space-l} - #{awsui.$border-divider-section-width});
@@ -180,7 +179,7 @@ $icon-total-space-medium: calc(#{$icon-width-medium} + #{$icon-margin-left} + #{
 
   &-button,
   &-container-button {
-    @include focus-visible.when-visible {
+    &:focus-visible {
       @include styles.focus-highlight(0px);
     }
   }
@@ -221,7 +220,7 @@ $icon-total-space-medium: calc(#{$icon-width-medium} + #{$icon-margin-left} + #{
         color: awsui.$color-text-expandable-section-hover;
       }
 
-      @include focus-visible.when-visible {
+      &:focus-visible {
         @include styles.focus-highlight(2px);
       }
     }
@@ -269,7 +268,7 @@ $icon-total-space-medium: calc(#{$icon-width-medium} + #{$icon-margin-left} + #{
     text-decoration: none;
   }
 
-  @include focus-visible.when-visible {
+  &:focus-visible {
     @include styles.focus-element-without-border(awsui.$border-radius-control-default-focus-ring);
   }
 }
diff --git a/src/file-token-group/styles.scss b/src/file-token-group/styles.scss
@@ -7,7 +7,6 @@
 @use '../internal/styles' as styles;
 @use './constants' as constants;
 @use '../token-group/mixins.scss' as mixins;
-@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 
 @mixin token-box-validation {
   border-inline-start-width: awsui.$border-invalid-width;
diff --git a/src/flashbar/collapsible.scss b/src/flashbar/collapsible.scss
@@ -4,7 +4,6 @@
 */
 @use 'sass:map';
 @use '../internal/generated/custom-css-properties/index.scss' as custom-props;
-@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 @use '../internal/styles/tokens' as awsui;
 @use '../internal/styles' as styles;
 @use '../internal/styles/typography' as typography;
@@ -314,7 +313,7 @@ the grid layout will be:
       outline: none;
     }
 
-    @include focus-visible.when-visible {
+    &:focus-visible {
       @include styles.focus-highlight(0px);
     }
   }
diff --git a/src/flashbar/styles.scss b/src/flashbar/styles.scss
@@ -3,7 +3,6 @@
  SPDX-License-Identifier: Apache-2.0
 */
 @use '../internal/generated/custom-css-properties/index.scss' as custom-props;
-@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 @use '../internal/styles/tokens' as awsui;
 @use '../internal/styles' as styles;
 @use '../internal/styles/typography' as typography;
@@ -81,7 +80,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.$styleFocusRingBorderRadius}, awsui.$border-radius-control-default-focus-ring),
diff --git a/src/form-field/styles.scss b/src/form-field/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;
 
 @use './motion';
 

Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,6 @@`
`6`	`6`	`@use 'sass:map';`
`7`	`7`	`@use '../internal/styles/tokens' as awsui;`
`8`	`8`	`@use '../internal/styles' as styles;`
`9`		`-@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;`
`10`	`9`
`11`	`10`	`@use './motion';`
`12`	`11`
`@@ -76,7 +75,7 @@`
`76`	`75`	`&:focus {`
`77`	`76`	`outline: none;`
`78`	`77`	`}`
`79`		`- @include focus-visible.when-visible {`
	`78`	`+ &:focus-visible {`
`80`	`79`	`@include styles.focus-highlight(awsui.$space-button-focus-outline-gutter);`
`81`	`80`	`}`
`82`	`81`	`}`
Original file line number	Diff line number	Diff line change
`@@ -4,7 +4,6 @@`
`4`	`4`	`*/`
`5`	`5`	`@use '../internal/styles/tokens' as awsui;`
`6`	`6`	`@use '../internal/styles' as styles;`
`7`		`-@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;`
`8`	`7`	`@use '../internal/styles/typography/constants.scss' as typography;`
`9`	`8`
`10`	`9`	`$guide-line-width: 2px;`
`@@ -85,7 +84,7 @@ $guide-line-offset: -2px; // Negative to expand 2px beyond the element`
`85`	`84`	`transition-property: all;`
`86`	`85`	`}`
`87`	`86`
`88`		`- @include focus-visible.when-visible {`
	`87`	`+ &:focus-visible {`
`89`	`88`	`@include styles.link-focus;`
`90`	`89`	`}`
`91`	`90`
Original file line number	Diff line number	Diff line change
`@@ -5,7 +5,6 @@`
`5`	`5`
`6`	`6`	`@use '../../internal/styles/tokens' as awsui;`
`7`	`7`	`@use '../../internal/styles' as styles;`
`8`		`-@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;`
`9`	`8`	`@use '../../internal/generated/custom-css-properties/index.scss' as custom-props;`
`10`	`9`
`11`	`10`	`@use './arrow';`
`@@ -66,7 +65,7 @@`
`66`	`65`	`outline: none;`
`67`	`66`	`}`
`68`	`67`
`69`		`- @include focus-visible.when-visible {`
	`68`	`+ &:focus-visible {`
`70`	`69`	`@include styles.focus-highlight(2px, awsui.$border-radius-control-circular-focus-ring);`
`71`	`70`	`}`
`72`	`71`