revert: Revert "chore: Use CSS-native :focus-visible to track visible focus state (batch 1)" (#3615)

avinashbot · web-flow · commit dc68a5176a71 · 2025-06-26T11:54:44.000Z
diff --git a/src/alert/styles.scss b/src/alert/styles.scss
@@ -6,6 +6,7 @@
 @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';
 
@@ -75,7 +76,7 @@
   &:focus {
     outline: none;
   }
-  &:focus-visible {
+  @include focus-visible.when-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,6 +4,7 @@
 */
 @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;
@@ -84,7 +85,7 @@ $guide-line-offset: -2px; // Negative to expand 2px beyond the element
     transition-property: all;
   }
 
-  &:focus-visible {
+  @include focus-visible.when-visible {
     @include styles.link-focus;
   }
 
diff --git a/src/annotation-context/annotation/styles.scss b/src/annotation-context/annotation/styles.scss
@@ -5,6 +5,7 @@
 
 @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';
@@ -65,7 +66,7 @@
     outline: none;
   }
 
-  &:focus-visible {
+  @include focus-visible.when-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,6 +5,7 @@
 
 @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;
@@ -31,7 +32,7 @@
       display: block;
     }
 
-    &:focus-visible {
+    @include focus-visible.when-visible {
       @include styles.link-focus;
     }
   }
diff --git a/src/breadcrumb-group/styles.scss b/src/breadcrumb-group/styles.scss
@@ -5,6 +5,7 @@
 
 @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;
@@ -85,7 +86,7 @@
   display: flex;
   gap: awsui.$space-xxs;
   max-inline-size: 100%;
-  &:focus-visible {
+  @include focus-visible.when-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,6 +8,7 @@
 @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) {
@@ -79,7 +80,7 @@
     text-decoration: none;
   }
 
-  &:focus-visible {
+  @include focus-visible.when-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,6 +5,7 @@
 
 @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';
 
@@ -151,7 +152,7 @@
 
     &:focus {
       outline: none;
-      &:focus-visible {
+      @include focus-visible.when-visible {
         @include styles.focus-highlight(
           awsui.$space-calendar-grid-focus-outline-gutter,
           awsui.$border-radius-calendar-day-focus-ring
@@ -168,7 +169,7 @@
       z-index: 2;
       font-weight: styles.$font-weight-bold;
       &:focus {
-        &:focus-visible {
+        @include focus-visible.when-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,6 +5,7 @@
 
 @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,6 +6,7 @@
 @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 */
 
@@ -73,7 +74,7 @@
   .ace_fold-widget,
   .ace_gutter_annotation {
     box-shadow: none;
-    &:focus-visible {
+    @include focus-visible.when-visible {
       @include styles.focus-highlight(-1px);
     }
   }
@@ -144,7 +145,7 @@
 
     .ace_fold-widget,
     .ace_gutter_annotation {
-      &:focus-visible {
+      @include focus-visible.when-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,6 +5,7 @@
 
 @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,6 +5,7 @@
 @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,6 +6,7 @@
 @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';
 
@@ -162,7 +163,7 @@
     }
   }
 
-  &:focus-visible {
+  @include focus-visible.when-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,6 +5,7 @@
 
 @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 {
@@ -21,7 +22,7 @@
   &:focus {
     outline: none;
   }
-  &:focus-visible {
+  @include focus-visible.when-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,6 +5,7 @@
 
 @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) {
@@ -71,7 +72,7 @@
     background-color: transparent;
   }
 
-  &:focus-visible {
+  @include focus-visible.when-visible {
     z-index: 2;
     @include styles.focus-highlight(
       awsui.$space-calendar-grid-focus-outline-gutter,
@@ -161,7 +162,7 @@
   position: relative;
   z-index: 2;
   font-weight: styles.$font-weight-bold;
-  &:focus-visible {
+  @include focus-visible.when-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,6 +5,7 @@
 
 @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';
 
@@ -148,7 +149,7 @@ $calendar-header-color: awsui.$color-text-body-default;
   &:focus {
     outline: none;
   }
-  &:focus-visible {
+  @include focus-visible.when-visible {
     @include styles.container-focus(awsui.$border-radius-dropdown);
   }
 }
diff --git a/src/expandable-section/styles.scss b/src/expandable-section/styles.scss
@@ -4,6 +4,7 @@
 */
 @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';
@@ -144,7 +145,7 @@ $icon-total-space-medium: calc(#{$icon-width-medium} + #{$icon-margin-left} + #{
       padding-inline-start: calc(#{container.$header-padding-horizontal} + #{$icon-total-space-medium});
     }
 
-    &:focus-visible {
+    @include focus-visible.when-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});
@@ -179,7 +180,7 @@ $icon-total-space-medium: calc(#{$icon-width-medium} + #{$icon-margin-left} + #{
 
   &-button,
   &-container-button {
-    &:focus-visible {
+    @include focus-visible.when-visible {
       @include styles.focus-highlight(0px);
     }
   }
@@ -220,7 +221,7 @@ $icon-total-space-medium: calc(#{$icon-width-medium} + #{$icon-margin-left} + #{
         color: awsui.$color-text-expandable-section-hover;
       }
 
-      &:focus-visible {
+      @include focus-visible.when-visible {
         @include styles.focus-highlight(2px);
       }
     }
@@ -268,7 +269,7 @@ $icon-total-space-medium: calc(#{$icon-width-medium} + #{$icon-margin-left} + #{
     text-decoration: none;
   }
 
-  &:focus-visible {
+  @include focus-visible.when-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,6 +7,7 @@
 @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,6 +4,7 @@
 */
 @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;
@@ -313,7 +314,7 @@ the grid layout will be:
       outline: none;
     }
 
-    &:focus-visible {
+    @include focus-visible.when-visible {
       @include styles.focus-highlight(0px);
     }
   }
diff --git a/src/flashbar/styles.scss b/src/flashbar/styles.scss
@@ -3,6 +3,7 @@
  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;
@@ -80,7 +81,7 @@
   &:focus {
     outline: none;
   }
-  &:focus-visible {
+  @include focus-visible.when-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,6 +5,7 @@
 
 @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,6 +6,7 @@`
`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;`
`9`	`10`
`10`	`11`	`@use './motion';`
`11`	`12`
`@@ -75,7 +76,7 @@`
`75`	`76`	`&:focus {`
`76`	`77`	`outline: none;`
`77`	`78`	`}`
`78`		`- &:focus-visible {`
	`79`	`+ @include focus-visible.when-visible {`
`79`	`80`	`@include styles.focus-highlight(awsui.$space-button-focus-outline-gutter);`
`80`	`81`	`}`
`81`	`82`	`}`
Original file line number	Diff line number	Diff line change
`@@ -4,6 +4,7 @@`
`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;`
`7`	`8`	`@use '../internal/styles/typography/constants.scss' as typography;`
`8`	`9`
`9`	`10`	`$guide-line-width: 2px;`
`@@ -84,7 +85,7 @@ $guide-line-offset: -2px; // Negative to expand 2px beyond the element`
`84`	`85`	`transition-property: all;`
`85`	`86`	`}`
`86`	`87`
`87`		`- &:focus-visible {`
	`88`	`+ @include focus-visible.when-visible {`
`88`	`89`	`@include styles.link-focus;`
`89`	`90`	`}`
`90`	`91`
Original file line number	Diff line number	Diff line change
`@@ -5,6 +5,7 @@`
`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;`
`8`	`9`	`@use '../../internal/generated/custom-css-properties/index.scss' as custom-props;`
`9`	`10`
`10`	`11`	`@use './arrow';`
`@@ -65,7 +66,7 @@`
`65`	`66`	`outline: none;`
`66`	`67`	`}`
`67`	`68`
`68`		`- &:focus-visible {`
	`69`	`+ @include focus-visible.when-visible {`
`69`	`70`	`@include styles.focus-highlight(2px, awsui.$border-radius-control-circular-focus-ring);`
`70`	`71`	`}`
`71`	`72`