Merge pull request #5833 from ilzamcmed/LPD-15615

fix(@clayui/popover): LPD-15615 Popover: focus is not redirected to popover when disableScroll prop is true

packages/clay-css/src/scss/cadmin/variables/_popovers.scss

@@ -80,6 +80,10 @@ $cadmin-popover: map-deep-merge(
 		word-spacing: normal,
 		word-wrap: break-word,
 		z-index: $cadmin-zindex-popover,
+		focus: (
+			box-shadow: $cadmin-component-focus-box-shadow,
+			outline: 0,
+		),
 		arrow: (
 			display: block,
 			height: $cadmin-popover-arrow-height,

packages/clay-css/src/scss/mixins/_popovers.scss

@@ -90,6 +90,31 @@
 	@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);
 
@@ -122,6 +147,14 @@
 			.close {
 				@include clay-close(map-get($map, close));
 			}
+
+			@at-root {
+				&.focus,
+				#{$focus-visible-selector},
+				#{$_c-prefers-focus-selector} {
+					@include clay-popover-variant(map-get($map, focus));
+				}
+			}
 		}
 	}
 }

packages/clay-css/src/scss/variables/_popovers.scss

@@ -80,6 +80,10 @@ $popover: map-deep-merge(
 		word-spacing: normal,
 		word-wrap: break-word,
 		z-index: $zindex-popover,
+		focus: (
+			box-shadow: $component-focus-box-shadow,
+			outline: 0,
+		),
 		arrow: (
 			display: block,
 			height: $popover-arrow-height,

packages/clay-popover/src/__tests__/__snapshots__/index.tsx.snap

@@ -72,6 +72,7 @@ exports[`ClayPopover renders without scroll 1`] = `
 <div>
   <div
     class="popover clay-popover-bottom"
+    tabindex="-1"
   >
     <div
       class="arrow"

packages/clay-popover/src/index.tsx

@@ -206,7 +206,11 @@ const ClayPopover = React.forwardRef<HTMLDivElement, IProps>(
 			if (!disableScroll && popoverScrollerRef.current && internalShow) {
 				popoverScrollerRef.current.focus();
 			}
-		}, [disableScroll, popoverScrollerRef, internalShow]);
+
+			if (disableScroll && popoverRef.current && internalShow) {
+				popoverRef.current.focus();
+			}
+		}, [disableScroll, popoverRef, popoverScrollerRef, internalShow]);
 
 		useEffect(() => {
 			if (closeOnClickOutside && trigger) {
@@ -300,6 +304,7 @@ const ClayPopover = React.forwardRef<HTMLDivElement, IProps>(
 				)}
 				ref={ref as React.RefObject<HTMLDivElement>}
 				{...otherProps}
+				tabIndex={disableScroll ? -1 : undefined}
 			>
 				<div className="arrow" />