fix: a11y improvements through ariaLive and ariaAtomic

src/config.ts

@@ -73,6 +73,7 @@ export const migrations: DataMigrationsDict = {
       "autoLikeChannels", "autoLikeChannelToggleBtn",
       "autoLikePlayerBarToggleBtn", "autoLikeTimeout",
       "autoLikeShowToast", "autoLikeOpenMgmtDialog",
+      "toastTimeout", "initTimeout",
     ]), [
       { key: "rememberSongTimeSites", oldDefault: "ytm" },
       { key: "volumeSliderScrollStep", oldDefault: 10 },

src/features/index.ts

@@ -1,4 +1,4 @@
-import { getPreferredLocale, resourceToHTMLString, t, tp } from "../utils";
+import { getPreferredLocale, getResourceUrl, resourceToHTMLString, t, tp } from "../utils";
 import { clearLyricsCache, getLyricsCache } from "./lyricsCache";
 import { doVersionCheck } from "./versionCheck";
 import { getFeatures, promptResetConfig } from "../config";
@@ -6,6 +6,8 @@ import { FeatureInfo, type ResourceKey, type SiteSelection, type SiteSelectionOr
 import { emitSiteEvent } from "../siteEvents";
 import langMapping from "../../assets/locales.json" with { type: "json" };
 import { getAutoLikeDialog } from "../dialogs";
+import { showIconToast } from "../components";
+import { mode } from "../constants";
 
 export * from "./layout";
 export * from "./behavior";
@@ -617,6 +619,22 @@ export const featInfo = {
     advanced: true,
     textAdornment: () => combineAdornments([adornments.advanced, adornments.reloadRequired]),
   },
+  toastTimeout: {
+    type: "slider",
+    category: "general",
+    min: 0,
+    max: 15,
+    default: 5,
+    step: 0.5,
+    unit: "s",
+    reloadRequired: false,
+    enable: noop,
+    change: () => showIconToast({
+      duration: getFeatures().toastTimeout * 1000,
+      message: "Example",
+      iconSrc: getResourceUrl(`img-logo${mode === "development" ? "_dev" : ""}`),
+    }),
+  },
   resetConfig: {
     type: "button",
     category: "general",

src/features/volume.ts

@@ -80,6 +80,7 @@ async function addVolumeSliderLabel(sliderElem: HTMLInputElement, sliderContaine
       linkIconElem.id = "bytm-vol-slider-shared";
       linkIconElem.innerHTML = linkIconHtml;
       linkIconElem.role = "alert";
+      linkIconElem.ariaLive = "polite";
       linkIconElem.title = linkIconElem.ariaLabel = t("volume_shared_tooltip");
 
       labelContElem.classList.add("has-icon");

src/menu/menu_old.ts

@@ -156,6 +156,7 @@ async function addCfgMenu() {
   reloadFooterEl.setAttribute("aria-hidden", "true");
   reloadFooterEl.textContent = t("reload_hint");
   reloadFooterEl.role = "alert";
+  reloadFooterEl.ariaLive = "polite";
 
   const reloadTxtEl = document.createElement("button");
   reloadTxtEl.classList.add("bytm-btn");