update layout for accessibility
This commit is contained in:
Johan Lundberg
parent
94d8c4b43e
commit
0b91798c96
3 changed files with 190 additions and 73 deletions
139
styles.css
139
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);
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue