fix(@clayui/css): LPD-45685 Multi Step Nav should use focus-visible

pat270 · pat270 · commit 9a1863683ae5 · 2025-01-10T13:02:15.000-08:00
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
@@ -167,8 +167,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;
+				}
 			}
 		}
 
@@ -260,12 +263,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
@@ -181,8 +181,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;
+				}
 			}
 		}
 
@@ -270,12 +273,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 {

Original file line number	Diff line number	Diff line change
`@@ -167,8 +167,11 @@`
`167`	`167`	`}`
`168`	`168`	`}`
`169`	`169`
`170`		`- &:focus {`
`171`		`- box-shadow: $cadmin-multi-step-icon-disabled-focus-box-shadow;`
	`170`	`+ @at-root {`
	`171`	`+ &.focus,`
	`172`	`+ #{$focus-visible-selector} {`
	`173`	`+ box-shadow: $cadmin-multi-step-icon-disabled-focus-box-shadow;`
	`174`	`+ }`
`172`	`175`	`}`
`173`	`176`	`}`
`174`	`177`
`@@ -260,12 +263,15 @@`
`260`	`263`	`text-decoration: $cadmin-multi-step-icon-hover-text-decoration;`
`261`	`264`	`}`
`262`	`265`
`263`		`- &:focus {`
`264`		`- background-color: $cadmin-multi-step-icon-focus-bg;`
`265`		`- box-shadow: $cadmin-multi-step-icon-focus-box-shadow;`
`266`		`- color: $cadmin-multi-step-icon-focus-color;`
`267`		`- outline: $cadmin-multi-step-icon-focus-outline;`
`268`		`- text-decoration: $cadmin-multi-step-icon-focus-text-decoration;`
	`266`	`+ @at-root {`
	`267`	`+ &.focus,`
	`268`	`+ #{$focus-visible-selector} {`
	`269`	`+ background-color: $cadmin-multi-step-icon-focus-bg;`
	`270`	`+ box-shadow: $cadmin-multi-step-icon-focus-box-shadow;`
	`271`	`+ color: $cadmin-multi-step-icon-focus-color;`
	`272`	`+ outline: $cadmin-multi-step-icon-focus-outline;`
	`273`	`+ text-decoration: $cadmin-multi-step-icon-focus-text-decoration;`
	`274`	`+ }`
`269`	`275`	`}`
`270`	`276`
`271`	`277`	`&[data-multi-step-icon]:before {`
Original file line number	Diff line number	Diff line change
`@@ -181,8 +181,11 @@`
`181`	`181`	`}`
`182`	`182`	`}`
`183`	`183`
`184`		`- &:focus {`
`185`		`- box-shadow: $multi-step-icon-disabled-focus-box-shadow;`
	`184`	`+ @at-root {`
	`185`	`+ &.focus,`
	`186`	`+ #{$focus-visible-selector} {`
	`187`	`+ box-shadow: $multi-step-icon-disabled-focus-box-shadow;`
	`188`	`+ }`
`186`	`189`	`}`
`187`	`190`	`}`
`188`	`191`
`@@ -270,12 +273,15 @@`
`270`	`273`	`text-decoration: $multi-step-icon-hover-text-decoration;`
`271`	`274`	`}`
`272`	`275`
`273`		`- &:focus {`
`274`		`- background-color: $multi-step-icon-focus-bg;`
`275`		`- box-shadow: $multi-step-icon-focus-box-shadow;`
`276`		`- color: $multi-step-icon-focus-color;`
`277`		`- outline: $multi-step-icon-focus-outline;`
`278`		`- text-decoration: $multi-step-icon-focus-text-decoration;`
	`276`	`+ @at-root {`
	`277`	`+ &.focus,`
	`278`	`+ #{$focus-visible-selector} {`
	`279`	`+ background-color: $multi-step-icon-focus-bg;`
	`280`	`+ box-shadow: $multi-step-icon-focus-box-shadow;`
	`281`	`+ color: $multi-step-icon-focus-color;`
	`282`	`+ outline: $multi-step-icon-focus-outline;`
	`283`	`+ text-decoration: $multi-step-icon-focus-text-decoration;`
	`284`	`+ }`
`279`	`285`	`}`
`280`	`286`
`281`	`287`	`&[data-multi-step-icon]::before {`