Fix progress bar accessibility

2026-02-01 18:11:07 +02:00
parent 3e23442f26
commit c283c184bd
2 changed files with 21 additions and 1 deletions
@@ -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}>