🚧Improve tab usability (#3296) devkennyy

* 🚸Call `screenshot` after `Enter` is pressed

`screenshot` is only called on click which does not support tab usage.

* 🐛 Make `Contact` and `Donate` fields tabbable

* ♿️ Open leaderboard popup on `Enter` keypress

* ♿️ Open support popup on `Enter` keypress

* ♿️ Open contact popup on `Enter` keypress

* ✏️ Rename `Donate` field to `Support`

* ♿️ Hide `contact` and `support` popups on `Escape`

frontend/src/ts/elements/leaderboards.ts

@@ -796,3 +796,9 @@ $(document).on("click", "#top #menu .textButton", (e) => {
   }
   return false;
 });
+
+$(document).on("keypress", "#top #menu .textButton", (e) => {
+  if (e.key === "Enter") {
+    $(e.currentTarget).trigger("click");
+  }
+});

frontend/src/ts/popups/contact-popup.ts

@@ -18,3 +18,23 @@ $(document.body).on("click", "#contactPopupWrapper", (e) => {
       });
   }
 });
+
+$(document.body).on(
+  "keypress",
+  "#contactPopupButton, #contactPopupButton2",
+  (e) => {
+    if (e.key === "Enter") {
+      $(e.currentTarget).trigger("click");
+    }
+  }
+);
+
+$(document).on("keydown", (e) => {
+  if (e.key === "Escape" && !$("#contactPopupWrapper").hasClass("hidden")) {
+    $("#contactPopupWrapper")
+      .css("opacity", 1)
+      .animate({ opacity: 0 }, 125, () => {
+        $("#contactPopupWrapper").addClass("hidden");
+      });
+  }
+});

frontend/src/ts/popups/support-popup.ts

@@ -33,3 +33,23 @@ $(document.body).on("click", "#supportMeWrapper a.button", () => {
       $("#supportMeWrapper").addClass("hidden");
     });
 });
+
+$(document.body).on(
+  "keypress",
+  "#supportMeButton, #supportMeAboutButton",
+  (e) => {
+    if (e.key === "Enter") {
+      $(e.currentTarget).trigger("click");
+    }
+  }
+);
+
+$(document).on("keydown", (e) => {
+  if (e.key === "Escape" && !$("#supportMeWrapper").hasClass("hidden")) {
+    $("#supportMeWrapper")
+      .css("opacity", 1)
+      .animate({ opacity: 0 }, 125, () => {
+        $("#supportMeWrapper").addClass("hidden");
+      });
+  }
+});

frontend/src/ts/test/test-ui.ts

@@ -912,6 +912,12 @@ $(document.body).on("click", "#saveScreenshotButton", () => {
   screenshot();
 });
 
+$("#saveScreenshotButton").on("keypress", (e) => {
+  if (e.key === "Enter") {
+    screenshot();
+  }
+});
+
 $(document).on("click", "#testModesNotice .textButton.blind", () => {
   UpdateConfig.setBlindMode(!Config.blindMode);
 });

frontend/static/html/bottom.html

@@ -19,7 +19,7 @@
   </div>
   <div class="leftright">
     <div class="left">
-      <a class="textButton" id="contactPopupButton">
+      <a tabindex="0" class="textButton" id="contactPopupButton">
         <i class="fas fa-fw fa-envelope"></i>
         <div class="text">Contact</div>
       </a>
@@ -63,9 +63,9 @@
         <i class="fas fa-fw fa-lock"></i>
         <div class="text">Privacy</div>
       </a>
-      <a id="supportMeButton" class="textButton">
+      <a tabindex="0" id="supportMeButton" class="textButton">
         <i class="fas fa-fw fa-donate"></i>
-        <div class="text">Donate</div>
+        <div class="text">Support</div>
       </a>
     </div>
     <div class="right">