From c283c184bd4033f3fa12ad3cc38e043eaa6e4cc3 Mon Sep 17 00:00:00 2001
From: Roni Laukkarinen <roni@dude.fi>
Date: Sun, 1 Feb 2026 18:11:07 +0200
Subject: [PATCH] Fix progress bar accessibility

---
 CHANGELOG.md |  1 +
 src/App.jsx  | 21 ++++++++++++++++++++-
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 52114b1..1621cf5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,6 @@
 ### 2026-02-01: 1.0.3
 
+* Fix progress bar accessibility
 * Add Open Library API integration for missing book metadata (opt-in)
 
 ### 2026-02-01: 1.0.2
diff --git a/src/App.jsx b/src/App.jsx
index f8135ee..5941c76 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -685,7 +685,26 @@ function App() {
         </div>
 
         {/* Progress */}
-        <div style={styles.progressContainer} onClick={handleProgressClick}>
+        <div
+          style={styles.progressContainer}
+          onClick={handleProgressClick}
+          onKeyDown={(e) => {
+            if (e.key === "ArrowLeft") {
+              e.preventDefault();
+              setCurrentIndex((prev) => Math.max(0, prev - Math.ceil(words.length / 100)));
+            } else if (e.key === "ArrowRight") {
+              e.preventDefault();
+              setCurrentIndex((prev) => Math.min(words.length - 1, prev + Math.ceil(words.length / 100)));
+            }
+          }}
+          role="slider"
+          tabIndex={0}
+          aria-label="Reading progress"
+          aria-valuemin={0}
+          aria-valuemax={100}
+          aria-valuenow={Math.round(progress)}
+          aria-valuetext={`${Math.round(progress)}% complete, word ${currentIndex + 1} of ${words.length}`}
+        >
           <div style={{ ...styles.progressBar, width: `${progress}%` }} />
         </div>
         <div style={styles.progressText}>