fix: a11y

src/dialogs/autoLike.ts

@@ -87,7 +87,8 @@ async function renderHeader() {
   headerEl.classList.add("bytm-dialog-title");
   headerEl.role = "heading";
   headerEl.ariaLevel = "1";
-  headerEl.textContent = t("auto_like_channels_dialog_title");
+  headerEl.tabIndex = 0;
+  headerEl.textContent = headerEl.ariaLabel = t("auto_like_channels_dialog_title");
 
   return headerEl;
 }

src/dialogs/changelog.ts

@@ -43,7 +43,8 @@ async function renderHeader() {
   headerEl.classList.add("bytm-dialog-title");
   headerEl.role = "heading";
   headerEl.ariaLevel = "1";
-  headerEl.textContent = t("changelog_menu_title", scriptInfo.name);
+  headerEl.tabIndex = 0;
+  headerEl.textContent = headerEl.ariaLabel = t("changelog_menu_title", scriptInfo.name);
 
   return headerEl;
 }

src/dialogs/exportCfg.ts

@@ -50,7 +50,8 @@ async function renderHeader() {
   headerEl.classList.add("bytm-menu-title");
   headerEl.role = "heading";
   headerEl.ariaLevel = "1";
-  headerEl.textContent = t("export_menu_title", scriptInfo.name);
+  headerEl.tabIndex = 0;
+  headerEl.textContent = headerEl.ariaLabel = t("export_menu_title", scriptInfo.name);
 
   return headerEl;
 }

src/dialogs/featHelp.ts

@@ -37,8 +37,6 @@ export async function getFeatHelpDialog({
 
 async function renderHeader() {
   const headerEl = document.createElement("div");
-  headerEl.role = "heading";
-  headerEl.ariaLevel = "1";
   const helpIconSvg = await resourceToHTMLString("icon-help");
   if(helpIconSvg)
     headerEl.innerHTML = helpIconSvg;

src/dialogs/importCfg.ts

@@ -32,7 +32,8 @@ async function renderHeader() {
   headerEl.classList.add("bytm-dialog-title");
   headerEl.role = "heading";
   headerEl.ariaLevel = "1";
-  headerEl.textContent = t("import_menu_title", scriptInfo.name);
+  headerEl.tabIndex = 0;
+  headerEl.textContent = headerEl.ariaLabel = t("import_menu_title", scriptInfo.name);
 
   return headerEl;
 }

src/dialogs/versionNotif.ts

@@ -41,17 +41,12 @@ export async function getVersionNotifDialog({
 }
 
 async function renderHeader() {
-  const headerEl = document.createElement("div");
-  headerEl.role = "heading";
-  headerEl.ariaLevel = "1";
-
   const logoEl = document.createElement("img");
   logoEl.classList.add("bytm-dialog-header-img", "bytm-no-select");
   logoEl.src = await getResourceUrl(mode === "development" ? "img-logo_dev" : "img-logo");
   logoEl.alt = "BetterYTM logo";
 
-  headerEl.appendChild(logoEl);
-  return headerEl;
+  return logoEl;
 }
 
 let disableUpdateCheck = false;

src/dialogs/welcome.ts

@@ -43,6 +43,7 @@ async function renderHeader() {
   titleElem.classList.add("bytm-dialog-title");
   titleElem.role = "heading";
   titleElem.ariaLevel = "1";
+  titleElem.tabIndex = 0;
 
   titleWrapperElem.appendChild(titleLogoElem);
   titleWrapperElem.appendChild(titleElem);
@@ -103,6 +104,7 @@ async function renderBody() {
 
   const line1Elem = document.createElement("span");
   line1Elem.id = "bytm-welcome-text-line1";
+  line1Elem.tabIndex = 0;
   textElems.push(line1Elem);
 
   const br1Elem = document.createElement("br");
@@ -110,6 +112,7 @@ async function renderBody() {
 
   const line2Elem = document.createElement("span");
   line2Elem.id = "bytm-welcome-text-line2";
+  line2Elem.tabIndex = 0;
   textElems.push(line2Elem);
 
   const br2Elem = document.createElement("br");
@@ -119,6 +122,7 @@ async function renderBody() {
 
   const line3Elem = document.createElement("span");
   line3Elem.id = "bytm-welcome-text-line3";
+  line3Elem.tabIndex = 0;
   textElems.push(line3Elem);
 
   const br4Elem = document.createElement("br");
@@ -126,6 +130,7 @@ async function renderBody() {
 
   const line4Elem = document.createElement("span");
   line4Elem.id = "bytm-welcome-text-line4";
+  line4Elem.tabIndex = 0;
   textElems.push(line4Elem);
 
   const br5Elem = document.createElement("br");
@@ -135,6 +140,7 @@ async function renderBody() {
 
   const line5Elem = document.createElement("span");
   line5Elem.id = "bytm-welcome-text-line5";
+  line5Elem.tabIndex = 0;
   textElems.push(line5Elem);
 
   textElems.forEach((elem) => textElem.appendChild(elem));
@@ -151,25 +157,25 @@ function retranslateWelcomeMenu() {
   };
 
   const changes = {
-    "#bytm-welcome-menu-title": (e: HTMLElement) => e.textContent = t("welcome_menu_title", scriptInfo.name),
+    "#bytm-welcome-menu-title": (e: HTMLElement) => e.textContent = e.ariaLabel = t("welcome_menu_title", scriptInfo.name),
     "#bytm-welcome-menu-title-close": (e: HTMLElement) => e.ariaLabel = e.title = t("close_menu_tooltip"),
     "#bytm-welcome-menu-open-cfg": (e: HTMLElement) => {
-      e.textContent = t("config_menu");
+      e.textContent = e.ariaLabel = t("config_menu");
       e.ariaLabel = e.title = t("open_config_menu_tooltip");
     },
     "#bytm-welcome-menu-open-changelog": (e: HTMLElement) => {
-      e.textContent = t("open_changelog");
+      e.textContent = e.ariaLabel = t("open_changelog");
       e.ariaLabel = e.title = t("open_changelog_tooltip");
     },
     "#bytm-welcome-menu-footer-close": (e: HTMLElement) => {
-      e.textContent = t("close");
+      e.textContent = e.ariaLabel = t("close");
       e.ariaLabel = e.title = t("close_menu_tooltip");
     },
-    "#bytm-welcome-text-line1": (e: HTMLElement) => e.innerHTML = t("welcome_text_line_1"),
-    "#bytm-welcome-text-line2": (e: HTMLElement) => e.innerHTML = t("welcome_text_line_2", scriptInfo.name),
-    "#bytm-welcome-text-line3": (e: HTMLElement) => e.innerHTML = t("welcome_text_line_3", scriptInfo.name, ...getLink(`${pkg.hosts.greasyfork}/feedback`), ...getLink(pkg.hosts.openuserjs)),
-    "#bytm-welcome-text-line4": (e: HTMLElement) => e.innerHTML = t("welcome_text_line_4", ...getLink(pkg.funding.url)),
-    "#bytm-welcome-text-line5": (e: HTMLElement) => e.innerHTML = t("welcome_text_line_5", ...getLink(pkg.bugs.url)),
+    "#bytm-welcome-text-line1": (e: HTMLElement) => e.innerHTML = e.ariaLabel = t("welcome_text_line_1"),
+    "#bytm-welcome-text-line2": (e: HTMLElement) => e.innerHTML = e.ariaLabel = t("welcome_text_line_2", scriptInfo.name),
+    "#bytm-welcome-text-line3": (e: HTMLElement) => e.innerHTML = e.ariaLabel = t("welcome_text_line_3", scriptInfo.name, ...getLink(`${pkg.hosts.greasyfork}/feedback`), ...getLink(pkg.hosts.openuserjs)),
+    "#bytm-welcome-text-line4": (e: HTMLElement) => e.innerHTML = e.ariaLabel = t("welcome_text_line_4", ...getLink(pkg.funding.url)),
+    "#bytm-welcome-text-line5": (e: HTMLElement) => e.innerHTML = e.ariaLabel = t("welcome_text_line_5", ...getLink(pkg.bugs.url)),
   };
 
   for(const [selector, fn] of Object.entries(changes)) {