Merge pull request #1121 from SG170/fix/accessibility-book-cover-alt-text

Accessibility improvements for book cover alt texts

Author: devanshi14malhotra

frontend/js/app.js

@@ -668,7 +668,7 @@ class BookRenderer {
         scene.innerHTML = `
             <div class="book" data-id="${escapeHTML(id)}">
                 <div class="book__face book__face--front">
-                    <img src="${safeThumb}" alt="${safeTitle}">
+                    <img src="${safeThumb}" alt="Cover of '${safeTitle}' by ${safeAuthors || 'Unknown Author'}">
                 </div>
                 <div class="book__face book__face--spine" style="background: ${randomSpine}"></div>
                 <div class="book__face book__face--right"></div>
@@ -903,6 +903,7 @@ class BookRenderer {
         if (!modal) return;
 
         document.getElementById('modal-img').src = book.volumeInfo.imageLinks?.thumbnail.replace('http:', 'https:') || '';
+        document.getElementById('modal-img').alt = `Cover of '${book.volumeInfo.title}' by ${book.volumeInfo.authors?.join(', ') || 'Unknown Author'}`;
         document.getElementById('modal-title').textContent = book.volumeInfo.title;
         document.getElementById('modal-author').textContent = book.volumeInfo.authors?.join(", ") || "Unknown Author";
 
@@ -3453,7 +3454,7 @@ document.addEventListener('DOMContentLoaded', async () => {
                     card.className = 'progress-overview-card';
                     card.innerHTML = `
                         <div class="progress-card-cover">
-                            ${cover ? `<img src="${cover.replace('http:', 'https:')}" alt="${title}" loading="lazy">` : '<i class="fa-solid fa-book"></i>'}
+                            ${cover ? `<img src="${cover.replace('http:', 'https:')}" alt="Cover of '${title}' by ${author}" loading="lazy">` : '<i class="fa-solid fa-book"></i>'}
                         </div>
                         <div class="progress-card-info">
                             <div class="progress-card-title">${title}</div>
@@ -4166,7 +4167,7 @@ async function triggerOfflineLibraryView() {
                 bookCard.className = 'book-card offline-card';
                 bookCard.innerHTML = `
                     <div class="book-cover-wrapper">
-                        <img src="${book.coverUrl || '../assets/images/default-cover.png'}" alt="${book.title}" class="book-cover-img" />
+                        <img src="${book.coverUrl || '../assets/images/default-cover.png'}" alt="Cover of '${book.title}' by ${book.author || 'Unknown Author'}" class="book-cover-img" />
                     </div>
                     <div class="book-details">
                         <h3>${book.title}</h3>

frontend/js/library-3d.js

@@ -1206,7 +1206,7 @@ class BookshelfRenderer3D {
         if (book.cover) {
             const img = document.createElement('img');
             img.src = book.cover;
-            img.alt = book.title;
+            img.alt = `Cover of '${book.title}' by ${book.author}`;
             img.style.cssText = `
             position: absolute;
             top: 0;
@@ -2056,7 +2056,7 @@ class BookshelfRenderer3D {
 
         // Update tooltip content
         document.getElementById('tooltip-cover').src = book.cover;
-        document.getElementById('tooltip-cover').setAttribute('alt', `Cover of ${book.title} `);
+        document.getElementById('tooltip-cover').setAttribute('alt', `Cover of '${book.title}' by ${book.author}`);
         document.getElementById('tooltip-title').textContent = book.title;
         document.getElementById('tooltip-author').textContent = `by ${book.author} `;
         document.getElementById('tooltip-stars').textContent = this.getStarRating(book.rating);
@@ -2161,7 +2161,7 @@ class BookshelfRenderer3D {
 
         container.innerHTML = related.map(b => `
             <div class="related-book-item" data-id="${b.id}" title="${b.title} by ${b.author}">
-                <img src="${b.cover || (b.volumeInfo && b.volumeInfo.imageLinks && b.volumeInfo.imageLinks.thumbnail) || '../assets/images/biblioDrift_favicon.png'}" alt="${b.title}">
+                <img src="${b.cover || (b.volumeInfo && b.volumeInfo.imageLinks && b.volumeInfo.imageLinks.thumbnail) || '../assets/images/biblioDrift_favicon.png'}" alt="Cover of '${b.title}' by ${b.author || 'Unknown Author'}">
                 <div class="related-book-title">${b.title}</div>
             </div>
         `).join('');
@@ -2203,7 +2203,7 @@ class BookshelfRenderer3D {
         const coverImg = document.getElementById('modal-cover');
         if (coverImg) {
             coverImg.src = book.cover;
-            coverImg.setAttribute('alt', `Cover of ${book.title} by ${book.author} `);
+            coverImg.setAttribute('alt', `Cover of '${book.title}' by ${book.author}`);
         }
 
         // 3. Style the 3D Book (Spine & Back)