From 170bb786de260a77782e66b30c3785276f2bce6b Mon Sep 17 00:00:00 2001
From: Roni Laukkarinen <roni@dude.fi>
Date: Sun, 1 Feb 2026 18:07:35 +0200
Subject: [PATCH] Convert book metadata to semantic HTML for accessibility

---
 CHANGELOG.md |  1 +
 src/App.jsx  | 17 ++++++++++-------
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 95e8f90..8a6a728 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,6 @@
 ### 2026-02-01: 1.0.2
 
+* Convert book metadata to semantic HTML for accessibility
 * Add reading time to book metadata display
 * Improve book info readability
 
diff --git a/src/App.jsx b/src/App.jsx
index 864fb5e..4b9f758 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -657,26 +657,26 @@ function App() {
 
       {/* Book metadata display */}
       {bookMetadata && (bookMetadata.title || bookMetadata.cover) && (
-        <div style={styles.bookMetadata}>
+        <aside style={styles.bookMetadata} aria-label="Current book">
           {bookMetadata.cover && (
             <img
               src={bookMetadata.cover}
-              alt="Book cover"
+              alt={`Cover of ${bookMetadata.title || "current book"}`}
               style={styles.bookCover}
             />
           )}
           <div style={styles.bookInfo}>
             {bookMetadata.title && (
-              <div style={styles.bookTitle}>{bookMetadata.title}</div>
+              <h3 style={styles.bookTitle}>{bookMetadata.title}</h3>
             )}
             {bookMetadata.author && (
-              <div style={styles.bookAuthor}>{bookMetadata.author}</div>
+              <p style={styles.bookAuthor}>{bookMetadata.author}</p>
             )}
-            <div style={styles.bookStats}>
+            <p style={styles.bookStats}>
               {formatReadingTime((words.length - currentIndex) / wpm)} left
-            </div>
+            </p>
           </div>
-        </div>
+        </aside>
       )}
 
       {/* Keyboard shortcuts modal */}
@@ -1322,6 +1322,7 @@ const styles = {
     whiteSpace: "nowrap",
     overflow: "hidden",
     textOverflow: "ellipsis",
+    margin: 0,
     marginBottom: "2px",
   },
   bookAuthor: {
@@ -1330,10 +1331,12 @@ const styles = {
     whiteSpace: "nowrap",
     overflow: "hidden",
     textOverflow: "ellipsis",
+    margin: 0,
   },
   bookStats: {
     fontSize: "0.7rem",
     color: "#555",
+    margin: 0,
     marginTop: "2px",
   },
 };