mirror of https://github.com/FreeTubeApp/FreeTube
Fix/ Improve accessibility of playlist icon buttons (#4943)
* Add aria-pressed attribute to playlist icon button * Improve accessibility by adjusting stroke thickness of playlist icon * Fix to keep the inactive hover state the same * Update playlist icon active hover style * Update playlist icon active hover color to --accent-color-hover
This commit is contained in:
parent
dfdab0dd5d
commit
e087008707
|
@ -51,16 +51,30 @@
|
|||
border-radius: 50%;
|
||||
color: var(--tertiary-text-color);
|
||||
transition: background 0.2s ease-out;
|
||||
stroke-width: 20;
|
||||
stroke: var(--bg-color);
|
||||
}
|
||||
|
||||
.playlistIcon:hover {
|
||||
background-color: var(--side-nav-hover-color);
|
||||
color: var(--side-nav-hover-text-color);
|
||||
stroke-width: 20;
|
||||
stroke: var(--side-nav-hover-color);
|
||||
transition: background 0.2s ease-in;
|
||||
}
|
||||
|
||||
.playlistIconActive:hover {
|
||||
background-color: var(--side-nav-hover-color);
|
||||
color: var(--accent-color-hover);
|
||||
stroke-width: 10;
|
||||
stroke: var(--accent-color-hover);
|
||||
transition: background 0.2s ease-in;
|
||||
}
|
||||
|
||||
.playlistIconActive {
|
||||
color: var(--accent-color)
|
||||
color: var(--accent-color);
|
||||
stroke-width: 10;
|
||||
stroke: var(--accent-color);
|
||||
}
|
||||
|
||||
.playlistItems {
|
||||
|
|
|
@ -56,6 +56,7 @@
|
|||
:title="$t('Video.Loop Playlist')"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
:aria-pressed="loopEnabled"
|
||||
@click="toggleLoop"
|
||||
@keydown.enter.prevent="toggleLoop"
|
||||
@keydown.space.prevent="toggleLoop"
|
||||
|
@ -67,6 +68,7 @@
|
|||
:title="$t('Video.Shuffle Playlist')"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
:aria-pressed="shuffleEnabled"
|
||||
@click="toggleShuffle"
|
||||
@keydown.enter.prevent="toggleShuffle"
|
||||
@keydown.space.prevent="toggleShuffle"
|
||||
|
@ -78,6 +80,7 @@
|
|||
:title="$t('Video.Reverse Playlist')"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
:aria-pressed="reversePlaylist"
|
||||
@click="toggleReversePlaylist"
|
||||
@keydown.enter.prevent="toggleReversePlaylist"
|
||||
@keydown.space.prevent="toggleReversePlaylist"
|
||||
|
@ -109,6 +112,7 @@
|
|||
:title="$t('Video.Pause on Current Video')"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
:aria-pressed="pauseOnCurrentVideo"
|
||||
@click="togglePauseOnCurrentVideo"
|
||||
@keydown.enter.prevent="togglePauseOnCurrentVideo"
|
||||
@keydown.space.prevent="togglePauseOnCurrentVideo"
|
||||
|
|
Loading…
Reference in New Issue