WRR-4572: Fix Scroller to read out its content properly when it is …

…located in `Panel` (#1699)

* WRR-4572: Fix `Scroller` to read out its content properly when it is located in `Panel`

Enact-DCO-1.0-Signed-off-by: Juwon Jeong (juwon.jeong@lge.com)

* Added qa-sampler

Enact-DCO-1.0-Signed-off-by: Juwon Jeong (juwon.jeong@lge.com)

CHANGELOG.md

@@ -18,6 +18,7 @@ The following is a curated list of changes in the Enact sandstone module, newest
 - `sandstone/Panels.Header` to show title and subtitle properly in `sandstone/WizardPanels`
 - `sandstone/Scroller`, `sandstone/Slider`, and `sandstone/VirtualList` to have default prop when `undefined` prop is passed
 - `sandstone/Scroller` to show scroll indicator when `focusableScrollbar` prop is `true`
+- `sandstone/Scroller` to read out properly when `sandstone/Panels` has `sandstone/Scroller` with `focusableScrollbar`
 - `sandstone/Steps` prop `size` to accept number type
 
 ## [2.9.0] - 2024-07-17

samples/sampler/stories/qa/Panels.js

@@ -436,3 +436,43 @@ WithEditableScroller.parameters = {
 		noPanels: true
 	}
 };
+
+export const WithFocusableScrollbar = () => {
+	const [panelIndex, setPanelIndex] = useState(0);
+
+	const forward = useCallback(() => {
+		setPanelIndex(panelIndex + 1);
+	}, [panelIndex]);
+
+	const backward = useCallback(() => {
+		setPanelIndex(panelIndex - 1);
+	}, [panelIndex]);
+
+	return (
+		<Panels
+			index={panelIndex}
+			noCloseButton
+			onBack={backward}
+		>
+			<Panel aria-label="This is a Panel 0">
+				<Header title="Panel 0" />
+				<Scroller>
+					<Button onClick={forward}>Next</Button>
+				</Scroller>
+			</Panel>
+			<Panel aria-label="This is a Panel 1">
+				<Header title="Panel 1" />
+				<Scroller focusableScrollbar>
+					<Button onClick={backward}>Previous</Button>
+				</Scroller>
+			</Panel>
+		</Panels>
+	);
+};
+
+WithFocusableScrollbar.storyName = 'with focusable scrollbar';
+WithFocusableScrollbar.parameters = {
+	props: {
+		noPanels: true
+	}
+};

useScroll/ScrollbarPlaceholder.js

@@ -37,7 +37,7 @@ const ScrollbarPlaceholder = () => {
 		}, 0); // Wait for unmounting placeholder node.
 	}, []);
 
-	return (showPlaceholder ? (<SpotlightPlaceholder onSpotlightDisappear={resetFocus} data-spotlight-ignore-restore />) : null);
+	return (showPlaceholder ? (<SpotlightPlaceholder aria-hidden onSpotlightDisappear={resetFocus} data-spotlight-ignore-restore />) : null);
 };
 
 ScrollbarPlaceholder.displayName = 'ScrollbarPlaceholder';