Improve accessibility (#3710)

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);
   }
 

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);;
 }

assets/js/_helpers.js

@@ -6,6 +6,7 @@
 Array.prototype.find = Array.prototype.find || function (condition) {
     return this.filter(condition)[0];
 };
+
 Array.from = Array.from || function (source) {
     return Array.prototype.slice.call(source);
 };
@@ -201,15 +202,19 @@ window.helpers = window.helpers || {
         if (localStorageIsUsable) {
             return {
                 get: function (key) {
-                    if (!localStorage[key]) return;
+                    let storageItem = localStorage.getItem(key)
+                    if (!storageItem) return;
                     try {
-                        return JSON.parse(decodeURIComponent(localStorage[key]));
+                        return JSON.parse(decodeURIComponent(storageItem));
                     } catch(e) {
                         // Erase non parsable value
                         helpers.storage.remove(key);
                     }
                 },
-                set: function (key, value) { localStorage[key] = encodeURIComponent(JSON.stringify(value)); },
+                set: function (key, value) { 
+                    let encoded_value = encodeURIComponent(JSON.stringify(value))
+                    localStorage.setItem(key, encoded_value); 
+                },
                 remove: function (key) { localStorage.removeItem(key); }
             };
         }

assets/js/handlers.js

@@ -137,7 +137,7 @@
         if (focused_tag === 'textarea') return;
         if (focused_tag === 'input') {
             let focused_type = document.activeElement.type.toLowerCase();
-            if (!focused_type.match(allowed)) return;
+            if (!allowed.test(focused_type)) return;
         }
 
         // Focus search bar on '/'

assets/js/player.js

@@ -261,7 +261,7 @@ function updateCookie(newVolume, newSpeed) {
     var date = new Date();
     date.setFullYear(date.getFullYear() + 2);
 
-    var ipRegex = /^((\d+\.){3}\d+|[A-Fa-f0-9]*:[A-Fa-f0-9:]*:[A-Fa-f0-9:]+)$/;
+    var ipRegex = /^((\d+\.){3}\d+|[\dA-Fa-f]*:[\d:A-Fa-f]*:[\d:A-Fa-f]+)$/;
     var domainUsed = location.hostname;
 
     // Fix for a bug in FF where the leading dot in the FQDN is not ignored