update layout for accessibility
This commit is contained in:
Johan Lundberg
parent
94d8c4b43e
commit
0b91798c96
3 changed files with 190 additions and 73 deletions
77
script.js
77
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 = `
|
||||
<div class="album-header-grid">
|
||||
<div class="album-rank">#${album.Rank}</div>
|
||||
<article class="album-header-grid">
|
||||
<div class="album-rank" aria-label="Rank ${album.Rank}">#${album.Rank}</div>
|
||||
<div class="album-details">
|
||||
<div class="album-title-row">
|
||||
<div class="album-title">${escapeHtml(album.Album)}</div>
|
||||
<button class="album-share album-share-desktop" title="Share this album" data-rank="${album.Rank}">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<h2 class="album-title">${escapeHtml(album.Album)}</h2>
|
||||
<button class="album-share album-share-desktop" aria-label="Share ${escapeHtml(album.Album)}" data-rank="${album.Rank}">
|
||||
<svg aria-hidden="true" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"></path>
|
||||
<polyline points="16,6 12,2 8,6"></polyline>
|
||||
<line x1="12" y1="2" x2="12" y2="15"></line>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="album-artist">${escapeHtml(album.Artist)}</div>
|
||||
${album.Info ? `<div class="album-info">${escapeHtml(album.Info)}</div>` : ''}
|
||||
<p class="album-artist">${escapeHtml(album.Artist)}</p>
|
||||
${album.Info ? `<p class="album-info">${escapeHtml(album.Info)}</p>` : ''}
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<div class="album-cover">
|
||||
${coverImagePath ?
|
||||
`<img src="${coverImagePath}" alt="${escapeHtml(album.Album)} by ${escapeHtml(album.Artist)}" class="album-cover-image" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
|
||||
<div class="album-cover-icon" style="display: none;">🎵</div>` :
|
||||
`<div class="album-cover-icon">🎵</div>`
|
||||
<div class="album-cover-icon" style="display: none;" aria-hidden="true">🎵</div>` :
|
||||
`<div class="album-cover-icon" aria-hidden="true">🎵</div>`
|
||||
}
|
||||
</div>
|
||||
<div class="album-status-row">
|
||||
<div class="album-status ${statusClass}">${statusText}</div>
|
||||
<button class="album-share album-share-mobile" title="Share this album" data-rank="${album.Rank}">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<button class="album-share album-share-mobile" aria-label="Share ${escapeHtml(album.Album)}" data-rank="${album.Rank}">
|
||||
<svg aria-hidden="true" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"></path>
|
||||
<polyline points="16,6 12,2 8,6"></polyline>
|
||||
<line x1="12" y1="2" x2="12" y2="15"></line>
|
||||
|
|
@ -326,18 +311,18 @@ function createAlbumCard(album) {
|
|||
<div class="album-links">
|
||||
<div class="album-links-row">
|
||||
<a href="${generateWikipediaUrl(album.Album, album.Artist)}" target="_blank" rel="noopener noreferrer" class="wikipedia-link">
|
||||
View on Wikipedia →
|
||||
View on Wikipedia <span aria-hidden="true">→</span>
|
||||
</a>
|
||||
<a href="${generateSpotifyUrl(album.Album, album.Artist)}" target="_blank" rel="noopener noreferrer" class="spotify-link">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" style="margin-right: 0.5rem;">
|
||||
<svg aria-hidden="true" width="14" height="14" viewBox="0 0 24 24" fill="currentColor" style="margin-right: 0.5rem;">
|
||||
<path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.66 0 12 0zm5.521 17.34c-.24.359-.66.48-1.021.24-2.82-1.74-6.36-2.101-10.561-1.141-.418.122-.84-.179-.959-.539-.12-.421.18-.78.54-.9 4.56-1.021 8.52-.6 11.64 1.32.42.18.479.659.361 1.02zm1.44-3.3c-.301.42-.841.6-1.262.3-3.239-1.98-8.159-2.58-11.939-1.38-.479.12-1.02-.12-1.14-.6-.12-.48.12-1.021.6-1.141C9.6 9.9 15 10.561 18.72 12.84c.361.181.54.78.241 1.2zm.12-3.36C15.24 8.4 8.82 8.16 5.16 9.301c-.6.179-1.2-.181-1.38-.721-.18-.601.18-1.2.72-1.381 4.26-1.26 11.28-1.02 15.721 1.621.539.3.719 1.02.42 1.56-.299.421-1.02.599-1.559.3z"/>
|
||||
</svg>
|
||||
Listen on Spotify
|
||||
</a>
|
||||
</div>
|
||||
${hasNext ? `
|
||||
<button class="next-album-link next-album-link-wide" data-rank="${album.Rank}" title="Go to next album (#${nextAlbum.Rank})">
|
||||
Next Album →
|
||||
<button class="next-album-link next-album-link-wide" data-rank="${album.Rank}" aria-label="Go to next album, number ${nextAlbum.Rank}">
|
||||
Next Album <span aria-hidden="true">→</span>
|
||||
</button>
|
||||
` : ''}
|
||||
</div>
|
||||
|
|
@ -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');
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue