From 4f6609db4992bed5f68be38d9e0ca47881010fe7 Mon Sep 17 00:00:00 2001
From: Abe Jellinek <1770299+AbeJellinek@users.noreply.github.com>
Date: Mon, 9 Mar 2026 13:30:53 -0400
Subject: [PATCH 1/2] Read Aloud: Indicate skip granularity on buttons

Using new `-granular` icons that just include the inner chevron from the
normal ones.
---
 res/icons/20/skip-ahead-granular.svg          |  3 +++
 res/icons/20/skip-back-granular.svg           |  3 +++
 .../utility-popup/read-aloud-popup.js         | 25 ++++++++++++++++---
 3 files changed, 28 insertions(+), 3 deletions(-)
 create mode 100644 res/icons/20/skip-ahead-granular.svg
 create mode 100644 res/icons/20/skip-back-granular.svg

diff --git a/res/icons/20/skip-ahead-granular.svg b/res/icons/20/skip-ahead-granular.svg
new file mode 100644
index 000000000..b6c6939ae
--- /dev/null
+++ b/res/icons/20/skip-ahead-granular.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.8838 10L4.88379 16L4 15.1162L9.11621 10L4 4.88379L4.88379 4L10.8838 10Z" fill="currentColor"/>
+</svg>
diff --git a/res/icons/20/skip-back-granular.svg b/res/icons/20/skip-back-granular.svg
new file mode 100644
index 000000000..c71549dd3
--- /dev/null
+++ b/res/icons/20/skip-back-granular.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16 4.88379L10.8838 10L16 15.1162L15.1162 16L9.11621 10L15.1162 4L16 4.88379Z" fill="currentColor"/>
+</svg>
diff --git a/src/common/components/utility-popup/read-aloud-popup.js b/src/common/components/utility-popup/read-aloud-popup.js
index bb7738830..e4a2e63f0 100644
--- a/src/common/components/utility-popup/read-aloud-popup.js
+++ b/src/common/components/utility-popup/read-aloud-popup.js
@@ -7,6 +7,8 @@ import IconSkipBack from '../../../../res/icons/20/skip-back.svg';
 import IconPlay from '../../../../res/icons/20/play.svg';
 import IconPause from '../../../../res/icons/20/pause.svg';
 import IconSkipAhead from '../../../../res/icons/20/skip-ahead.svg';
+import IconSkipBackGranular from '../../../../res/icons/20/skip-back-granular.svg';
+import IconSkipAheadGranular from '../../../../res/icons/20/skip-ahead-granular.svg';
 import IconAnnotate from '../../../../res/icons/20/read-aloud-annotate.svg';
 import IconLoading from '../../../../res/icons/16/loading.svg';
 import IconClock from '../../../../res/icons/12/clock.svg';
@@ -461,6 +463,19 @@ function PlaybackControls(props) {
 	const { l10n } = useLocalization();
 
 	let { showOptions, onToggleOptions, showSpinner, paused, onPlayPause, controller, onAddAnnotation, onLockPosition } = props;
+	let [altDown, setAltDown] = useState(false);
+
+	useEffect(() => {
+		let handleKey = (event) => {
+			setAltDown(event.altKey);
+		};
+		window.addEventListener('keydown', handleKey);
+		window.addEventListener('keyup', handleKey);
+		return () => {
+			window.removeEventListener('keydown', handleKey);
+			window.removeEventListener('keyup', handleKey);
+		};
+	}, []);
 
 	function handleAddAnnotation() {
 		let segment = controller?.getSegmentToAnnotate();
@@ -470,7 +485,11 @@ function PlaybackControls(props) {
 	}
 
 	return (
-		<div className="row buttons" data-tabstop={1}>
+		<div
+			className="row buttons"
+			data-tabstop={1}
+			onMouseMove={event => setAltDown(event.altKey)}
+		>
 			<div className="group">
 				<button
 					className={cx('toolbar-button', { active: showOptions })}
@@ -488,7 +507,7 @@ function PlaybackControls(props) {
 						controller?.skipBack(event.altKey ? 'sentence' : 'paragraph', event.shiftKey);
 						onLockPosition();
 					}}
-				><IconSkipBack/></button>
+				>{altDown ? <IconSkipBackGranular/> : <IconSkipBack/>}</button>
 				{showSpinner
 					? <IconLoading
 						className="loading-spinner"
@@ -514,7 +533,7 @@ function PlaybackControls(props) {
 						controller?.skipAhead(event.altKey ? 'sentence' : 'paragraph', event.shiftKey);
 						onLockPosition();
 					}}
-				><IconSkipAhead/></button>
+				>{altDown ? <IconSkipAheadGranular/> : <IconSkipAhead/>}</button>
 			</div>
 			<div className="group">
 				<button

From 11c19b905105acd918c62a1c90aebddb00a0e067 Mon Sep 17 00:00:00 2001
From: Abe Jellinek <1770299+AbeJellinek@users.noreply.github.com>
Date: Thu, 19 Mar 2026 13:46:30 -0400
Subject: [PATCH 2/2] Indicate granularity in tooltip

---
 src/common/components/utility-popup/read-aloud-popup.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/common/components/utility-popup/read-aloud-popup.js b/src/common/components/utility-popup/read-aloud-popup.js
index e4a2e63f0..7b40276fd 100644
--- a/src/common/components/utility-popup/read-aloud-popup.js
+++ b/src/common/components/utility-popup/read-aloud-popup.js
@@ -501,7 +501,7 @@ function PlaybackControls(props) {
 			<div className="group">
 				<button
 					className="toolbar-button"
-					title={l10n.getString('reader-read-aloud-skip-back')}
+					title={l10n.getString(altDown ? 'reader-read-aloud-skip-back-sentence' : 'reader-read-aloud-skip-back')}
 					tabIndex="-1"
 					onClick={(event) => {
 						controller?.skipBack(event.altKey ? 'sentence' : 'paragraph', event.shiftKey);
@@ -527,7 +527,7 @@ function PlaybackControls(props) {
 				}
 				<button
 					className="toolbar-button"
-					title={l10n.getString('reader-read-aloud-skip-ahead')}
+					title={l10n.getString(altDown ? 'reader-read-aloud-skip-ahead-sentence' : 'reader-read-aloud-skip-ahead')}
 					tabIndex="-1"
 					onClick={(event) => {
 						controller?.skipAhead(event.altKey ? 'sentence' : 'paragraph', event.shiftKey);