update layout for accessibility
This commit is contained in:
Johan Lundberg
parent
94d8c4b43e
commit
0b91798c96
3 changed files with 190 additions and 73 deletions
47
index.html
47
index.html
|
|
@ -10,13 +10,15 @@
|
|||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<a href="#albumsGrid" class="skip-link">Skip to albums</a>
|
||||
<header class="header">
|
||||
<div class="container">
|
||||
<p class="supertitle">Rolling Stone Magazine's</p>
|
||||
<h1 class="title">Top 500 Albums of All Time</h1>
|
||||
<p class="subtitle">The Greatest Albums Ever Made - 2023 Edition</p>
|
||||
<div class="header-theme-selector">
|
||||
<select id="themeSelect" class="theme-select-header" title="Choose theme">
|
||||
<label for="themeSelect" class="sr-only">Color theme</label>
|
||||
<select id="themeSelect" class="theme-select-header" aria-label="Color theme">
|
||||
<option value="">Gruvbox</option>
|
||||
<option value="purple">Basic Blue</option>
|
||||
<option value="dark">Dark</option>
|
||||
|
|
@ -34,9 +36,10 @@
|
|||
<div class="container">
|
||||
<div class="controls">
|
||||
<div class="search-container">
|
||||
<label for="searchInput" class="sr-only">Search albums and artists</label>
|
||||
<input type="text" id="searchInput" placeholder="Search albums, artists..." class="search-input">
|
||||
<button id="searchButton" class="search-button">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<button id="searchButton" class="search-button" aria-label="Search">
|
||||
<svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<circle cx="11" cy="11" r="8"></circle>
|
||||
<path d="m21 21-4.35-4.35"></path>
|
||||
</svg>
|
||||
|
|
@ -44,6 +47,7 @@
|
|||
</div>
|
||||
|
||||
<div class="filters">
|
||||
<label for="statusFilter" class="sr-only">Filter by status</label>
|
||||
<select id="statusFilter" class="filter-select">
|
||||
<option value="">All Albums</option>
|
||||
<option value="New in 2023">New in 2023</option>
|
||||
|
|
@ -53,6 +57,7 @@
|
|||
</select>
|
||||
|
||||
<div class="sort-controls">
|
||||
<label for="sortBy" class="sr-only">Sort albums by</label>
|
||||
<select id="sortBy" class="filter-select">
|
||||
<option value="rank">Sort by Rank</option>
|
||||
<option value="artist">Sort by Artist</option>
|
||||
|
|
@ -60,8 +65,8 @@
|
|||
<option value="year">Sort by Year</option>
|
||||
</select>
|
||||
|
||||
<button id="reverseButton" class="reverse-button" title="Reverse order">
|
||||
<span id="reverseIcon">
|
||||
<button id="reverseButton" class="reverse-button" aria-label="Reverse sort order" aria-pressed="false">
|
||||
<span id="reverseIcon" aria-hidden="true">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M3 6h18M3 12h18M3 18h18"></path>
|
||||
<path d="M21 6l-2-2-2 2M21 18l-2 2-2 2"></path>
|
||||
|
|
@ -74,41 +79,45 @@
|
|||
|
||||
<div class="bookmark-controls">
|
||||
<div class="jump-to-rank">
|
||||
<label for="jumpToRank" class="sr-only">Jump to rank number</label>
|
||||
<input type="number" id="jumpToRank" placeholder="Jump to..." min="1" max="500" class="rank-input">
|
||||
<button id="jumpButton" class="jump-button" title="Jump to rank">Go</button>
|
||||
<button id="jumpButton" class="jump-button" aria-label="Jump to rank">Go</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stats" id="stats">
|
||||
<div class="stat-item">
|
||||
<div class="stats" id="stats" role="region" aria-label="Album statistics">
|
||||
<button type="button" class="stat-item" data-filter="">
|
||||
<span class="stat-number" id="totalAlbums">500</span>
|
||||
<span class="stat-label">Total Albums</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
</button>
|
||||
<button type="button" class="stat-item" data-filter="New in 2023">
|
||||
<span class="stat-number" id="newAlbums">192</span>
|
||||
<span class="stat-label">New in 2023</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
</button>
|
||||
<button type="button" class="stat-item" data-filter="improved">
|
||||
<span class="stat-number" id="improvedAlbums">164</span>
|
||||
<span class="stat-label">Improved</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
</button>
|
||||
<button type="button" class="stat-item" data-filter="dropped">
|
||||
<span class="stat-number" id="droppedAlbums">113</span>
|
||||
<span class="stat-label">Dropped</span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="albums-grid" id="albumsGrid">
|
||||
<!-- Live region for screen reader announcements -->
|
||||
<div aria-live="polite" aria-atomic="true" class="sr-only" id="resultsAnnouncement"></div>
|
||||
|
||||
<div class="albums-grid" id="albumsGrid" role="region" aria-label="Album list" tabindex="-1">
|
||||
<!-- Albums will be loaded here by JavaScript -->
|
||||
</div>
|
||||
|
||||
<div class="loading" id="loading">
|
||||
<div class="loading-spinner"></div>
|
||||
<div class="loading" id="loading" role="status" aria-live="polite">
|
||||
<div class="loading-spinner" aria-hidden="true"></div>
|
||||
<p>Loading albums...</p>
|
||||
</div>
|
||||
|
||||
<div class="error" id="error" style="display: none;">
|
||||
<div class="error" id="error" role="alert" style="display: none;">
|
||||
<p>Error loading albums. Please try again later.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue