Merge pull request #5916 from pat270/LPD-45799

fix(@clayui/css): LPD-45799 Cadmin c-prefers-focus should output corr…
liferay · Jan 17, 2025 · 66fede5 · 66fede5
2 parents 6456669 + 346126e
commit 66fede5
Show file tree

Hide file tree

Showing 20 changed files with 70 additions and 391 deletions.
diff --git a/packages/clay-css/src/scss/atlas/variables/_globals.scss b/packages/clay-css/src/scss/atlas/variables/_globals.scss
@@ -22,6 +22,12 @@ $focus-visible-selector: if(
 	'&:focus'
 ) !default;
 
+$c-prefers-focus-selector: if(
+	$enable-focus-visible,
+	'.c-prefers-focus &:focus',
+	''
+);
+
 $enable-lexicon-flat-colors: true !default;
 $enable-scaling-components: true !default;
 $scaling-breakpoint-down: sm !default;

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
@@ -175,7 +175,8 @@
 
 			@at-root {
 				&.focus,
-				#{$focus-visible-selector} {
+				#{$focus-visible-selector},
+				#{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
 					box-shadow: $cadmin-multi-step-icon-disabled-focus-box-shadow;
 				}
 			}
@@ -272,7 +273,8 @@
 
 	@at-root {
 		&.focus,
-		#{$focus-visible-selector} {
+		#{$focus-visible-selector},
+		#{if($c-prefers-focus-selector, $c-prefers-focus-selector, clay-insert-before('.cadmin', '.c-prefers-focus ', '&: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;

diff --git a/packages/clay-css/src/scss/cadmin/variables/_globals.scss b/packages/clay-css/src/scss/cadmin/variables/_globals.scss
@@ -22,6 +22,8 @@ $focus-visible-selector: if(
 	'&:focus'
 ) !default;
 
+$c-prefers-focus-selector: null !default;
+
 $cadmin-scaling-breakpoint-down: sm !default;
 
 // This enables Clay color functions to get the fallback color of a CSS Custom Property, convert it to the correct Sass type color, then process it using the corresponding Sass color function. The Clay color function will return a CSS color value. Set this variable to `false` if you want the Clay color function to return the CSS Custom Property without any modifications.

diff --git a/packages/clay-css/src/scss/cadmin/variables/_multi-step-nav.scss b/packages/clay-css/src/scss/cadmin/variables/_multi-step-nav.scss
@@ -22,9 +22,9 @@ $cadmin-multi-step-icon-hover-bg: $cadmin-multi-step-icon-bg !default;
 $cadmin-multi-step-icon-hover-color: $cadmin-multi-step-icon-color !default;
 $cadmin-multi-step-icon-hover-text-decoration: none !default;
 
-$cadmin-multi-step-icon-focus-bg: $cadmin-multi-step-icon-hover-bg !default;
+$cadmin-multi-step-icon-focus-bg: null !default;
 $cadmin-multi-step-icon-focus-box-shadow: $cadmin-component-focus-box-shadow !default;
-$cadmin-multi-step-icon-focus-color: $cadmin-multi-step-icon-hover-color !default;
+$cadmin-multi-step-icon-focus-color: null !default;
 $cadmin-multi-step-icon-focus-outline: 0 !default;
 $cadmin-multi-step-icon-focus-text-decoration: $cadmin-multi-step-icon-hover-text-decoration !default;
 

diff --git a/packages/clay-css/src/scss/components/_multi-step-nav.scss b/packages/clay-css/src/scss/components/_multi-step-nav.scss
@@ -189,7 +189,8 @@
 
 			@at-root {
 				&.focus,
-				#{$focus-visible-selector} {
+				#{$focus-visible-selector},
+				.c-prefers-focus &:focus {
 					box-shadow: $multi-step-icon-disabled-focus-box-shadow;
 				}
 			}
@@ -282,7 +283,8 @@
 
 	@at-root {
 		&.focus,
-		#{$focus-visible-selector} {
+		#{$focus-visible-selector},
+		.c-prefers-focus &:focus {
 			background-color: $multi-step-icon-focus-bg;
 			box-shadow: $multi-step-icon-focus-box-shadow;
 			color: $multi-step-icon-focus-color;

diff --git a/packages/clay-css/src/scss/functions/_global-functions.scss b/packages/clay-css/src/scss/functions/_global-functions.scss
@@ -170,11 +170,17 @@
 /// @param {String} $selector - The full selector
 
 @function clay-insert-before($location, $insert, $selector: &) {
-	@return clay-str-replace(
-		'#{$selector}',
+	$newSelector: clay-str-replace(
+		'#{&}',
 		'#{$location}',
 		'#{$insert}#{$location}'
 	);
+
+	@if ($selector == '&:focus') {
+		@return '#{$newSelector}:focus';
+	}
+
+	@return $newSelector;
 }
 
 /// A helper function for displaying warning messages for required variables.

diff --git a/packages/clay-css/src/scss/mixins/_buttons.scss b/packages/clay-css/src/scss/mixins/_buttons.scss
@@ -250,31 +250,6 @@
 
 		$breakpoint-down: map-get($map, breakpoint-down);
 
-		$_enable-focus-visible: if(
-			variable-exists(enable-focus-visible),
-			$enable-focus-visible,
-			if(
-				variable-exists(cadmin-enable-focus-visible),
-				$cadmin-enable-focus-visible,
-				true
-			)
-		);
-
-		$_c-prefers-focus-selector: if(
-			$_enable-focus-visible,
-			'.c-prefers-focus &:focus',
-			''
-		);
-
-		@if (variable-exists(cadmin-enable-focus-visible)) and
-			($_enable-focus-visible)
-		{
-			$_c-prefers-focus-selector: clay-insert-before(
-				'.cadmin',
-				'.c-prefers-focus '
-			);
-		}
-
 		$base: map-merge(
 			$map,
 			(
@@ -732,7 +707,7 @@
 			@at-root {
 				&.focus,
 				#{$focus-visible-selector},
-				#{$_c-prefers-focus-selector} {
+				#{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
 					@include clay-css($focus);
 
 					&::before {
@@ -790,7 +765,7 @@
 
 				@at-root {
 					#{$focus-visible-selector},
-					#{$_c-prefers-focus-selector} {
+					#{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
 						@include clay-css($active-focus);
 
 						&::before {
@@ -837,7 +812,7 @@
 
 				@at-root {
 					#{$focus-visible-selector},
-					#{$_c-prefers-focus-selector} {
+					#{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
 						@include clay-css(
 							map-deep-get($map, active-class, focus)
 						);
@@ -881,7 +856,7 @@
 
 				@at-root {
 					#{$focus-visible-selector},
-					#{$_c-prefers-focus-selector} {
+					#{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
 						@include clay-css(map-get($disabled, focus));
 
 						&::before {

diff --git a/packages/clay-css/src/scss/mixins/_cards.scss b/packages/clay-css/src/scss/mixins/_cards.scss
@@ -297,31 +297,6 @@
 	@if (type-of($map) == 'map') {
 		$enabled: setter(map-get($map, enabled), true);
 
-		$_enable-focus-visible: if(
-			variable-exists(enable-focus-visible),
-			$enable-focus-visible,
-			if(
-				variable-exists(cadmin-enable-focus-visible),
-				$cadmin-enable-focus-visible,
-				true
-			)
-		);
-
-		$_c-prefers-focus-selector: if(
-			$_enable-focus-visible,
-			'.c-prefers-focus &:focus',
-			''
-		);
-
-		@if (variable-exists(cadmin-enable-focus-visible)) and
-			($_enable-focus-visible)
-		{
-			$_c-prefers-focus-selector: clay-insert-before(
-				'.cadmin',
-				'.c-prefers-focus '
-			);
-		}
-
 		$base: map-merge(
 			$map,
 			(
@@ -736,7 +711,7 @@
 			@at-root {
 				&.focus,
 				#{$focus-visible-selector},
-				#{$_c-prefers-focus-selector} {
+				#{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
 					@include clay-css($focus);
 
 					&::after {

diff --git a/packages/clay-css/src/scss/mixins/_close.scss b/packages/clay-css/src/scss/mixins/_close.scss
@@ -67,31 +67,6 @@
 	@if (type-of($map) == 'map') {
 		$enabled: setter(map-get($map, enabled), true);
 
-		$_enable-focus-visible: if(
-			variable-exists(enable-focus-visible),
-			$enable-focus-visible,
-			if(
-				variable-exists(cadmin-enable-focus-visible),
-				$cadmin-enable-focus-visible,
-				true
-			)
-		);
-
-		$_c-prefers-focus-selector: if(
-			$_enable-focus-visible,
-			'.c-prefers-focus &:focus',
-			''
-		);
-
-		@if (variable-exists(cadmin-enable-focus-visible)) and
-			($_enable-focus-visible)
-		{
-			$_c-prefers-focus-selector: clay-insert-before(
-				'.cadmin',
-				'.c-prefers-focus '
-			);
-		}
-
 		$base: map-merge(
 			$map,
 			(
@@ -382,7 +357,7 @@
 			@at-root {
 				button#{&} {
 					#{$focus-visible-selector},
-					#{$_c-prefers-focus-selector} {
+					#{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
 						@include clay-css($btn-focus);
 					}
 				}
@@ -391,7 +366,7 @@
 			@at-root {
 				&.focus,
 				#{$focus-visible-selector},
-				#{$_c-prefers-focus-selector} {
+				#{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
 					@include clay-css($focus);
 				}
 			}

diff --git a/packages/clay-css/src/scss/mixins/_custom-forms.scss b/packages/clay-css/src/scss/mixins/_custom-forms.scss
@@ -103,31 +103,6 @@
 	@if (type-of($map) == 'map') {
 		$enabled: setter(map-get($map, enabled), true);
 
-		$_enable-focus-visible: if(
-			variable-exists(enable-focus-visible),
-			$enable-focus-visible,
-			if(
-				variable-exists(cadmin-enable-focus-visible),
-				$cadmin-enable-focus-visible,
-				true
-			)
-		);
-
-		$_c-prefers-focus-selector: if(
-			$_enable-focus-visible,
-			'.c-prefers-focus &:focus',
-			''
-		);
-
-		@if (variable-exists(cadmin-enable-focus-visible)) and
-			($_enable-focus-visible)
-		{
-			$_c-prefers-focus-selector: clay-insert-before(
-				'.cadmin',
-				'.c-prefers-focus '
-			);
-		}
-
 		@if ($enabled) {
 			@include clay-css($map);
 
@@ -167,7 +142,7 @@
 
 			@at-root {
 				#{$focus-visible-selector},
-				#{$_c-prefers-focus-selector} {
+				#{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
 					~ .custom-control-label::before {
 						@include clay-css(
 							map-deep-get(
@@ -427,7 +402,7 @@
 			@at-root {
 				&:checked {
 					#{$focus-visible-selector},
-					#{$_c-prefers-focus-selector} {
+					#{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
 						~ .custom-control-label::before {
 							@include clay-css(
 								map-deep-get(
@@ -657,7 +632,7 @@
 			@at-root {
 				&:indeterminate {
 					#{$focus-visible-selector},
-					#{$_c-prefers-focus-selector} {
+					#{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
 						~ .custom-control-label::before {
 							@include clay-css(
 								map-deep-get(

diff --git a/packages/clay-css/src/scss/mixins/_dropdown-menu.scss b/packages/clay-css/src/scss/mixins/_dropdown-menu.scss
@@ -364,26 +364,6 @@
 			setter(map-get($map, hover-c-kbd-inline), ())
 		);
 
-		$_enable-focus-visible: if(
-			variable-exists(enable-focus-visible),
-			$enable-focus-visible,
-			if(
-				variable-exists(cadmin-enable-focus-visible),
-				$cadmin-enable-focus-visible,
-				true
-			)
-		);
-		$_focus-selector: if(
-			$_enable-focus-visible,
-			'&:focus-visible',
-			'&:focus'
-		);
-		$_prefers-focus-selector: if(
-			$_enable-focus-visible,
-			'.c-prefers-focus &:focus',
-			''
-		);
-
 		$focus: setter(map-get($map, focus), ());
 		$focus: map-deep-merge(
 			$focus,
@@ -656,8 +636,8 @@
 
 			@at-root {
 				&.focus,
-				#{$_focus-selector},
-				#{$_prefers-focus-selector} {
+				#{$focus-visible-selector},
+				#{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
 					@include clay-css($focus);
 
 					&::before {
@@ -738,8 +718,8 @@
 			@at-root {
 				&.btn:not([disabled]):not(.disabled):active,
 				&.btn:not([disabled]):not(.disabled).active {
-					#{$_focus-selector},
-					#{$_prefers-focus-selector} {
+					#{$focus-visible-selector},
+					#{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
 						box-shadow: map-get($focus, box-shadow);
 					}
 				}