diff --git a/index.html b/index.html index 7e5dd88..a5d6b45 100644 --- a/index.html +++ b/index.html @@ -10,13 +10,15 @@ +

Rolling Stone Magazine's

Top 500 Albums of All Time

The Greatest Albums Ever Made - 2023 Edition

- @@ -34,9 +36,10 @@
+ -
+
+ - +
-
-
+
+
-
+ +
-
+ +
-
+ +
+
-
+ +
+ +
-
- +
+

Loading albums...

- diff --git a/script.js b/script.js index 9121da2..236c197 100644 --- a/script.js +++ b/script.js @@ -73,34 +73,14 @@ function setupEventListeners() { // Setup click handlers for stats cards function setupStatsClickHandlers() { - const totalAlbumsCard = document.querySelector('.stat-item:has(#totalAlbums)') || - document.querySelector('#totalAlbums').closest('.stat-item'); - const newAlbumsCard = document.querySelector('.stat-item:has(#newAlbums)') || - document.querySelector('#newAlbums').closest('.stat-item'); - const improvedAlbumsCard = document.querySelector('.stat-item:has(#improvedAlbums)') || - document.querySelector('#improvedAlbums').closest('.stat-item'); - const droppedAlbumsCard = document.querySelector('.stat-item:has(#droppedAlbums)') || - document.querySelector('#droppedAlbums').closest('.stat-item'); - - if (totalAlbumsCard) { - totalAlbumsCard.addEventListener('click', () => handleStatsCardClick('')); - totalAlbumsCard.style.cursor = 'pointer'; - } - - if (newAlbumsCard) { - newAlbumsCard.addEventListener('click', () => handleStatsCardClick('New in 2023')); - newAlbumsCard.style.cursor = 'pointer'; - } - - if (improvedAlbumsCard) { - improvedAlbumsCard.addEventListener('click', () => handleStatsCardClick('improved')); - improvedAlbumsCard.style.cursor = 'pointer'; - } - - if (droppedAlbumsCard) { - droppedAlbumsCard.addEventListener('click', () => handleStatsCardClick('dropped')); - droppedAlbumsCard.style.cursor = 'pointer'; - } + // Stats cards are now buttons with data-filter attributes + const statButtons = document.querySelectorAll('.stat-item[data-filter]'); + statButtons.forEach(button => { + button.addEventListener('click', () => { + const filterValue = button.getAttribute('data-filter'); + handleStatsCardClick(filterValue); + }); + }); } // Handle stats card clicks @@ -235,6 +215,11 @@ function renderAlbums() { if (currentPage === 1) { albumsGrid.innerHTML = ''; + // Announce results to screen readers + const announcement = document.getElementById('resultsAnnouncement'); + if (announcement) { + announcement.textContent = `Showing ${filteredData.length} albums`; + } } albumsToShow.slice(startIndex).forEach(album => { @@ -288,34 +273,34 @@ function createAlbumCard(album) { const nextAlbum = hasNext ? filteredData[currentIndex + 1] : null; card.innerHTML = ` -
-
#${album.Rank}
+
+
#${album.Rank}
-
${escapeHtml(album.Album)}
-
-
${escapeHtml(album.Artist)}
- ${album.Info ? `
${escapeHtml(album.Info)}
` : ''} +

${escapeHtml(album.Artist)}

+ ${album.Info ? `

${escapeHtml(album.Info)}

` : ''}
-
+
${coverImagePath ? `${escapeHtml(album.Album)} by ${escapeHtml(album.Artist)} - ` : - `
🎵
` + ` : + `` }
${statusText}
- ` : ''}
@@ -466,8 +451,9 @@ function handleSort(event) { function handleReverse() { isReversed = !isReversed; - // Update button appearance + // Update button appearance and accessibility state reverseButton.classList.toggle('reversed', isReversed); + reverseButton.setAttribute('aria-pressed', isReversed.toString()); // Reverse the current filtered data filteredData.reverse(); @@ -481,6 +467,7 @@ function resetReverse() { if (isReversed) { isReversed = false; reverseButton.classList.remove('reversed'); + reverseButton.setAttribute('aria-pressed', 'false'); } } diff --git a/styles.css b/styles.css index 7fe683f..df34c50 100644 --- a/styles.css +++ b/styles.css @@ -5,6 +5,40 @@ box-sizing: border-box; } +/* Screen reader only utility class */ +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +/* Skip link for keyboard navigation */ +.skip-link { + position: absolute; + top: -40px; + left: 0; + padding: 8px 16px; + background: var(--primary-color); + color: var(--text-light); + text-decoration: none; + font-weight: 500; + z-index: 1000; + border-radius: 0 0 4px 0; + transition: top 0.2s ease; +} + +.skip-link:focus { + top: 0; + outline: 2px solid var(--text-light); + outline-offset: 2px; +} + /* Theme Variables */ :root { /* Default theme - Gruvbox */ @@ -228,11 +262,17 @@ body { } .theme-select-header:focus { - outline: none; + outline: 2px solid var(--text-light); + outline-offset: 2px; border-color: rgba(255, 255, 255, 0.6); background: rgba(255, 255, 255, 0.2); } +.theme-select-header:focus-visible { + outline: 2px solid var(--text-light); + outline-offset: 2px; +} + .theme-select-header option { background: var(--card-background); color: var(--text-primary); @@ -269,12 +309,18 @@ body { border: 2px solid #e1e5e9; border-radius: 8px 0 0 8px; font-size: 1rem; - outline: none; transition: border-color 0.3s ease; } .search-input:focus { - border-color: #667eea; + outline: 2px solid var(--primary-color); + outline-offset: -2px; + border-color: var(--primary-color); +} + +.search-input:focus-visible { + outline: 2px solid var(--primary-color); + outline-offset: -2px; } .search-button { @@ -299,6 +345,11 @@ body { background: var(--secondary-color); } +.search-button:focus-visible { + outline: 2px solid var(--primary-color); + outline-offset: 2px; +} + .filters { display: flex; gap: 1rem; @@ -316,7 +367,6 @@ body { border: 2px solid #e1e5e9; border-radius: 8px; font-size: 1rem; - outline: none; transition: border-color 0.3s ease; cursor: pointer; background: var(--card-background); @@ -325,9 +375,16 @@ body { } .filter-select:focus { + outline: 2px solid var(--primary-color); + outline-offset: 2px; border-color: var(--primary-color); } +.filter-select:focus-visible { + outline: 2px solid var(--primary-color); + outline-offset: 2px; +} + .filter-select option { background: var(--card-background); color: var(--text-primary); @@ -345,7 +402,11 @@ body { align-items: center; gap: 0.5rem; transition: all 0.3s ease; - outline: none; +} + +.reverse-button:focus-visible { + outline: 2px solid var(--primary-color); + outline-offset: 2px; } .reverse-button:hover { @@ -401,14 +462,20 @@ body { border: 2px solid #e1e5e9; border-radius: 8px; font-size: 1rem; - outline: none; transition: border-color 0.3s ease; } .rank-input:focus { + outline: 2px solid var(--primary-color); + outline-offset: -2px; border-color: var(--primary-color); } +.rank-input:focus-visible { + outline: 2px solid var(--primary-color); + outline-offset: -2px; +} + .theme-selector { margin-left: 1rem; } @@ -418,7 +485,6 @@ body { border: 2px solid #e1e5e9; border-radius: 8px; font-size: 1rem; - outline: none; transition: border-color 0.3s ease; cursor: pointer; background: var(--card-background); @@ -427,9 +493,16 @@ body { } .theme-select:focus { + outline: 2px solid var(--primary-color); + outline-offset: 2px; border-color: var(--primary-color); } +.theme-select:focus-visible { + outline: 2px solid var(--primary-color); + outline-offset: 2px; +} + .theme-select option { background: var(--card-background); color: var(--text-primary); @@ -444,7 +517,11 @@ body { font-size: 1rem; cursor: pointer; transition: all 0.3s ease; - outline: none; +} + +.jump-button:focus-visible { + outline: 2px solid var(--primary-color); + outline-offset: 2px; } .jump-button:hover { @@ -473,6 +550,9 @@ body { box-shadow: 0 4px 20px rgba(0,0,0,0.1); transition: all 0.3s ease; cursor: pointer; + border: none; + font-family: inherit; + width: 100%; } .stat-item:hover { @@ -481,6 +561,11 @@ body { background: var(--hover-background); } +.stat-item:focus-visible { + outline: 2px solid var(--primary-color); + outline-offset: 2px; +} + .stat-number { display: block; font-size: 2.5rem; @@ -622,12 +707,16 @@ body { transform: scale(0.95); } +.album-share:focus-visible { + outline: 2px solid var(--text-light); + outline-offset: 2px; +} + .album-share.copied { background: var(--secondary-color); } .album-card:hover { - transform: translateY(-4px); box-shadow: 0 8px 32px rgba(0,0,0,0.15); } @@ -782,6 +871,11 @@ body { transform: translateY(0); } +.wikipedia-link:focus-visible { + outline: 2px solid var(--primary-color); + outline-offset: 2px; +} + .spotify-link { display: inline-block; color: #1db954; /* Spotify green */ @@ -804,6 +898,11 @@ body { transform: translateY(0); } +.spotify-link:focus-visible { + outline: 2px solid #1db954; + outline-offset: 2px; +} + /* Dark theme adjustments for Spotify link */ [data-theme="dark"] .spotify-link, [data-theme="gruvbox"] .spotify-link, @@ -846,6 +945,11 @@ body { transform: translateY(0); } +.next-album-link:focus-visible { + outline: 2px solid var(--primary-color); + outline-offset: 2px; +} + .next-album-link svg { color: inherit; } @@ -1060,4 +1164,21 @@ body { flex-direction: column; gap: 0.5rem; } +} + +/* Reduced motion preference */ +@media (prefers-reduced-motion: reduce) { + *, + *::before, + *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + scroll-behavior: auto !important; + } + + .loading-spinner { + animation: none; + border: 3px solid var(--primary-color); + } } \ No newline at end of file