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%;
|
border-radius: 50%;
|
||||||
color: var(--tertiary-text-color);
|
color: var(--tertiary-text-color);
|
||||||
transition: background 0.2s ease-out;
|
transition: background 0.2s ease-out;
|
||||||
|
stroke-width: 20;
|
||||||
|
stroke: var(--bg-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.playlistIcon:hover {
|
.playlistIcon:hover {
|
||||||
background-color: var(--side-nav-hover-color);
|
background-color: var(--side-nav-hover-color);
|
||||||
color: var(--side-nav-hover-text-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;
|
transition: background 0.2s ease-in;
|
||||||
}
|
}
|
||||||
|
|
||||||
.playlistIconActive {
|
.playlistIconActive {
|
||||||
color: var(--accent-color)
|
color: var(--accent-color);
|
||||||
|
stroke-width: 10;
|
||||||
|
stroke: var(--accent-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.playlistItems {
|
.playlistItems {
|
||||||
|
|
|
@ -56,6 +56,7 @@
|
||||||
:title="$t('Video.Loop Playlist')"
|
:title="$t('Video.Loop Playlist')"
|
||||||
role="button"
|
role="button"
|
||||||
tabindex="0"
|
tabindex="0"
|
||||||
|
:aria-pressed="loopEnabled"
|
||||||
@click="toggleLoop"
|
@click="toggleLoop"
|
||||||
@keydown.enter.prevent="toggleLoop"
|
@keydown.enter.prevent="toggleLoop"
|
||||||
@keydown.space.prevent="toggleLoop"
|
@keydown.space.prevent="toggleLoop"
|
||||||
|
@ -67,6 +68,7 @@
|
||||||
:title="$t('Video.Shuffle Playlist')"
|
:title="$t('Video.Shuffle Playlist')"
|
||||||
role="button"
|
role="button"
|
||||||
tabindex="0"
|
tabindex="0"
|
||||||
|
:aria-pressed="shuffleEnabled"
|
||||||
@click="toggleShuffle"
|
@click="toggleShuffle"
|
||||||
@keydown.enter.prevent="toggleShuffle"
|
@keydown.enter.prevent="toggleShuffle"
|
||||||
@keydown.space.prevent="toggleShuffle"
|
@keydown.space.prevent="toggleShuffle"
|
||||||
|
@ -78,6 +80,7 @@
|
||||||
:title="$t('Video.Reverse Playlist')"
|
:title="$t('Video.Reverse Playlist')"
|
||||||
role="button"
|
role="button"
|
||||||
tabindex="0"
|
tabindex="0"
|
||||||
|
:aria-pressed="reversePlaylist"
|
||||||
@click="toggleReversePlaylist"
|
@click="toggleReversePlaylist"
|
||||||
@keydown.enter.prevent="toggleReversePlaylist"
|
@keydown.enter.prevent="toggleReversePlaylist"
|
||||||
@keydown.space.prevent="toggleReversePlaylist"
|
@keydown.space.prevent="toggleReversePlaylist"
|
||||||
|
@ -109,6 +112,7 @@
|
||||||
:title="$t('Video.Pause on Current Video')"
|
:title="$t('Video.Pause on Current Video')"
|
||||||
role="button"
|
role="button"
|
||||||
tabindex="0"
|
tabindex="0"
|
||||||
|
:aria-pressed="pauseOnCurrentVideo"
|
||||||
@click="togglePauseOnCurrentVideo"
|
@click="togglePauseOnCurrentVideo"
|
||||||
@keydown.enter.prevent="togglePauseOnCurrentVideo"
|
@keydown.enter.prevent="togglePauseOnCurrentVideo"
|
||||||
@keydown.space.prevent="togglePauseOnCurrentVideo"
|
@keydown.space.prevent="togglePauseOnCurrentVideo"
|
||||||
|
|
Loading…
Reference in New Issue