lasers
/
FreeTube
mirror of https://github.com/FreeTubeApp/FreeTube
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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:
ynnsuis 2024-04-15 00:15:23 +09:00 committed by GitHub
parent dfdab0dd5d
commit e087008707
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 19 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/renderer/components/watch-video-playlist/watch-video-playlist.css
View File

@ -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 {

4
src/renderer/components/watch-video-playlist/watch-video-playlist.vue
View File

@ -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"