From bab0dad074d8757eb8fff19e2de317bdce27a5ce Mon Sep 17 00:00:00 2001 From: jang_yoonsu Date: Sat, 13 Apr 2024 23:30:13 +0900 Subject: [PATCH 1/5] Add aria-pressed attribute to playlist icon button --- .../components/watch-video-playlist/watch-video-playlist.vue | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/renderer/components/watch-video-playlist/watch-video-playlist.vue b/src/renderer/components/watch-video-playlist/watch-video-playlist.vue index 2fd2f60f5035d..552b24729dfb4 100644 --- a/src/renderer/components/watch-video-playlist/watch-video-playlist.vue +++ b/src/renderer/components/watch-video-playlist/watch-video-playlist.vue @@ -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" From f30a042235178e549863fc82ffdffb0f996db64a Mon Sep 17 00:00:00 2001 From: jang_yoonsu Date: Sat, 13 Apr 2024 23:40:44 +0900 Subject: [PATCH 2/5] Improve accessibility by adjusting stroke thickness of playlist icon --- .../watch-video-playlist/watch-video-playlist.css | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/renderer/components/watch-video-playlist/watch-video-playlist.css b/src/renderer/components/watch-video-playlist/watch-video-playlist.css index 53a8753a8f1ae..ac852867bcaa1 100644 --- a/src/renderer/components/watch-video-playlist/watch-video-playlist.css +++ b/src/renderer/components/watch-video-playlist/watch-video-playlist.css @@ -51,16 +51,22 @@ 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: 10; + stroke: var(--side-nav-hover-text-color); transition: background 0.2s ease-in; } .playlistIconActive { - color: var(--accent-color) + color: var(--accent-color); + stroke-width: 10; + stroke: var(--accent-color); } .playlistItems { From e72b5b7d8806857da22fda83e6f4977c1896178f Mon Sep 17 00:00:00 2001 From: jang_yoonsu Date: Sun, 14 Apr 2024 01:30:33 +0900 Subject: [PATCH 3/5] Fix to keep the inactive hover state the same --- .../components/watch-video-playlist/watch-video-playlist.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/renderer/components/watch-video-playlist/watch-video-playlist.css b/src/renderer/components/watch-video-playlist/watch-video-playlist.css index ac852867bcaa1..2ea60088a6378 100644 --- a/src/renderer/components/watch-video-playlist/watch-video-playlist.css +++ b/src/renderer/components/watch-video-playlist/watch-video-playlist.css @@ -58,8 +58,8 @@ .playlistIcon:hover { background-color: var(--side-nav-hover-color); color: var(--side-nav-hover-text-color); - stroke-width: 10; - stroke: var(--side-nav-hover-text-color); + stroke-width: 20; + stroke: var(--side-nav-hover-color); transition: background 0.2s ease-in; } From 445f0399168a48f7a0bf7767f5e2a5d1e48861bc Mon Sep 17 00:00:00 2001 From: jang_yoonsu Date: Sun, 14 Apr 2024 02:03:13 +0900 Subject: [PATCH 4/5] Update playlist icon active hover style --- .../watch-video-playlist/watch-video-playlist.css | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/renderer/components/watch-video-playlist/watch-video-playlist.css b/src/renderer/components/watch-video-playlist/watch-video-playlist.css index 2ea60088a6378..4d7895a29aa97 100644 --- a/src/renderer/components/watch-video-playlist/watch-video-playlist.css +++ b/src/renderer/components/watch-video-playlist/watch-video-playlist.css @@ -63,6 +63,14 @@ transition: background 0.2s ease-in; } +.playlistIconActive:hover { + background-color: var(--side-nav-hover-color); + color: var(--side-nav-hover-text-color); + stroke-width: 10; + stroke: var(--side-nav-hover-text-color); + transition: background 0.2s ease-in; +} + .playlistIconActive { color: var(--accent-color); stroke-width: 10; From fb1422aad2a5daeeb6a75bc3346f41b30c78c88d Mon Sep 17 00:00:00 2001 From: jang_yoonsu Date: Sun, 14 Apr 2024 09:38:54 +0900 Subject: [PATCH 5/5] Update playlist icon active hover color to --accent-color-hover --- .../components/watch-video-playlist/watch-video-playlist.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/renderer/components/watch-video-playlist/watch-video-playlist.css b/src/renderer/components/watch-video-playlist/watch-video-playlist.css index 4d7895a29aa97..d327b87756ab1 100644 --- a/src/renderer/components/watch-video-playlist/watch-video-playlist.css +++ b/src/renderer/components/watch-video-playlist/watch-video-playlist.css @@ -65,9 +65,9 @@ .playlistIconActive:hover { background-color: var(--side-nav-hover-color); - color: var(--side-nav-hover-text-color); + color: var(--accent-color-hover); stroke-width: 10; - stroke: var(--side-nav-hover-text-color); + stroke: var(--accent-color-hover); transition: background 0.2s ease-in; }