From 9d7c8b424a027ce9a6fd5658d36c26621addbe5c Mon Sep 17 00:00:00 2001
From: Jiye Kim <jiye.kim@lge.com>
Date: Tue, 6 Feb 2024 18:03:43 +0900
Subject: [PATCH 1/8] WRQ-8044: Focus Body Text partially in Scroller with
 audio guidance ON Enact-DCO-1.0-Signed-off-by: Jiye Kim (jiye.kim@lge.com)

---
 samples/qa-a11y/src/views/Scroller.js         | 80 ++++++++++++++-----
 .../qa-a11y/src/views/Scroller.module.less    |  9 +++
 2 files changed, 68 insertions(+), 21 deletions(-)
 create mode 100644 samples/qa-a11y/src/views/Scroller.module.less

diff --git a/samples/qa-a11y/src/views/Scroller.js b/samples/qa-a11y/src/views/Scroller.js
index da90e393ba..97425078bb 100644
--- a/samples/qa-a11y/src/views/Scroller.js
+++ b/samples/qa-a11y/src/views/Scroller.js
@@ -2,18 +2,74 @@
 
 import Scroller from '@enact/sandstone/Scroller';
 import ToggleButton from '@enact/sandstone/SwitchItem';
+import SpotlightContainerDecorator from '@enact/spotlight/SpotlightContainerDecorator';
+import Spottable from '@enact/spotlight/Spottable';
 import Layout, {Cell} from '@enact/ui/Layout';
 import ri from '@enact/ui/resolution';
-import {useState} from 'react';
+import LS2Request from '@enact/webos/LS2Request';
+import {useEffect, useState} from 'react';
+
+import css from './Scroller.module.less';
 
 const ScrollerView = () => {
+	const [audioGuidance, setAudioGuidance] = useState(false);
 	const [native, setNative] = useState(true);
 	const [customAriaLabel, setCustomAriaLabel] = useState(false);
 	const scrollMode = native ? 'native' : 'translate';
 
+	useEffect( () => {
+		if (window.WebOSServiceBridge ?? window.PalmServiceBridge) {
+			new LS2Request().send({
+				service: 'luna://com.webos.settingsservice/',
+				method: 'getSystemSettings',
+				parameters: {
+					category: 'option',
+					keys: ['audioGuidance']
+				},
+				onSuccess: (res) => {
+					setAudioGuidance(res.settings.audioGuidance === 'on');
+				}
+			});
+		}
+	}, []);
+
 	const handleChangeJSNativeButton = () => setNative(!native);
 	const handleChangeAriaLabelButton = () => setCustomAriaLabel(!customAriaLabel);
 
+	const bodyText = [
+		'Foo', 'Bar', 'Bar', 'Boom boom pow',
+		'Foo', 'Bar', 'Boom boom pow',
+		'Foo', 'Bar', 'Boom boom pow',
+		'Foo', 'Bar', 'Boom boom pow',
+		'Foo', 'Bar', 'Boom boom pow',
+		'Foo', 'Bar',
+		'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.',
+		'Foo', 'Bar', 'Bar', 'Boom boom pow',
+		'Foo', 'Bar', 'Boom boom pow',
+		'Foo', 'Bar', 'Boom boom pow',
+		'Foo', 'Bar', 'Boom boom pow',
+		'Foo', 'Bar', 'Boom boom pow',
+		'Foo', 'Bar',
+		'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.',
+		'Foo', 'Bar', 'Bar', 'Boom boom pow',
+		'Foo', 'Bar', 'Boom boom pow',
+		'Foo', 'Bar', 'Boom boom pow',
+		'Foo', 'Bar', 'Boom boom pow',
+		'Foo', 'Bar', 'Boom boom pow',
+		'Foo', 'Bar',
+		'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.',
+		'Foo', 'Bar', 'Bar', 'Boom boom pow',
+		'Foo', 'Bar', 'Boom boom pow',
+		'Foo', 'Bar', 'Boom boom pow',
+		'Foo', 'Bar', 'Boom boom pow',
+		'Foo', 'Bar', 'Boom boom pow',
+		'Foo', 'Bar',
+		'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.'
+	];
+
+	const Container = SpotlightContainerDecorator('div');
+	const SpottableDiv = Spottable('div');
+
 	return (
 		<Layout orientation="vertical">
 			<Cell shrink>
@@ -32,31 +88,13 @@ const ScrollerView = () => {
 			</Cell>
 			<Cell
 				component={Scroller}
-				focusableScrollbar="byEnter"
+				focusableScrollbar={audioGuidance ? true : "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.
+					{audioGuidance ? <Container>{bodyText.map((x) => <SpottableDiv className={css.focusableBodyText}>{x}<br /></SpottableDiv>)}</Container> : bodyText.map((x) => <>{x}<br /></>)}
 				</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..6da7d14ed6
--- /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;   
+    });
+}
\ No newline at end of file

From 63633ce4745000a5964a199bc9a9a840a8411d64 Mon Sep 17 00:00:00 2001
From: Jiye Kim <jiye.kim@lge.com>
Date: Tue, 6 Feb 2024 18:03:43 +0900
Subject: [PATCH 2/8] WRQ-8004: Focus Body Text partially in Scroller with
 audio guidance ON Enact-DCO-1.0-Signed-off-by: Jiye Kim (jiye.kim@lge.com)

---
 samples/qa-a11y/src/views/Scroller.js         | 80 ++++++++++++++-----
 .../qa-a11y/src/views/Scroller.module.less    |  9 +++
 2 files changed, 68 insertions(+), 21 deletions(-)
 create mode 100644 samples/qa-a11y/src/views/Scroller.module.less

diff --git a/samples/qa-a11y/src/views/Scroller.js b/samples/qa-a11y/src/views/Scroller.js
index da90e393ba..97425078bb 100644
--- a/samples/qa-a11y/src/views/Scroller.js
+++ b/samples/qa-a11y/src/views/Scroller.js
@@ -2,18 +2,74 @@
 
 import Scroller from '@enact/sandstone/Scroller';
 import ToggleButton from '@enact/sandstone/SwitchItem';
+import SpotlightContainerDecorator from '@enact/spotlight/SpotlightContainerDecorator';
+import Spottable from '@enact/spotlight/Spottable';
 import Layout, {Cell} from '@enact/ui/Layout';
 import ri from '@enact/ui/resolution';
-import {useState} from 'react';
+import LS2Request from '@enact/webos/LS2Request';
+import {useEffect, useState} from 'react';
+
+import css from './Scroller.module.less';
 
 const ScrollerView = () => {
+	const [audioGuidance, setAudioGuidance] = useState(false);
 	const [native, setNative] = useState(true);
 	const [customAriaLabel, setCustomAriaLabel] = useState(false);
 	const scrollMode = native ? 'native' : 'translate';
 
+	useEffect( () => {
+		if (window.WebOSServiceBridge ?? window.PalmServiceBridge) {
+			new LS2Request().send({
+				service: 'luna://com.webos.settingsservice/',
+				method: 'getSystemSettings',
+				parameters: {
+					category: 'option',
+					keys: ['audioGuidance']
+				},
+				onSuccess: (res) => {
+					setAudioGuidance(res.settings.audioGuidance === 'on');
+				}
+			});
+		}
+	}, []);
+
 	const handleChangeJSNativeButton = () => setNative(!native);
 	const handleChangeAriaLabelButton = () => setCustomAriaLabel(!customAriaLabel);
 
+	const bodyText = [
+		'Foo', 'Bar', 'Bar', 'Boom boom pow',
+		'Foo', 'Bar', 'Boom boom pow',
+		'Foo', 'Bar', 'Boom boom pow',
+		'Foo', 'Bar', 'Boom boom pow',
+		'Foo', 'Bar', 'Boom boom pow',
+		'Foo', 'Bar',
+		'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.',
+		'Foo', 'Bar', 'Bar', 'Boom boom pow',
+		'Foo', 'Bar', 'Boom boom pow',
+		'Foo', 'Bar', 'Boom boom pow',
+		'Foo', 'Bar', 'Boom boom pow',
+		'Foo', 'Bar', 'Boom boom pow',
+		'Foo', 'Bar',
+		'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.',
+		'Foo', 'Bar', 'Bar', 'Boom boom pow',
+		'Foo', 'Bar', 'Boom boom pow',
+		'Foo', 'Bar', 'Boom boom pow',
+		'Foo', 'Bar', 'Boom boom pow',
+		'Foo', 'Bar', 'Boom boom pow',
+		'Foo', 'Bar',
+		'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.',
+		'Foo', 'Bar', 'Bar', 'Boom boom pow',
+		'Foo', 'Bar', 'Boom boom pow',
+		'Foo', 'Bar', 'Boom boom pow',
+		'Foo', 'Bar', 'Boom boom pow',
+		'Foo', 'Bar', 'Boom boom pow',
+		'Foo', 'Bar',
+		'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.'
+	];
+
+	const Container = SpotlightContainerDecorator('div');
+	const SpottableDiv = Spottable('div');
+
 	return (
 		<Layout orientation="vertical">
 			<Cell shrink>
@@ -32,31 +88,13 @@ const ScrollerView = () => {
 			</Cell>
 			<Cell
 				component={Scroller}
-				focusableScrollbar="byEnter"
+				focusableScrollbar={audioGuidance ? true : "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.
+					{audioGuidance ? <Container>{bodyText.map((x) => <SpottableDiv className={css.focusableBodyText}>{x}<br /></SpottableDiv>)}</Container> : bodyText.map((x) => <>{x}<br /></>)}
 				</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..6da7d14ed6
--- /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;   
+    });
+}
\ No newline at end of file

From 4b4e30608b8cda721a900ccf729fb21d57654a3d Mon Sep 17 00:00:00 2001
From: Jiye Kim <jiye.kim@lge.com>
Date: Wed, 7 Feb 2024 13:12:22 +0900
Subject: [PATCH 3/8] Added empty line at the end of .less file
 Enact-DCO-1.0-Signed-off-by: Jiye Kim (jiye.kim@lge.com)

---
 samples/qa-a11y/src/views/Scroller.module.less | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/samples/qa-a11y/src/views/Scroller.module.less b/samples/qa-a11y/src/views/Scroller.module.less
index 6da7d14ed6..f15f7abc85 100644
--- a/samples/qa-a11y/src/views/Scroller.module.less
+++ b/samples/qa-a11y/src/views/Scroller.module.less
@@ -6,4 +6,4 @@
         background-color: @sand-scroll-focusablebody-focus-bg-color;
         opacity: 1;   
     });
-}
\ No newline at end of file
+}

From ea94c7602e4b6e675084d1233879bda4ae69157c Mon Sep 17 00:00:00 2001
From: Jiye Kim <jiye.kim@lge.com>
Date: Thu, 8 Feb 2024 18:08:14 +0900
Subject: [PATCH 4/8] Created new sample for BodyText focus and separated it
 from Scroller sample Enact-DCO-1.0-Signed-off-by: Jiye Kim (jiye.kim@lge.com)

---
 samples/qa-a11y/src/App/App.js                |   2 +
 samples/qa-a11y/src/views/Scroller.js         |  80 +++--------
 .../src/views/ScrollerWithBodyTextFocus.js    | 134 ++++++++++++++++++
 ... => ScrollerWithBodyTextFocus.module.less} |   0
 4 files changed, 157 insertions(+), 59 deletions(-)
 create mode 100644 samples/qa-a11y/src/views/ScrollerWithBodyTextFocus.js
 rename samples/qa-a11y/src/views/{Scroller.module.less => ScrollerWithBodyTextFocus.module.less} (100%)

diff --git a/samples/qa-a11y/src/App/App.js b/samples/qa-a11y/src/App/App.js
index 20777996f4..8bb25cc1a4 100644
--- a/samples/qa-a11y/src/App/App.js
+++ b/samples/qa-a11y/src/App/App.js
@@ -41,6 +41,7 @@ import RangePicker from '../views/RangePicker';
 import ReadAlert from '../views/ReadAlert';
 import Region from '../views/Region';
 import Scroller from '../views/Scroller';
+import ScrollerWithBodyTextFocus from '../views/ScrollerWithBodyTextFocus';
 import Slider from '../views/Slider';
 import Spinner from '../views/Spinner';
 import Switch from '../views/Switch';
@@ -92,6 +93,7 @@ const views = [
 	{title: 'ReadAlert', view: ReadAlert},
 	{title: 'Region', view: Region},
 	{title: 'Scroller', view: Scroller},
+	{title: 'ScrollerWithBodyTextFocus', view: ScrollerWithBodyTextFocus},
 	{title: 'Slider', view: Slider},
 	{title: 'Spinner', view: Spinner},
 	{title: 'Switch', view: Switch},
diff --git a/samples/qa-a11y/src/views/Scroller.js b/samples/qa-a11y/src/views/Scroller.js
index 97425078bb..da90e393ba 100644
--- a/samples/qa-a11y/src/views/Scroller.js
+++ b/samples/qa-a11y/src/views/Scroller.js
@@ -2,74 +2,18 @@
 
 import Scroller from '@enact/sandstone/Scroller';
 import ToggleButton from '@enact/sandstone/SwitchItem';
-import SpotlightContainerDecorator from '@enact/spotlight/SpotlightContainerDecorator';
-import Spottable from '@enact/spotlight/Spottable';
 import Layout, {Cell} from '@enact/ui/Layout';
 import ri from '@enact/ui/resolution';
-import LS2Request from '@enact/webos/LS2Request';
-import {useEffect, useState} from 'react';
-
-import css from './Scroller.module.less';
+import {useState} from 'react';
 
 const ScrollerView = () => {
-	const [audioGuidance, setAudioGuidance] = useState(false);
 	const [native, setNative] = useState(true);
 	const [customAriaLabel, setCustomAriaLabel] = useState(false);
 	const scrollMode = native ? 'native' : 'translate';
 
-	useEffect( () => {
-		if (window.WebOSServiceBridge ?? window.PalmServiceBridge) {
-			new LS2Request().send({
-				service: 'luna://com.webos.settingsservice/',
-				method: 'getSystemSettings',
-				parameters: {
-					category: 'option',
-					keys: ['audioGuidance']
-				},
-				onSuccess: (res) => {
-					setAudioGuidance(res.settings.audioGuidance === 'on');
-				}
-			});
-		}
-	}, []);
-
 	const handleChangeJSNativeButton = () => setNative(!native);
 	const handleChangeAriaLabelButton = () => setCustomAriaLabel(!customAriaLabel);
 
-	const bodyText = [
-		'Foo', 'Bar', 'Bar', 'Boom boom pow',
-		'Foo', 'Bar', 'Boom boom pow',
-		'Foo', 'Bar', 'Boom boom pow',
-		'Foo', 'Bar', 'Boom boom pow',
-		'Foo', 'Bar', 'Boom boom pow',
-		'Foo', 'Bar',
-		'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.',
-		'Foo', 'Bar', 'Bar', 'Boom boom pow',
-		'Foo', 'Bar', 'Boom boom pow',
-		'Foo', 'Bar', 'Boom boom pow',
-		'Foo', 'Bar', 'Boom boom pow',
-		'Foo', 'Bar', 'Boom boom pow',
-		'Foo', 'Bar',
-		'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.',
-		'Foo', 'Bar', 'Bar', 'Boom boom pow',
-		'Foo', 'Bar', 'Boom boom pow',
-		'Foo', 'Bar', 'Boom boom pow',
-		'Foo', 'Bar', 'Boom boom pow',
-		'Foo', 'Bar', 'Boom boom pow',
-		'Foo', 'Bar',
-		'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.',
-		'Foo', 'Bar', 'Bar', 'Boom boom pow',
-		'Foo', 'Bar', 'Boom boom pow',
-		'Foo', 'Bar', 'Boom boom pow',
-		'Foo', 'Bar', 'Boom boom pow',
-		'Foo', 'Bar', 'Boom boom pow',
-		'Foo', 'Bar',
-		'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.'
-	];
-
-	const Container = SpotlightContainerDecorator('div');
-	const SpottableDiv = Spottable('div');
-
 	return (
 		<Layout orientation="vertical">
 			<Cell shrink>
@@ -88,13 +32,31 @@ const ScrollerView = () => {
 			</Cell>
 			<Cell
 				component={Scroller}
-				focusableScrollbar={audioGuidance ? true : "byEnter"}
+				focusableScrollbar="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)}}>
-					{audioGuidance ? <Container>{bodyText.map((x) => <SpottableDiv className={css.focusableBodyText}>{x}<br /></SpottableDiv>)}</Container> : bodyText.map((x) => <>{x}<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 />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>
 			</Cell>
 		</Layout>
diff --git a/samples/qa-a11y/src/views/ScrollerWithBodyTextFocus.js b/samples/qa-a11y/src/views/ScrollerWithBodyTextFocus.js
new file mode 100644
index 0000000000..c8c40aadd9
--- /dev/null
+++ b/samples/qa-a11y/src/views/ScrollerWithBodyTextFocus.js
@@ -0,0 +1,134 @@
+/* eslint-disable react/jsx-no-bind */
+
+import CheckboxItem from '@enact/sandstone/CheckboxItem';
+import Scroller from '@enact/sandstone/Scroller';
+import SpotlightContainerDecorator from '@enact/spotlight/SpotlightContainerDecorator';
+import Spottable from '@enact/spotlight/Spottable';
+import Layout, {Cell} from '@enact/ui/Layout';
+import LS2Request from '@enact/webos/LS2Request';
+import {useCallback, useEffect, useState} from 'react';
+
+import css from './ScrollerWithBodyTextFocus.module.less';
+
+const ScrollerWithBodyTextFocusView = () => {
+	const [audioGuidance, setAudioGuidance] = useState(false);
+	const [toggleDisabled, setToggleDisabled] = useState(true);
+
+	useEffect( () => {
+		if (window.WebOSServiceBridge ?? window.PalmServiceBridge) {
+			new LS2Request().send({
+				service: 'luna://com.webos.settingsservice/',
+				method: 'getSystemSettings',
+				parameters: {
+					category: 'option',
+					keys: ['audioGuidance']
+				},
+				onSuccess: (res) => {
+					setAudioGuidance(res.settings.audioGuidance === 'on');
+					setToggleDisabled(false);
+				}
+			});
+		}
+	}, []);
+
+	const onToggle = useCallback(({selected}) => {
+		if (window.WebOSServiceBridge ?? window.PalmServiceBridge) {
+			setAudioGuidance(selected);
+			new LS2Request().send({
+				service: 'luna://com.webos.settingsservice/',
+				method: 'setSystemSettings',
+				parameters: {
+					category: 'option',
+					settings: {
+						audioGuidance: selected ? 'on' : 'off'
+					}
+				}
+			});
+		}
+	}, []);
+
+	const bodyText = [
+		<>
+			Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />
+			Aenean id blandit nunc. Donec lacinia nisi vitae mi dictum, eget pulvinar nunc tincidunt.<br />
+			Integer vehicula tempus rutrum. Sed efficitur neque in arcu dignissim cursus.<br />
+		</>,
+		<>
+			Mauris blandit sollicitudin mattis. Fusce commodo arcu vitae risus consectetur<br />
+			sollicitudin. Aliquam eget posuere orci. Cras pellentesque lobortis sapien non lacinia.<br />
+		</>,
+		<>
+			Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />
+			Aenean id blandit nunc. Donec lacinia nisi vitae mi dictum, eget pulvinar nunc tincidunt.<br />
+			Integer vehicula tempus rutrum. Sed efficitur neque in arcu dignissim cursus.<br />
+		</>,
+		<>
+			Mauris blandit sollicitudin mattis. Fusce commodo arcu vitae risus consectetur<br />
+			sollicitudin. Aliquam eget posuere orci. Cras pellentesque lobortis sapien non lacinia.<br />
+		</>,
+		<>
+			Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />
+			Aenean id blandit nunc. Donec lacinia nisi vitae mi dictum, eget pulvinar nunc tincidunt.<br />
+			Integer vehicula tempus rutrum. Sed efficitur neque in arcu dignissim cursus.<br />
+		</>,
+		<>
+			Mauris blandit sollicitudin mattis. Fusce commodo arcu vitae risus consectetur<br />
+			sollicitudin. Aliquam eget posuere orci. Cras pellentesque lobortis sapien non lacinia.<br />
+		</>,
+		<>
+			Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />
+			Aenean id blandit nunc. Donec lacinia nisi vitae mi dictum, eget pulvinar nunc tincidunt.<br />
+			Integer vehicula tempus rutrum. Sed efficitur neque in arcu dignissim cursus.<br />
+		</>,
+		<>
+			Mauris blandit sollicitudin mattis. Fusce commodo arcu vitae risus consectetur<br />
+			sollicitudin. Aliquam eget posuere orci. Cras pellentesque lobortis sapien non lacinia.<br />
+		</>,
+		<>
+			Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />
+			Aenean id blandit nunc. Donec lacinia nisi vitae mi dictum, eget pulvinar nunc tincidunt.<br />
+			Integer vehicula tempus rutrum. Sed efficitur neque in arcu dignissim cursus.<br />
+		</>,
+		<>
+			Mauris blandit sollicitudin mattis. Fusce commodo arcu vitae risus consectetur<br />
+			sollicitudin. Aliquam eget posuere orci. Cras pellentesque lobortis sapien non lacinia.<br />
+		</>,
+		<>
+			Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />
+			Aenean id blandit nunc. Donec lacinia nisi vitae mi dictum, eget pulvinar nunc tincidunt.<br />
+			Integer vehicula tempus rutrum. Sed efficitur neque in arcu dignissim cursus.<br />
+		</>,
+		<>
+			Mauris blandit sollicitudin mattis. Fusce commodo arcu vitae risus consectetur<br />
+			sollicitudin. Aliquam eget posuere orci. Cras pellentesque lobortis sapien non lacinia.<br />
+		</>
+	];
+
+	const Container = SpotlightContainerDecorator('div');
+	const SpottableDiv = Spottable('div');
+
+	return (
+		<Layout orientation="vertical">
+			<Cell shrink>
+				<CheckboxItem
+					alt="Toggle"
+					selected={audioGuidance}
+					disabled={toggleDisabled}
+					onToggle={onToggle}
+				>
+					Audio guidance
+				</CheckboxItem>
+			</Cell>
+			<Cell
+				component={Scroller}
+				focusableScrollbar={audioGuidance ? true : "byEnter"}
+			>
+				<div>
+					{audioGuidance ? <Container>{bodyText.map((x) => <SpottableDiv className={css.focusableBodyText}>{x}</SpottableDiv>)}</Container> : bodyText.map((x) => <>{x}</>)}
+				</div>
+			</Cell>
+		</Layout>
+	);
+};
+
+export default ScrollerWithBodyTextFocusView;
diff --git a/samples/qa-a11y/src/views/Scroller.module.less b/samples/qa-a11y/src/views/ScrollerWithBodyTextFocus.module.less
similarity index 100%
rename from samples/qa-a11y/src/views/Scroller.module.less
rename to samples/qa-a11y/src/views/ScrollerWithBodyTextFocus.module.less

From 919e6f548302c6390cc56c5d3b67e68a3738d74d Mon Sep 17 00:00:00 2001
From: Jiye Kim <jiye.kim@lge.com>
Date: Tue, 13 Feb 2024 14:26:16 +0900
Subject: [PATCH 5/8] Delete unused eslint-disable directive
 Enact-DCO-1.0-Signed-off-by: Jiye Kim (jiye.kim@lge.com)

---
 samples/qa-a11y/src/views/ScrollerWithBodyTextFocus.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/samples/qa-a11y/src/views/ScrollerWithBodyTextFocus.js b/samples/qa-a11y/src/views/ScrollerWithBodyTextFocus.js
index c8c40aadd9..54c32aa7d7 100644
--- a/samples/qa-a11y/src/views/ScrollerWithBodyTextFocus.js
+++ b/samples/qa-a11y/src/views/ScrollerWithBodyTextFocus.js
@@ -1,5 +1,3 @@
-/* eslint-disable react/jsx-no-bind */
-
 import CheckboxItem from '@enact/sandstone/CheckboxItem';
 import Scroller from '@enact/sandstone/Scroller';
 import SpotlightContainerDecorator from '@enact/spotlight/SpotlightContainerDecorator';

From b652e3e0972e17cca1253150c5788a8fe30bf234 Mon Sep 17 00:00:00 2001
From: Jiye Kim <jiye.kim@lge.com>
Date: Thu, 15 Feb 2024 16:50:31 +0900
Subject: [PATCH 6/8] Merge ScrollerWithBodyTextFocus into Scroller
 Enact-DCO-1.0-Signed-off-by: Jiye Kim (jiye.kim@lge.com)

---
 samples/qa-a11y/src/App/App.js                |   2 -
 samples/qa-a11y/src/views/Scroller.js         | 107 +++++++++++---
 ...Focus.module.less => Scroller.module.less} |   0
 .../src/views/ScrollerWithBodyTextFocus.js    | 132 ------------------
 4 files changed, 84 insertions(+), 157 deletions(-)
 rename samples/qa-a11y/src/views/{ScrollerWithBodyTextFocus.module.less => Scroller.module.less} (100%)
 delete mode 100644 samples/qa-a11y/src/views/ScrollerWithBodyTextFocus.js

diff --git a/samples/qa-a11y/src/App/App.js b/samples/qa-a11y/src/App/App.js
index 8bb25cc1a4..20777996f4 100644
--- a/samples/qa-a11y/src/App/App.js
+++ b/samples/qa-a11y/src/App/App.js
@@ -41,7 +41,6 @@ import RangePicker from '../views/RangePicker';
 import ReadAlert from '../views/ReadAlert';
 import Region from '../views/Region';
 import Scroller from '../views/Scroller';
-import ScrollerWithBodyTextFocus from '../views/ScrollerWithBodyTextFocus';
 import Slider from '../views/Slider';
 import Spinner from '../views/Spinner';
 import Switch from '../views/Switch';
@@ -93,7 +92,6 @@ const views = [
 	{title: 'ReadAlert', view: ReadAlert},
 	{title: 'Region', view: Region},
 	{title: 'Scroller', view: Scroller},
-	{title: 'ScrollerWithBodyTextFocus', view: ScrollerWithBodyTextFocus},
 	{title: 'Slider', view: Slider},
 	{title: 'Spinner', view: Spinner},
 	{title: 'Switch', view: Switch},
diff --git a/samples/qa-a11y/src/views/Scroller.js b/samples/qa-a11y/src/views/Scroller.js
index da90e393ba..8ce1af8983 100644
--- a/samples/qa-a11y/src/views/Scroller.js
+++ b/samples/qa-a11y/src/views/Scroller.js
@@ -1,18 +1,90 @@
 /* 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 LS2Request from '@enact/webos/LS2Request';
+import {Fragment, useEffect, useState} from 'react';
+
+import css from './Scroller.module.less';
 
 const ScrollerView = () => {
-	const [native, setNative] = useState(true);
+	const [audioGuidance, setAudioGuidance] = useState(false);
+	const [audioGuidanceDisabled, setAudioGuidanceDisabled] = useState(true);
 	const [customAriaLabel, setCustomAriaLabel] = useState(false);
+	const [native, setNative] = useState(true);
 	const scrollMode = native ? 'native' : 'translate';
 
+	useEffect( () => {
+		if (window.WebOSServiceBridge ?? window.PalmServiceBridge) {
+			new LS2Request().send({
+				service: 'luna://com.webos.settingsservice/',
+				method: 'getSystemSettings',
+				parameters: {
+					category: 'option',
+					keys: ['audioGuidance']
+				},
+				onSuccess: () => {
+					setAudioGuidanceDisabled(false);
+				}
+			});
+		}
+	}, []);
+
 	const handleChangeJSNativeButton = () => setNative(!native);
 	const handleChangeAriaLabelButton = () => setCustomAriaLabel(!customAriaLabel);
+	const handleChangeAudioGuidance = () => {
+		if (window.WebOSServiceBridge ?? window.PalmServiceBridge) {
+			setAudioGuidance(!audioGuidance);
+			new LS2Request().send({
+				service: 'luna://com.webos.settingsservice/',
+				method: 'setSystemSettings',
+				parameters: {
+					category: 'option',
+					settings: {
+						audioGuidance: !audioGuidance ? 'on' : 'off'
+					}
+				}
+			});
+		}
+	};
+
+	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 +101,23 @@ const ScrollerView = () => {
 				>
 					Native
 				</ToggleButton>
+				<ToggleButton
+					onClick={handleChangeAudioGuidance}
+					disabled={audioGuidanceDisabled}
+					selected={audioGuidance}
+				>
+					Audio Guidance (Scroller with Spottable)
+				</ToggleButton>
 			</Cell>
 			<Cell
 				component={Scroller}
-				focusableScrollbar="byEnter"
+				focusableScrollbar={audioGuidance ? 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={audioGuidance ? null : {width: ri.scaleToRem(6000)}}>
+					{audioGuidance ? <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/ScrollerWithBodyTextFocus.module.less b/samples/qa-a11y/src/views/Scroller.module.less
similarity index 100%
rename from samples/qa-a11y/src/views/ScrollerWithBodyTextFocus.module.less
rename to samples/qa-a11y/src/views/Scroller.module.less
diff --git a/samples/qa-a11y/src/views/ScrollerWithBodyTextFocus.js b/samples/qa-a11y/src/views/ScrollerWithBodyTextFocus.js
deleted file mode 100644
index 54c32aa7d7..0000000000
--- a/samples/qa-a11y/src/views/ScrollerWithBodyTextFocus.js
+++ /dev/null
@@ -1,132 +0,0 @@
-import CheckboxItem from '@enact/sandstone/CheckboxItem';
-import Scroller from '@enact/sandstone/Scroller';
-import SpotlightContainerDecorator from '@enact/spotlight/SpotlightContainerDecorator';
-import Spottable from '@enact/spotlight/Spottable';
-import Layout, {Cell} from '@enact/ui/Layout';
-import LS2Request from '@enact/webos/LS2Request';
-import {useCallback, useEffect, useState} from 'react';
-
-import css from './ScrollerWithBodyTextFocus.module.less';
-
-const ScrollerWithBodyTextFocusView = () => {
-	const [audioGuidance, setAudioGuidance] = useState(false);
-	const [toggleDisabled, setToggleDisabled] = useState(true);
-
-	useEffect( () => {
-		if (window.WebOSServiceBridge ?? window.PalmServiceBridge) {
-			new LS2Request().send({
-				service: 'luna://com.webos.settingsservice/',
-				method: 'getSystemSettings',
-				parameters: {
-					category: 'option',
-					keys: ['audioGuidance']
-				},
-				onSuccess: (res) => {
-					setAudioGuidance(res.settings.audioGuidance === 'on');
-					setToggleDisabled(false);
-				}
-			});
-		}
-	}, []);
-
-	const onToggle = useCallback(({selected}) => {
-		if (window.WebOSServiceBridge ?? window.PalmServiceBridge) {
-			setAudioGuidance(selected);
-			new LS2Request().send({
-				service: 'luna://com.webos.settingsservice/',
-				method: 'setSystemSettings',
-				parameters: {
-					category: 'option',
-					settings: {
-						audioGuidance: selected ? 'on' : 'off'
-					}
-				}
-			});
-		}
-	}, []);
-
-	const bodyText = [
-		<>
-			Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />
-			Aenean id blandit nunc. Donec lacinia nisi vitae mi dictum, eget pulvinar nunc tincidunt.<br />
-			Integer vehicula tempus rutrum. Sed efficitur neque in arcu dignissim cursus.<br />
-		</>,
-		<>
-			Mauris blandit sollicitudin mattis. Fusce commodo arcu vitae risus consectetur<br />
-			sollicitudin. Aliquam eget posuere orci. Cras pellentesque lobortis sapien non lacinia.<br />
-		</>,
-		<>
-			Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />
-			Aenean id blandit nunc. Donec lacinia nisi vitae mi dictum, eget pulvinar nunc tincidunt.<br />
-			Integer vehicula tempus rutrum. Sed efficitur neque in arcu dignissim cursus.<br />
-		</>,
-		<>
-			Mauris blandit sollicitudin mattis. Fusce commodo arcu vitae risus consectetur<br />
-			sollicitudin. Aliquam eget posuere orci. Cras pellentesque lobortis sapien non lacinia.<br />
-		</>,
-		<>
-			Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />
-			Aenean id blandit nunc. Donec lacinia nisi vitae mi dictum, eget pulvinar nunc tincidunt.<br />
-			Integer vehicula tempus rutrum. Sed efficitur neque in arcu dignissim cursus.<br />
-		</>,
-		<>
-			Mauris blandit sollicitudin mattis. Fusce commodo arcu vitae risus consectetur<br />
-			sollicitudin. Aliquam eget posuere orci. Cras pellentesque lobortis sapien non lacinia.<br />
-		</>,
-		<>
-			Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />
-			Aenean id blandit nunc. Donec lacinia nisi vitae mi dictum, eget pulvinar nunc tincidunt.<br />
-			Integer vehicula tempus rutrum. Sed efficitur neque in arcu dignissim cursus.<br />
-		</>,
-		<>
-			Mauris blandit sollicitudin mattis. Fusce commodo arcu vitae risus consectetur<br />
-			sollicitudin. Aliquam eget posuere orci. Cras pellentesque lobortis sapien non lacinia.<br />
-		</>,
-		<>
-			Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />
-			Aenean id blandit nunc. Donec lacinia nisi vitae mi dictum, eget pulvinar nunc tincidunt.<br />
-			Integer vehicula tempus rutrum. Sed efficitur neque in arcu dignissim cursus.<br />
-		</>,
-		<>
-			Mauris blandit sollicitudin mattis. Fusce commodo arcu vitae risus consectetur<br />
-			sollicitudin. Aliquam eget posuere orci. Cras pellentesque lobortis sapien non lacinia.<br />
-		</>,
-		<>
-			Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />
-			Aenean id blandit nunc. Donec lacinia nisi vitae mi dictum, eget pulvinar nunc tincidunt.<br />
-			Integer vehicula tempus rutrum. Sed efficitur neque in arcu dignissim cursus.<br />
-		</>,
-		<>
-			Mauris blandit sollicitudin mattis. Fusce commodo arcu vitae risus consectetur<br />
-			sollicitudin. Aliquam eget posuere orci. Cras pellentesque lobortis sapien non lacinia.<br />
-		</>
-	];
-
-	const Container = SpotlightContainerDecorator('div');
-	const SpottableDiv = Spottable('div');
-
-	return (
-		<Layout orientation="vertical">
-			<Cell shrink>
-				<CheckboxItem
-					alt="Toggle"
-					selected={audioGuidance}
-					disabled={toggleDisabled}
-					onToggle={onToggle}
-				>
-					Audio guidance
-				</CheckboxItem>
-			</Cell>
-			<Cell
-				component={Scroller}
-				focusableScrollbar={audioGuidance ? true : "byEnter"}
-			>
-				<div>
-					{audioGuidance ? <Container>{bodyText.map((x) => <SpottableDiv className={css.focusableBodyText}>{x}</SpottableDiv>)}</Container> : bodyText.map((x) => <>{x}</>)}
-				</div>
-			</Cell>
-		</Layout>
-	);
-};
-
-export default ScrollerWithBodyTextFocusView;

From 007206d712ae5a3e84fee3d9faf95ce1d17c5100 Mon Sep 17 00:00:00 2001
From: Jiye Kim <jiye.kim@lge.com>
Date: Tue, 20 Feb 2024 13:12:19 +0900
Subject: [PATCH 7/8] Edited indentation Enact-DCO-1.0-Signed-off-by: Jiye Kim
 (jiye.kim@lge.com)

---
 samples/qa-a11y/src/views/Scroller.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/samples/qa-a11y/src/views/Scroller.js b/samples/qa-a11y/src/views/Scroller.js
index 8ce1af8983..d2983a4849 100644
--- a/samples/qa-a11y/src/views/Scroller.js
+++ b/samples/qa-a11y/src/views/Scroller.js
@@ -117,7 +117,12 @@ const ScrollerView = () => {
 				horizontalScrollThumbAriaLabel={customAriaLabel ? 'This is horizontal scroll thumb' : null}
 			>
 				<div style={audioGuidance ? null : {width: ri.scaleToRem(6000)}}>
-					{audioGuidance ? <Container>{bodyText.map((x, i) => <SpottableDiv className={css.focusableBodyText} key={i}>{x}</SpottableDiv>)}</Container> : bodyText.map((x, i) => <Fragment key={i}>{x}</Fragment>)}
+					{audioGuidance ?
+						<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>

From 5f74380ce0bd9e48cabf9b4f5d98bf3c9fb85a57 Mon Sep 17 00:00:00 2001
From: Jiye Kim <jiye.kim@lge.com>
Date: Thu, 22 Feb 2024 14:42:22 +0900
Subject: [PATCH 8/8] Remove audioGuidance call Enact-DCO-1.0-Signed-off-by:
 Jiye Kim (jiye.kim@lge.com)

---
 samples/qa-a11y/src/views/Scroller.js | 51 +++++----------------------
 1 file changed, 9 insertions(+), 42 deletions(-)

diff --git a/samples/qa-a11y/src/views/Scroller.js b/samples/qa-a11y/src/views/Scroller.js
index d2983a4849..2eb95462ed 100644
--- a/samples/qa-a11y/src/views/Scroller.js
+++ b/samples/qa-a11y/src/views/Scroller.js
@@ -6,51 +6,19 @@ 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 LS2Request from '@enact/webos/LS2Request';
-import {Fragment, useEffect, useState} from 'react';
+import {Fragment, useState} from 'react';
 
 import css from './Scroller.module.less';
 
 const ScrollerView = () => {
-	const [audioGuidance, setAudioGuidance] = useState(false);
-	const [audioGuidanceDisabled, setAudioGuidanceDisabled] = useState(true);
+	const [spottable, setSpottable] = useState(false);
 	const [customAriaLabel, setCustomAriaLabel] = useState(false);
 	const [native, setNative] = useState(true);
 	const scrollMode = native ? 'native' : 'translate';
 
-	useEffect( () => {
-		if (window.WebOSServiceBridge ?? window.PalmServiceBridge) {
-			new LS2Request().send({
-				service: 'luna://com.webos.settingsservice/',
-				method: 'getSystemSettings',
-				parameters: {
-					category: 'option',
-					keys: ['audioGuidance']
-				},
-				onSuccess: () => {
-					setAudioGuidanceDisabled(false);
-				}
-			});
-		}
-	}, []);
-
 	const handleChangeJSNativeButton = () => setNative(!native);
 	const handleChangeAriaLabelButton = () => setCustomAriaLabel(!customAriaLabel);
-	const handleChangeAudioGuidance = () => {
-		if (window.WebOSServiceBridge ?? window.PalmServiceBridge) {
-			setAudioGuidance(!audioGuidance);
-			new LS2Request().send({
-				service: 'luna://com.webos.settingsservice/',
-				method: 'setSystemSettings',
-				parameters: {
-					category: 'option',
-					settings: {
-						audioGuidance: !audioGuidance ? 'on' : 'off'
-					}
-				}
-			});
-		}
-	};
+	const handleChangeSpottableButton = () => setSpottable(!spottable);
 
 	const bodyText = [
 		<>Foo<br />Bar<br />Bar<br />Boom boom pow<br /></>,
@@ -102,22 +70,21 @@ const ScrollerView = () => {
 					Native
 				</ToggleButton>
 				<ToggleButton
-					onClick={handleChangeAudioGuidance}
-					disabled={audioGuidanceDisabled}
-					selected={audioGuidance}
+					onClick={handleChangeSpottableButton}
+					selected={spottable}
 				>
-					Audio Guidance (Scroller with Spottable)
+					Scroller with Spottable
 				</ToggleButton>
 			</Cell>
 			<Cell
 				component={Scroller}
-				focusableScrollbar={audioGuidance ? false : "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={audioGuidance ? null : {width: ri.scaleToRem(6000)}}>
-					{audioGuidance ?
+				<div style={spottable ? null : {width: ri.scaleToRem(6000)}}>
+					{spottable ?
 						<Container>
 							{bodyText.map((x, i) => <SpottableDiv className={css.focusableBodyText} key={i}>{x}</SpottableDiv>)}
 						</Container> :