yoinkkk/read
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fix modal accessibility

Browse Source
This commit is contained in:
Roni Laukkarinen
2026-02-01 18:11:53 +02:00
parent c283c184bd
commit 674c2a379b
2 changed files with 28 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
CHANGELOG.md
+1
View File
@@ -1,5 +1,6 @@
### 2026-02-01: 1.0.3 ### 2026-02-01: 1.0.3
* Fix modal accessibility
* Fix progress bar accessibility * Fix progress bar accessibility
* Add Open Library API integration for missing book metadata (opt-in) * Add Open Library API integration for missing book metadata (opt-in)
src/App.jsx
+27 -8
View File
@@ -750,10 +750,17 @@ function App() {
<div <div
style={styles.modalOverlay} style={styles.modalOverlay}
onClick={() => setShowShortcuts(false)} 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}> <div style={styles.modalHeader}>
<h2 style={styles.modalTitle}>Keyboard shortcuts</h2> <h2 id="shortcuts-title" style={styles.modalTitle}>Keyboard shortcuts</h2>
<button <button
onClick={() => setShowShortcuts(false)} onClick={() => setShowShortcuts(false)}
style={styles.closeBtn} style={styles.closeBtn}
@@ -807,10 +814,16 @@ function App() {
{/* How it works modal */} {/* How it works modal */}
{showInfo && ( {showInfo && (
<div style={styles.modalOverlay} onClick={() => setShowInfo(false)}> <div style={styles.modalOverlay} onClick={() => setShowInfo(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="info-title"
>
<div style={styles.modalHeader}> <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 <button
onClick={() => setShowInfo(false)} onClick={() => setShowInfo(false)}
style={styles.closeBtn} style={styles.closeBtn}
@@ -908,10 +921,16 @@ function App() {
{/* Settings modal */} {/* Settings modal */}
{showSettings && ( {showSettings && (
<div style={styles.modalOverlay} onClick={() => setShowSettings(false)}> <div style={styles.modalOverlay} onClick={() => setShowSettings(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="settings-title"
>
<div style={styles.modalHeader}> <div style={styles.modalHeader}>
<h2 style={styles.modalTitle}>Settings</h2> <h2 id="settings-title" style={styles.modalTitle}>Settings</h2>
<button <button
onClick={() => setShowSettings(false)} onClick={() => setShowSettings(false)}
style={styles.closeBtn} style={styles.closeBtn}