diff --git a/samples/qa-a11y/src/views/Scroller.js b/samples/qa-a11y/src/views/Scroller.js
index da90e393ba..2eb95462ed 100644
--- a/samples/qa-a11y/src/views/Scroller.js
+++ b/samples/qa-a11y/src/views/Scroller.js
@@ -1,18 +1,58 @@
 /* eslint-disable react/jsx-no-bind */
 
 import Scroller from '@enact/sandstone/Scroller';
+import SpotlightContainerDecorator from '@enact/spotlight/SpotlightContainerDecorator';
+import Spottable from '@enact/spotlight/Spottable';
 import ToggleButton from '@enact/sandstone/SwitchItem';
 import Layout, {Cell} from '@enact/ui/Layout';
 import ri from '@enact/ui/resolution';
-import {useState} from 'react';
+import {Fragment, useState} from 'react';
+
+import css from './Scroller.module.less';
 
 const ScrollerView = () => {
-	const [native, setNative] = useState(true);
+	const [spottable, setSpottable] = useState(false);
 	const [customAriaLabel, setCustomAriaLabel] = useState(false);
+	const [native, setNative] = useState(true);
 	const scrollMode = native ? 'native' : 'translate';
 
 	const handleChangeJSNativeButton = () => setNative(!native);
 	const handleChangeAriaLabelButton = () => setCustomAriaLabel(!customAriaLabel);
+	const handleChangeSpottableButton = () => setSpottable(!spottable);
+
+	const bodyText = [
+		<>Foo<br />Bar<br />Bar<br />Boom boom pow<br /></>,
+		<>Foo<br />Bar<br />Boom boom pow<br /></>,
+		<>Foo<br />Bar<br />Boom boom pow<br /></>,
+		<>Foo<br />Bar<br />Boom boom pow<br /></>,
+		<>Foo<br />Bar<br />Boom boom pow<br /></>,
+		<>Foo<br />Bar<br /></>,
+		<>Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. <br /></>,
+		<>Foo<br />Bar<br />Bar<br />Boom boom pow<br /></>,
+		<>Foo<br />Bar<br />Boom boom pow<br /></>,
+		<>Foo<br />Bar<br />Boom boom pow<br /></>,
+		<>Foo<br />Bar<br />Boom boom pow<br /></>,
+		<>Foo<br />Bar<br />Boom boom pow<br /></>,
+		<>Foo<br />Bar<br /></>,
+		<>Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. <br /></>,
+		<>Foo<br />Bar<br />Bar<br />Boom boom pow<br /></>,
+		<>Foo<br />Bar<br />Boom boom pow<br /></>,
+		<>Foo<br />Bar<br />Boom boom pow<br /></>,
+		<>Foo<br />Bar<br />Boom boom pow<br /></>,
+		<>Foo<br />Bar<br />Boom boom pow<br /></>,
+		<>Foo<br />Bar<br /></>,
+		<>Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. <br /></>,
+		<>Foo<br />Bar<br />Bar<br />Boom boom pow<br /></>,
+		<>Foo<br />Bar<br />Boom boom pow<br /></>,
+		<>Foo<br />Bar<br />Boom boom pow<br /></>,
+		<>Foo<br />Bar<br />Boom boom pow<br /></>,
+		<>Foo<br />Bar<br />Boom boom pow<br /></>,
+		<>Foo<br />Bar<br /></>,
+		<>Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. <br /></>
+	];
+
+	const Container = SpotlightContainerDecorator({enterTo: 'last-focused'}, 'div');
+	const SpottableDiv = Spottable('div');
 
 	return (
 		<Layout orientation="vertical">
@@ -29,34 +69,27 @@ const ScrollerView = () => {
 				>
 					Native
 				</ToggleButton>
+				<ToggleButton
+					onClick={handleChangeSpottableButton}
+					selected={spottable}
+				>
+					Scroller with Spottable
+				</ToggleButton>
 			</Cell>
 			<Cell
 				component={Scroller}
-				focusableScrollbar="byEnter"
+				focusableScrollbar={spottable ? false : "byEnter"}
 				scrollMode={scrollMode}
 				verticalScrollThumbAriaLabel={customAriaLabel ? 'This is vertical scroll thumb' : null}
 				horizontalScrollThumbAriaLabel={customAriaLabel ? 'This is horizontal scroll thumb' : null}
 			>
-				<div style={{width: ri.scaleToRem(6000)}}>
-					Foo<br />Bar<br />Bar<br />Boom boom pow<br />Foo<br />Bar<br />Boom boom pow<br />Foo<br />Bar<br />Boom boom pow<br />
-					Foo<br />Bar<br />Boom boom pow<br />Foo<br />Bar<br />Boom boom pow<br />Foo<br />Bar<br />Boom boom pow. Boom boom pow.
-					Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow.
-					Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow.
-					Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. <br />Foo<br />Bar<br />Bar<br />
-					Boom boom pow<br />Foo<br />Bar<br />Boom boom pow<br />Foo<br />Bar<br />Boom boom pow<br />Foo<br />Bar<br />Boom boom pow<br />
-					Foo<br />Bar<br />Boom boom pow<br />Foo<br />Bar<br />Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow.
-					Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow.
-					Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow.
-					Boom boom pow. Boom boom pow. Boom boom pow. <br />Foo<br />Bar<br />Bar<br />Boom boom pow<br />Foo<br />Bar<br />
-					Boom boom pow<br />Foo<br />Bar<br />Boom boom pow<br />Foo<br />Bar<br />Boom boom pow<br />Foo<br />Bar<br />Boom boom pow<br />
-					Foo<br />Bar<br />Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow.
-					Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow.
-					Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow.
-					Boom boom pow. <br />Foo<br />Bar<br />Bar<br />Boom boom pow<br />Foo<br />Bar<br />Boom boom pow<br />Foo<br />Bar<br />
-					Boom boom pow<br />Foo<br />Bar<br />Boom boom pow<br />Foo<br />Bar<br />Boom boom pow<br />Foo<br />Bar<br />Boom boom pow.
-					Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow.
-					Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow.
-					Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow. Boom boom pow.
+				<div style={spottable ? null : {width: ri.scaleToRem(6000)}}>
+					{spottable ?
+						<Container>
+							{bodyText.map((x, i) => <SpottableDiv className={css.focusableBodyText} key={i}>{x}</SpottableDiv>)}
+						</Container> :
+						bodyText.map((x, i) => <Fragment key={i}>{x}</Fragment>)
+					}
 				</div>
 			</Cell>
 		</Layout>
diff --git a/samples/qa-a11y/src/views/Scroller.module.less b/samples/qa-a11y/src/views/Scroller.module.less
new file mode 100644
index 0000000000..f15f7abc85
--- /dev/null
+++ b/samples/qa-a11y/src/views/Scroller.module.less
@@ -0,0 +1,9 @@
+@import "~@enact/sandstone/styles/colors.less";
+@import "~@enact/sandstone/styles/mixins.less";
+
+.focusableBodyText {
+    .focus({
+        background-color: @sand-scroll-focusablebody-focus-bg-color;
+        opacity: 1;   
+    });
+}