fix: lots of a11y improvements

src/dialogs/featHelp.ts

@@ -51,11 +51,13 @@ async function renderBody() {
 
   const featDescElem = document.createElement("h3");
   featDescElem.role = "subheading";
+  featDescElem.tabIndex = 0;
   featDescElem.textContent = t(`feature_desc_${curFeatKey}`);
   featDescElem.id = "bytm-feat-help-dialog-desc";
 
   const helpTextElem = document.createElement("div");
   helpTextElem.id = "bytm-feat-help-dialog-text";
+  helpTextElem.tabIndex = 0;
   // @ts-ignore
   const helpText: string | undefined = featInfo[curFeatKey]?.helpText?.();
   helpTextElem.textContent = helpText ?? t(`feature_helptext_${curFeatKey}`);

src/features/input.ts

@@ -19,7 +19,7 @@ export async function initArrowKeySkip() {
     if(!["ArrowLeft", "ArrowRight"].includes(evt.code))
       return;
     // discard the event when a (text) input is currently active, like when editing a playlist
-    if(inputIgnoreTagNames.includes(document.activeElement?.tagName ?? ""))
+    if(inputIgnoreTagNames.includes(document.activeElement?.tagName ?? "") || ["volume-slider"].includes(document.activeElement?.id ?? ""))
       return info(`Captured valid key to skip forward or backward but the current active element is <${document.activeElement?.tagName.toLowerCase()}>, so the keypress is ignored`);
 
     evt.preventDefault();

src/features/layout.ts

@@ -551,7 +551,7 @@ export async function initThumbnailOverlay() {
   
       onInteraction(toggleBtnElem, (e) => {
         if(e.shiftKey)
-          return openInTab(toggleBtnElem.href);
+          return openInTab(toggleBtnElem.href, e instanceof MouseEvent);
         invertOverlay = !invertOverlay;
         updateOverlayVisibility();
       });

src/menu/menu_old.ts

@@ -299,6 +299,7 @@ async function addCfgMenu() {
     catHeaderElem.classList.add("bytm-ftconf-category-header");
     catHeaderElem.role = "heading";
     catHeaderElem.ariaLevel = "2";
+    catHeaderElem.tabIndex = 0;
     catHeaderElem.textContent = `${t(`feature_category_${category}`)}:`;
     featuresCont.appendChild(catHeaderElem);
 
@@ -335,6 +336,7 @@ async function addCfgMenu() {
         }
 
         const textElem = document.createElement("span");
+        textElem.tabIndex = 0;
         textElem.textContent = t(`feature_desc_${featKey}`);
 
         let adornmentElem: undefined | HTMLElement;