Improve accessibility (#3710)

2 files changed, 23 insertions, 9 deletions

diff --git a/assets/css/default.css b/assets/css/default.css
index 88ec6ef1..42f6958f 100644
--- a/assets/css/default.css
+++ b/assets/css/default.css
@@ -119,13 +119,16 @@ body a.pure-button {
 
 button.pure-button-primary,
 body a.pure-button-primary,
-.channel-owner:hover {
+.channel-owner:hover,
+.channel-owner:focus {
   background-color: #a0a0a0;
   color: rgba(35, 35, 35, 1);
 }
 
 button.pure-button-primary:hover,
-body a.pure-button-primary:hover {
+body a.pure-button-primary:hover,
+button.pure-button-primary:focus,
+body a.pure-button-primary:focus {
   background-color: rgba(0, 182, 240, 1);
   color: #fff;
 }
@@ -227,6 +230,7 @@ div.watched-indicator {
 	border-radius: 0;
 
 	box-shadow: none;
+	appearance: none;
 	-webkit-appearance: none;
 }
 
@@ -365,11 +369,14 @@ span > select {
 
 .light-theme a:hover,
 .light-theme a:active,
-.light-theme summary:hover {
+.light-theme summary:hover,
+.light-theme a:focus,
+.light-theme summary:focus {
   color: #075A9E !important;
 }
 
-.light-theme a.pure-button-primary:hover {
+.light-theme a.pure-button-primary:hover,
+.light-theme a.pure-button-primary:focus {
   color: #fff !important;
 }
 
@@ -392,11 +399,14 @@ span > select {
 @media (prefers-color-scheme: light) {
   .no-theme a:hover,
   .no-theme a:active,
-  .no-theme summary:hover  {
+  .no-theme summary:hover,
+  .no-theme a:focus,
+  .no-theme summary:focus {
     color: #075A9E !important;
   }
 
-  .no-theme a.pure-button-primary:hover {
+  .no-theme a.pure-button-primary:hover,
+  .no-theme a.pure-button-primary:focus {
     color: #fff !important;
   }
 
@@ -423,7 +433,9 @@ span > select {
 
 .dark-theme a:hover,
 .dark-theme a:active,
-.dark-theme summary:hover {
+.dark-theme summary:hover,
+.dark-theme a:focus,
+.dark-theme summary:focus {
   color: rgb(0, 182, 240);
 }
 
@@ -462,7 +474,8 @@ body.dark-theme {
 
 @media (prefers-color-scheme: dark) {
   .no-theme a:hover,
-  .no-theme a:active {
+  .no-theme a:active,
+  .no-theme a:focus {
     color: rgb(0, 182, 240);
   }
 
diff --git a/assets/css/embed.css b/assets/css/embed.css
index 466a284a..cbafcfea 100644
--- a/assets/css/embed.css
+++ b/assets/css/embed.css
@@ -21,6 +21,7 @@
   color: white;
 }
 
-.watch-on-invidious > a:hover {
+.watch-on-invidious > a:hover,
+.watch-on-invidious > a:focus {
   color: rgba(0, 182, 240, 1);;
 }