Merge pull request liferay#5913 from pat270/LPD-45685

fix(@clayui/css): LPD-45685 Multi Step Nav should use focus-visible
matuzalemsteles · Jan 13, 2025 · 5454a61 · 5454a61
2 parents dad5a03 + 9a18636
commit 5454a61
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 16 deletions.
diff --git a/packages/clay-css/src/scss/cadmin/components/_multi-step-nav.scss b/packages/clay-css/src/scss/cadmin/components/_multi-step-nav.scss
@@ -173,8 +173,11 @@
 				}
 			}
 
-			&:focus {
-				box-shadow: $cadmin-multi-step-icon-disabled-focus-box-shadow;
+			@at-root {
+				&.focus,
+				#{$focus-visible-selector} {
+					box-shadow: $cadmin-multi-step-icon-disabled-focus-box-shadow;
+				}
 			}
 		}
 
@@ -267,12 +270,15 @@
 		text-decoration: $cadmin-multi-step-icon-hover-text-decoration;
 	}
 
-	&:focus {
-		background-color: $cadmin-multi-step-icon-focus-bg;
-		box-shadow: $cadmin-multi-step-icon-focus-box-shadow;
-		color: $cadmin-multi-step-icon-focus-color;
-		outline: $cadmin-multi-step-icon-focus-outline;
-		text-decoration: $cadmin-multi-step-icon-focus-text-decoration;
+	@at-root {
+		&.focus,
+		#{$focus-visible-selector} {
+			background-color: $cadmin-multi-step-icon-focus-bg;
+			box-shadow: $cadmin-multi-step-icon-focus-box-shadow;
+			color: $cadmin-multi-step-icon-focus-color;
+			outline: $cadmin-multi-step-icon-focus-outline;
+			text-decoration: $cadmin-multi-step-icon-focus-text-decoration;
+		}
 	}
 
 	&[data-multi-step-icon]:before {

diff --git a/packages/clay-css/src/scss/components/_multi-step-nav.scss b/packages/clay-css/src/scss/components/_multi-step-nav.scss
@@ -187,8 +187,11 @@
 				}
 			}
 
-			&:focus {
-				box-shadow: $multi-step-icon-disabled-focus-box-shadow;
+			@at-root {
+				&.focus,
+				#{$focus-visible-selector} {
+					box-shadow: $multi-step-icon-disabled-focus-box-shadow;
+				}
 			}
 		}
 
@@ -277,12 +280,15 @@
 		text-decoration: $multi-step-icon-hover-text-decoration;
 	}
 
-	&:focus {
-		background-color: $multi-step-icon-focus-bg;
-		box-shadow: $multi-step-icon-focus-box-shadow;
-		color: $multi-step-icon-focus-color;
-		outline: $multi-step-icon-focus-outline;
-		text-decoration: $multi-step-icon-focus-text-decoration;
+	@at-root {
+		&.focus,
+		#{$focus-visible-selector} {
+			background-color: $multi-step-icon-focus-bg;
+			box-shadow: $multi-step-icon-focus-box-shadow;
+			color: $multi-step-icon-focus-color;
+			outline: $multi-step-icon-focus-outline;
+			text-decoration: $multi-step-icon-focus-text-decoration;
+		}
 	}
 
 	&[data-multi-step-icon]::before {