feat: tabbable watermark & esc to close menu

dist/BetterYTM.user.js

@@ -486,7 +486,7 @@ const scriptInfo = Object.freeze({
     name: GM.info.script.name,
     version: GM.info.script.version,
     namespace: GM.info.script.namespace,
-    lastCommit: "0f3557a", // assert as generic string instead of union
+    lastCommit: "4d46e00", // assert as generic string instead of union
 });
 
 
@@ -839,12 +839,15 @@ function preInitLayout() {
 //#MARKER watermark
 /** Adds a watermark beneath the logo */
 function addWatermark() {
-    const watermark = document.createElement("span");
+    const watermark = document.createElement("a");
+    watermark.role = "button";
     watermark.id = "betterytm-watermark";
     watermark.className = "style-scope ytmusic-nav-bar";
     watermark.innerText = _constants__WEBPACK_IMPORTED_MODULE_0__.scriptInfo.name;
     watermark.title = "Open menu";
+    watermark.tabIndex = 1000;
     watermark.addEventListener("click", () => (0,_menu_menu_old__WEBPACK_IMPORTED_MODULE_3__.openMenu)());
+    watermark.addEventListener("keydown", (e) => e.key === "Enter" && (0,_menu_menu_old__WEBPACK_IMPORTED_MODULE_3__.openMenu)());
     const logoElem = document.querySelector("#left-content");
     (0,_utils__WEBPACK_IMPORTED_MODULE_2__.insertAfter)(logoElem, watermark);
     (0,_utils__WEBPACK_IMPORTED_MODULE_2__.log)("Added watermark element:", watermark);
@@ -1256,6 +1259,10 @@ function addMenu() {
             if (e.target.id === "betterytm-menu-bg")
                 closeMenu();
         });
+        document.body.addEventListener("keydown", ({ key }) => {
+            if (key === "Escape")
+                closeMenu();
+        });
         const menuContainer = document.createElement("div");
         menuContainer.title = "";
         menuContainer.id = "betterytm-menu";

src/features/layout.ts

@@ -15,13 +15,16 @@ export async function preInitLayout() {
 
 /** Adds a watermark beneath the logo */
 export function addWatermark() {
-  const watermark = document.createElement("span");
+  const watermark = document.createElement("a");
+  watermark.role = "button";
   watermark.id = "betterytm-watermark";
   watermark.className = "style-scope ytmusic-nav-bar";
   watermark.innerText = scriptInfo.name;
   watermark.title = "Open menu";
+  watermark.tabIndex = 1000;
 
   watermark.addEventListener("click", () => openMenu());
+  watermark.addEventListener("keydown", (e) => e.key === "Enter" && openMenu());
 
   const logoElem = document.querySelector("#left-content") as HTMLElement;
   insertAfter(logoElem, watermark);

src/features/menu/menu_old.ts

@@ -21,6 +21,10 @@ export async function addMenu() {
     if((e.target as HTMLElement).id === "betterytm-menu-bg")
       closeMenu();
   });
+  document.body.addEventListener("keydown", ({ key }) => {
+    if(key === "Escape")
+      closeMenu();
+  });
 
   const menuContainer = document.createElement("div");
   menuContainer.title = "";

src/tools/post-build.ts

@@ -12,6 +12,8 @@ const scriptUrl = `https://raw.githubusercontent.com/${repo}/main/dist/${userscr
 const matchUrls = [
   "https://music.youtube.com/*", "https://www.youtube.com/*"
 ];
+/** Whether to trigger the bell sound in some terminals when the code has finished compiling */
+const ringBell = true;
 
 const matchDirectives = matchUrls.reduce((a, c) => a + `// @match           ${c}\n`, "");
 
@@ -73,6 +75,8 @@ ${matchDirectives}\
     console.info(`Successfully added the userscript header. Last commit SHA is ${lastCommitSha}`);
     console.info(`Final size is \x1b[32m${((await stat(scriptPath)).size / 1024).toFixed(2)} KiB\x1b[0m\n`);
 
+    ringBell && process.stdout.write("\u0007");
+
     setImmediate(() => process.exit(0));
   }
   catch(err) {

src/tools/serve.ts

@@ -7,8 +7,6 @@ import webpackCfg from "../../webpack.config.js";
 const devServerPort = 8710;
 /** Whether to log requests to the console */
 const enableLogging = false;
-/** Whether to make a bell sound (in some terminals) when the userscript is ready to be fetched */
-const ringBell = true;
 
 const app = express();
 
@@ -38,5 +36,4 @@ app.listen(devServerPort, "0.0.0.0", () => {
     process.stdout.write("\nRequests: ");
   else
     console.log("\x1b[2m(request logging is disabled)\x1b[0m");
-  ringBell && process.stdout.write("\u0007");
 });