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

---
 CHANGELOG.md |  1 +
 src/App.jsx  | 35 +++++++++++++++++++++++++++--------
 2 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1621cf5..800a7b3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,6 @@
 ### 2026-02-01: 1.0.3
 
+* Fix modal accessibility
 * Fix progress bar accessibility
 * Add Open Library API integration for missing book metadata (opt-in)
 
diff --git a/src/App.jsx b/src/App.jsx
index 5941c76..73379aa 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -750,10 +750,17 @@ function App() {
         <div
           style={styles.modalOverlay}
           onClick={() => setShowShortcuts(false)}
+          role="presentation"
         >
-          <div style={styles.modal} onClick={(e) => e.stopPropagation()}>
+          <div
+            style={styles.modal}
+            onClick={(e) => e.stopPropagation()}
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby="shortcuts-title"
+          >
             <div style={styles.modalHeader}>
-              <h2 style={styles.modalTitle}>Keyboard shortcuts</h2>
+              <h2 id="shortcuts-title" style={styles.modalTitle}>Keyboard shortcuts</h2>
               <button
                 onClick={() => setShowShortcuts(false)}
                 style={styles.closeBtn}
@@ -807,10 +814,16 @@ function App() {
 
       {/* How it works modal */}
       {showInfo && (
-        <div style={styles.modalOverlay} onClick={() => setShowInfo(false)}>
-          <div style={styles.modal} onClick={(e) => e.stopPropagation()}>
+        <div style={styles.modalOverlay} onClick={() => setShowInfo(false)} role="presentation">
+          <div
+            style={styles.modal}
+            onClick={(e) => e.stopPropagation()}
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby="info-title"
+          >
             <div style={styles.modalHeader}>
-              <h2 style={styles.modalTitle}>How RSVP speed reading works</h2>
+              <h2 id="info-title" style={styles.modalTitle}>How RSVP speed reading works</h2>
               <button
                 onClick={() => setShowInfo(false)}
                 style={styles.closeBtn}
@@ -908,10 +921,16 @@ function App() {
 
       {/* Settings modal */}
       {showSettings && (
-        <div style={styles.modalOverlay} onClick={() => setShowSettings(false)}>
-          <div style={styles.modal} onClick={(e) => e.stopPropagation()}>
+        <div style={styles.modalOverlay} onClick={() => setShowSettings(false)} role="presentation">
+          <div
+            style={styles.modal}
+            onClick={(e) => e.stopPropagation()}
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby="settings-title"
+          >
             <div style={styles.modalHeader}>
-              <h2 style={styles.modalTitle}>Settings</h2>
+              <h2 id="settings-title" style={styles.modalTitle}>Settings</h2>
               <button
                 onClick={() => setShowSettings(false)}
                 style={styles.closeBtn}