fix(@clayui/css): LPD-15615 Add focus style on popover when disableSc…

…roll is enabled
liferay · Jun 14, 2024 · 8fa8734 · 8fa8734
1 parent 47bb642
commit 8fa8734
Show file tree

Hide file tree

Showing 2 changed files with 102 additions and 0 deletions.
diff --git a/packages/clay-css/src/scss/mixins/_popovers.scss b/packages/clay-css/src/scss/mixins/_popovers.scss
@@ -90,6 +90,71 @@
 	@if (type-of($map) == 'map') {
 		$enabled: setter(map-get($map, enabled), true);
 
+		$focus: setter(map-get($map, focus), ());
+		$focus: map-merge(
+			$focus,
+			(
+				background-color:
+					setter(
+						map-get($map, focus-bg),
+						map-get($focus, background-color)
+					),
+				border-color:
+					setter(
+						map-get($map, focus-border-color),
+						map-get($focus, border-color)
+					),
+				border-radius:
+					setter(
+						map-get($map, focus-border-radius),
+						map-get($focus, border-radius)
+					),
+				box-shadow:
+					setter(
+						map-get($map, focus-box-shadow),
+						map-get($focus, box-shadow)
+					),
+				color:
+					setter(map-get($map, focus-color), map-get($focus, color)),
+				opacity:
+					setter(
+						map-get($map, focus-opacity),
+						map-get($focus, opacity)
+					),
+				outline:
+					setter(
+						map-get($map, focus-outline),
+						map-get($focus, outline)
+					),
+				text-decoration:
+					setter(
+						map-get($map, focus-text-decoration),
+						map-get($focus, text-decoration)
+					),
+				z-index:
+					setter(
+						map-get($map, focus-z-index),
+						map-get($focus, z-index)
+					),
+			)
+		);
+
+		$_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 ($enabled) {
 			@include clay-css($map);
 
@@ -122,6 +187,38 @@
 			.close {
 				@include clay-close(map-get($map, close));
 			}
+
+			@at-root {
+				&.focus,
+				#{$focus-visible-selector},
+				#{$_c-prefers-focus-selector} {
+					@include clay-css($focus);
+
+					&::before {
+						@include clay-css(map-get($focus, before));
+					}
+
+					&::after {
+						@include clay-css(map-get($focus, after));
+					}
+
+					.inline-item {
+						@include clay-css(map-get($focus, inline-item));
+					}
+
+					.inline-item-before {
+						@include clay-css(map-get($focus, inline-item-before));
+					}
+
+					.inline-item-middle {
+						@include clay-css(map-get($focus, inline-item-middle));
+					}
+
+					.inline-item-after {
+						@include clay-css(map-get($focus, inline-item-after));
+					}
+				}
+			}
 		}
 	}
 }
diff --git a/packages/clay-css/src/scss/variables/_popovers.scss b/packages/clay-css/src/scss/variables/_popovers.scss
@@ -80,6 +80,11 @@ $popover: map-deep-merge(
 		word-spacing: normal,
 		word-wrap: break-word,
 		z-index: $zindex-popover,
+		focus: (
+			border-radius: 1px,
+			box-shadow: $component-focus-box-shadow,
+			outline: 0,
+		),
 		arrow: (
 			display: block,
 			height: $popover-arrow-height,