Merge pull request #2456 from ZhenShuo2021/fix/a11y

🐛 Fix(a11y): multiple a11y issues
2025-12-05 14:17:50 +08:00 · 2025-09-15 23:04:54 +01:00
parent e6cd7a9948 7af1ca359b
commit c14887e992
44 changed files with 256 additions and 237 deletions
--- a/assets/js/a11y.js
+++ b/assets/js/a11y.js
@@ -1,194 +1,170 @@
-const getA11ySettings = () => {
-  const settings = localStorage.getItem("a11ySettings");
-  return settings
-    ? JSON.parse(settings)
-    : {
-        disableBlur: false,
-        disableImages: false,
-        fontSize: "default",
-        underlineLinks: false,
-        zenMode: false,
-      };
-};
-
-const saveA11ySettings = (settings) => {
-  localStorage.setItem("a11ySettings", JSON.stringify(settings));
-};
-
-const applyImageState = (imageElement, imageUrl, disableImages) => {
-  if (!imageElement) return;
-  if (disableImages) {
-    imageElement.style.display = "none";
-  } else {
-    imageElement.style.display = "";
-    if (imageUrl && !imageElement.getAttribute("src")) {
-      imageElement.setAttribute("src", imageUrl);
-    }
-  }
-};
-
-const applyFontSize = (fontSizePx) => {
-  const isDefaultSettings = localStorage.getItem("a11ySettings") === null;
-  if (!isDefaultSettings && fontSizePx !== "default") {
-    document.documentElement.style.fontSize = fontSizePx;
-  }
-};
-
-const applyUnderlineLinks = (enabled) => {
-  let styleElement = document.getElementById("a11y-underline-links");
-  if (enabled) {
-    if (!styleElement) {
-      styleElement = document.createElement("style");
-      styleElement.id = "a11y-underline-links";
-      styleElement.textContent = "a { text-decoration: underline !important; }";
-      document.head.appendChild(styleElement);
-    }
-  } else {
-    if (styleElement) {
-      styleElement.remove();
-    }
-  }
-};
-
-const applyZenMode = (enabled) => {
-  const body = document.querySelector("body");
-  const isZenModeActive = body && body.classList.contains("zen-mode-enable");
-
-  // Toggle only if current state doesn't match desired state
-  if (enabled !== isZenModeActive) {
-    const zenModeCheckbox = document.querySelector('[id$="zen-mode"]');
-    if (zenModeCheckbox && typeof _toggleZenMode === "function") {
-      _toggleZenMode(zenModeCheckbox, { scrollToHeader: false });
-    }
-  }
-};
-
-const applyA11ySettings = () => {
-  const settings = getA11ySettings();
-  document.querySelectorAll("script[data-target-id]").forEach((script) => {
-    const targetId = script.getAttribute("data-target-id");
+window.A11yPanel = (() => {
+  const FEATURES = {
+    disableBlur: {
+      default: false,
+      apply: (enabled) => {
+        document.querySelectorAll("script[data-blur-id]").forEach((script) => {
+          const targetId = script.getAttribute("data-blur-id");
          const scrollDivisor = Number(script.getAttribute("data-scroll-divisor") || 300);
-    const imageId = script.getAttribute("data-image-id");
-    const imageUrl = script.getAttribute("data-image-url");
-    const isMenuBlur = targetId === "menu-blur";
-    setBackgroundBlur(targetId, scrollDivisor, settings.disableBlur, isMenuBlur);
-    applyImageState(document.getElementById(imageId), imageUrl, settings.disableImages);
-  });
-  applyFontSize(settings.fontSize);
-  applyUnderlineLinks(settings.underlineLinks);
-  applyZenMode(settings.zenMode);
-};
-
-const updateA11ySetting = (key, value) => {
-  const settings = getA11ySettings();
-  settings[key] = value;
-  saveA11ySettings(settings);
-  applyA11ySettings();
-};
-
-const toggleA11yPanel = (prefix = "") => {
-  const panel = document.getElementById(`${prefix}a11y-panel`);
-  const overlay = document.getElementById(`${prefix}a11y-overlay`);
-  const button = document.getElementById(`${prefix}a11y-toggle`);
-  if (!panel || !overlay || !button) return;
-  if (overlay.classList.contains("hidden")) {
-    overlay.classList.remove("hidden");
-    panel.classList.remove("hidden");
-    button.setAttribute("aria-pressed", "true");
-    button.setAttribute("aria-expanded", "true");
-  } else {
-    overlay.classList.add("hidden");
-    panel.classList.add("hidden");
-    button.setAttribute("aria-pressed", "false");
-    button.setAttribute("aria-expanded", "false");
+          if (typeof setBackgroundBlur === "function") {
+            setBackgroundBlur(targetId, scrollDivisor, enabled, targetId === "menu-blur");
          }
-};
+        });
+      },
+    },

-const initA11yPanel = (prefix = "") => {
-  const settings = getA11ySettings();
-  const checkboxBlur = document.getElementById(`${prefix}disable-blur`);
-  const checkboxImages = document.getElementById(`${prefix}disable-images`);
-  const checkboxUnderline = document.getElementById(`${prefix}underline-links`);
-  const checkboxZenMode = document.getElementById(`${prefix}zen-mode`);
-  const fontSizeSelect = document.getElementById(`${prefix}font-size-select`);
-  const toggleButton = document.getElementById(`${prefix}a11y-toggle`);
-  const closeButton = document.getElementById(`${prefix}a11y-close`);
+    disableImages: {
+      default: false,
+      apply: (enabled) => {
+        const image = document.getElementById("background-image");
+        if (image) {
+          image.style.display = enabled ? "none" : "";
+        }
+      },
+    },
+
+    fontSize: {
+      default: "default",
+      apply: (size) => {
+        document.documentElement.style.fontSize = size === "default" ? "" : size;
+      },
+    },
+
+    underlineLinks: {
+      default: false,
+      apply: (enabled) => {
+        const existing = document.getElementById("a11y-underline-links");
+        if (enabled && !existing) {
+          const style = document.createElement("style");
+          style.id = "a11y-underline-links";
+          style.textContent = `
+            a { text-decoration: underline !important; }
+            .group-hover-card-title { text-decoration: underline !important; }
+            .group-hover-card:hover .group-hover-card-title { text-decoration: underline !important; }`;
+          document.head.appendChild(style);
+        } else if (!enabled && existing) {
+          existing.remove();
+        }
+      },
+    },
+
+    zenMode: {
+      default: false,
+      apply: (enabled) => {
+        const isActive = document.body?.classList.contains("zen-mode-enable");
+        if (enabled !== isActive) {
+          const checkbox = document.querySelector('[id$="zen-mode"]');
+          if (checkbox && typeof _toggleZenMode === "function") {
+            _toggleZenMode(checkbox, { scrollToHeader: false });
+          }
+        }
+      },
+    },
+  };
+
+  let settings = null;
+
+  const getSettings = () => {
+    if (settings) return settings;
+    const defaults = Object.fromEntries(Object.entries(FEATURES).map(([key, config]) => [key, config.default]));
+    try {
+      const saved = localStorage.getItem("a11ySettings");
+      settings = { ...defaults, ...JSON.parse(saved || "{}") };
+    } catch {
+      settings = defaults;
+    }
+    return settings;
+  };
+
+  const updateSetting = (key, value) => {
+    const current = getSettings();
+    current[key] = value;
+    try {
+      localStorage.setItem("a11ySettings", JSON.stringify(current));
+    } catch (e) {
+      console.warn(`a11y.js: can not store settings: ${e}`);
+    }
+    FEATURES[key]?.apply(value);
+  };
+
+  const initPanel = (panelId) => {
+    const prefix = panelId.replace("a11y-panel", "");
+    const current = getSettings();
+
+    Object.entries(FEATURES).forEach(([key, config]) => {
+      const elementId = `${prefix}${key.replace(/([A-Z])/g, "-$1").toLowerCase()}`;
+      const element = document.getElementById(elementId) || document.getElementById(`${elementId}-select`);
+
+      if (element) {
+        if (element.type === "checkbox") {
+          element.checked = current[key];
+          element.onchange = (e) => updateSetting(key, e.target.checked);
+        } else if (element.tagName === "SELECT") {
+          element.value = current[key];
+          element.onchange = (e) => updateSetting(key, e.target.value);
+        }
+      }
+    });
+
+    const togglePanel = () => {
+      const panel = document.getElementById(panelId);
+      const overlay = document.getElementById(`${prefix}a11y-overlay`);
+      const toggle = document.getElementById(`${prefix}a11y-toggle`);
+
+      if (!panel || !overlay) return;
+
+      const isHidden = overlay.classList.contains("hidden");
+      overlay.classList.toggle("hidden");
+      panel.classList.toggle("hidden");
+
+      if (toggle) {
+        toggle.setAttribute("aria-pressed", String(isHidden));
+        toggle.setAttribute("aria-expanded", String(isHidden));
+      }
+    };
+
+    const toggle = document.getElementById(`${prefix}a11y-toggle`);
+    const close = document.getElementById(`${prefix}a11y-close`);
    const overlay = document.getElementById(`${prefix}a11y-overlay`);

-  if (
-    !checkboxBlur ||
-    !checkboxImages ||
-    !checkboxUnderline ||
-    !checkboxZenMode ||
-    !fontSizeSelect ||
-    !toggleButton ||
-    !closeButton ||
-    !overlay
-  ) {
-    console.warn(`One or more a11y elements not found for prefix: ${prefix}`);
-    return;
+    if (toggle) toggle.onclick = togglePanel;
+    if (close) close.onclick = togglePanel;
+    if (overlay) overlay.onclick = (e) => e.target === overlay && togglePanel();
+  };
+
+  const applyAll = () => {
+    const current = getSettings();
+    Object.entries(current).forEach(([key, value]) => {
+      FEATURES[key]?.apply(value);
+    });
+  };
+
+  const init = () => {
+    applyAll();
+    document.querySelectorAll('[id$="a11y-panel"]').forEach((panel) => {
+      initPanel(panel.id);
+    });
+  };
+
+  if (getSettings().disableImages) {
+    new MutationObserver(() => {
+      const img = document.getElementById("background-image");
+      if (img) img.style.display = "none";
+    }).observe(document, { childList: true, subtree: true });
  }

-  checkboxBlur.checked = settings.disableBlur;
-  checkboxImages.checked = settings.disableImages;
-  checkboxUnderline.checked = settings.underlineLinks;
-  checkboxZenMode.checked = settings.zenMode;
-  fontSizeSelect.value = settings.fontSize;
-
-  checkboxBlur.addEventListener("change", (e) => updateA11ySetting("disableBlur", e.target.checked));
-  checkboxImages.addEventListener("change", (e) => updateA11ySetting("disableImages", e.target.checked));
-  checkboxUnderline.addEventListener("change", (e) => updateA11ySetting("underlineLinks", e.target.checked));
-  checkboxZenMode.addEventListener("change", (e) => {
-    // Only save setting, let applyZenMode handle the toggle logic
-    updateA11ySetting("zenMode", e.target.checked);
-  });
-  fontSizeSelect.addEventListener("change", (e) => {
-    // Remove fontSize from localStorage when default is selected
-    if (e.target.value === "default") {
-      const settings = getA11ySettings();
-      delete settings.fontSize;
-      saveA11ySettings(settings);
-      document.documentElement.style.fontSize = "";
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", init);
  } else {
-      updateA11ySetting("fontSize", e.target.value);
+    init();
  }
-  });

-  toggleButton.addEventListener("click", () => toggleA11yPanel(prefix));
-  closeButton.addEventListener("click", () => toggleA11yPanel(prefix));
-  overlay.addEventListener("click", (e) => {
-    if (e.target === overlay) {
-      toggleA11yPanel(prefix);
-    }
-  });
-
-  document.querySelectorAll(`.ios-toggle${prefix ? `[id^="${prefix}"]` : ""}`).forEach((toggle) => {
-    const checkbox = toggle.querySelector('input[type="checkbox"]');
-    if (!checkbox) return;
-    const newToggle = toggle.cloneNode(true);
-    toggle.parentNode.replaceChild(newToggle, toggle);
-    newToggle.addEventListener("click", () => {
-      const newCheckbox = newToggle.querySelector('input[type="checkbox"]');
-      if (newCheckbox) {
-        newCheckbox.checked = !newCheckbox.checked;
-        newCheckbox.dispatchEvent(new Event("change", { bubbles: true }));
-      }
-    });
-  });
-};
-
-document.querySelectorAll("script[data-target-id]").forEach((script) => {
-  const imageId = script.getAttribute("data-image-id");
-  const imageUrl = script.getAttribute("data-image-url");
-  const settings = getA11ySettings();
-  applyImageState(document.getElementById(imageId), imageUrl, settings.disableImages);
-});
-
-document.addEventListener("DOMContentLoaded", () => {
-  applyA11ySettings();
-  const allPanels = document.querySelectorAll('[id$="a11y-panel"]');
-  allPanels.forEach((panel) => {
-    const prefix = panel.id.replace("a11y-panel", "");
-    initA11yPanel(prefix);
-  });
-});
+  return {
+    getSettings,
+    updateSetting,
+    addFeature: (name, config) => {
+      FEATURES[name] = config;
+      FEATURES[name].apply(getSettings()[name] || config.default);
+    },
+  };
+})();
--- a/assets/js/background-blur.js
+++ b/assets/js/background-blur.js
@@ -1,6 +1,6 @@
 function setBackgroundBlur(targetId, scrollDivisor = 300, disableBlur = false, isMenuBlur = false) {
  if (!targetId) {
-    console.error("data-target-id is null");
+    console.error("data-blur-id is null");
    return;
  }
  const blurElement = document.getElementById(targetId);
@@ -29,24 +29,11 @@ function setBackgroundBlur(targetId, scrollDivisor = 300, disableBlur = false, i
  updateBlur();
 }

-document.querySelectorAll("script[data-target-id]").forEach((script) => {
-  const targetId = script.getAttribute("data-target-id");
+document.querySelectorAll("script[data-blur-id]").forEach((script) => {
+  const targetId = script.getAttribute("data-blur-id");
  const scrollDivisor = Number(script.getAttribute("data-scroll-divisor") || 300);
  const isMenuBlur = targetId === "menu-blur";
  const settings = JSON.parse(localStorage.getItem("a11ySettings") || "{}");
  const disableBlur = settings.disableBlur || false;
  setBackgroundBlur(targetId, scrollDivisor, disableBlur, isMenuBlur);
 });
-
-// Prevent disableImages FOUC
-// Note: I tried putting this in a11y.js but it did not work, and placing it here prevents FOUC
-(() => {
-  const settings = JSON.parse(localStorage.getItem("a11ySettings") || "{}");
-  if (settings.disableImages) {
-    document.querySelectorAll("script[data-image-id]").forEach((script) => {
-      const imageId = script.getAttribute("data-image-id");
-      const image = imageId && document.getElementById(imageId);
-      if (image) image.style.display = "none";
-    });
-  }
-})();
--- a/i18n/ar.yaml
+++ b/i18n/ar.yaml
@@ -26,6 +26,7 @@ article:
  this_article: "هذه المقالة"

 a11y:
+  title: "إعدادات إمكانية الوصول"
  disable_blur: "تعطيل التمويه"
  disable_images: "تعطيل الصور"
  show_link_underline: "إظهار خط تحت الروابط"
--- a/i18n/bg.yaml
+++ b/i18n/bg.yaml
@@ -27,6 +27,7 @@ article:
  related_articles: "Подобни"

 a11y:
+  title: "Настройки за достъпност"
  disable_blur: "Изключване на замъгляването"
  disable_images: "Изключване на изображенията"
  show_link_underline: "Показване на подчертаване на връзките"
--- a/i18n/bn.yaml
+++ b/i18n/bn.yaml
@@ -26,6 +26,9 @@ article:
  this_article: "This Article"
  related_articles: "Related"

+a11y:
+  title: "অ্যাক্সেসিবিলিটি সেটিংস"
+
 author:
  byline_title: "লেখক"

--- a/i18n/ca.yaml
+++ b/i18n/ca.yaml
@@ -30,6 +30,7 @@ article:
    disable: "Desactivar mode zen"

 a11y:
+  title: "Configuració d'accessibilitat"
  disable_blur: "Desactiva el desenfocament"
  disable_images: "Desactiva les imatges"
  show_link_underline: "Mostra el subratllat dels enllaços"
--- a/i18n/cs.yaml
+++ b/i18n/cs.yaml
@@ -27,6 +27,7 @@ article:
  related_articles: "Related"

 a11y:
+  title: "Nastavení přístupnosti"
  disable_blur: "Zakázat rozmazání"
  disable_images: "Zakázat obrázky"
  show_link_underline: "Zobrazit podtržení odkazů"
--- a/i18n/de.yaml
+++ b/i18n/de.yaml
@@ -20,6 +20,9 @@ article:
  this_article: "Dieser Artikel"
  related_articles: "Verwandte Artikel"

+a11y:
+  title: "Einstellungen zur Barrierefreiheit"
+
 author:
  byline_title: "Autor"

--- a/i18n/en.yaml
+++ b/i18n/en.yaml
@@ -30,6 +30,7 @@ article:
    disable: "Disable zen mode"

 a11y:
+  title: "Accessibility settings"
  disable_blur: "Disable blur"
  disable_images: "Disable images"
  show_link_underline: "Show link underline"
--- a/i18n/eo.yaml
+++ b/i18n/eo.yaml
@@ -30,6 +30,7 @@ article:
    disable: "Malŝalti zen-reĝimon"

 a11y:
+  title: "Alirebleco-agordoj"
  disable_blur: "Malŝalti malklarigon"
  disable_images: "Malŝalti bildojn"
  show_link_underline: "Montri substrekojn de ligiloj"
--- a/i18n/es.yaml
+++ b/i18n/es.yaml
@@ -29,6 +29,9 @@ article:
    enable: "Activar modo zen"
    disable: "Desactivar modo zen"

+a11y:
+  title: "Configuración de accesibilidad"
+
 author:
  byline_title: "Autor"

--- a/i18n/fa.yaml
+++ b/i18n/fa.yaml
@@ -30,6 +30,7 @@ article:
    disable: "غیر فعال کردن حالت تمام متن"

 a11y:
+  title: "تنظیمات دسترسی"
  disable_blur: "غیرفعال کردن تاری"
  disable_images: "غیرفعال کردن تصاویر"
  show_link_underline: "نمایش زیرخط لینک"
--- a/i18n/fi.yaml
+++ b/i18n/fi.yaml
@@ -21,6 +21,7 @@ article:
  related_articles: "Related"

 a11y:
+  title: "Esteettömyysasetukset"
  disable_blur: "Poista sumennus käytöstä"
  disable_images: "Poista kuvat käytöstä"
  show_link_underline: "Näytä linkkien alleviivaus"
--- a/i18n/fr.yaml
+++ b/i18n/fr.yaml
@@ -23,6 +23,13 @@ article:
    enable: "Activer le mode zen"
    disable: "Désactiver le mode zen"

+a11y:
+  title: "Paramètres d'accessibilité"
+  disable_blur: "Désactiver le flou"
+  disable_images: "Désactiver les images"
+  show_link_underline: "Afficher le soulignement des liens"
+  font_size: "Taille de la police"
+
 author:
  byline_title: "Auteur"

--- a/i18n/gl.yaml
+++ b/i18n/gl.yaml
@@ -30,6 +30,7 @@ article:
    disable: "Desactivar modo zen"

 a11y:
+  title: "Axustes de accesibilidade"
  disable_blur: "Desactivar o desenfoque"
  disable_images: "Desactivar as imaxes"
  show_link_underline: "Mostrar subliñado da ligazón"
--- a/i18n/he.yaml
+++ b/i18n/he.yaml
@@ -21,6 +21,7 @@ article:
  related_articles: "Related"

 a11y:
+  title: "הגדרות נגישות"
  disable_blur: "השבת טשטוש"
  disable_images: "השבת תמונות"
  show_link_underline: "הצג קו תחתון לקישורים"
--- a/i18n/hr.yaml
+++ b/i18n/hr.yaml
@@ -26,6 +26,9 @@ article:
  this_article: "This Article"
  related_articles: "Related"

+a11y:
+  title: "Postavke pristupačnosti"
+
 author:
  byline_title: "Autor"

--- a/i18n/hu.yaml
+++ b/i18n/hu.yaml
@@ -21,6 +21,7 @@ article:
  related_articles: "Related"

 a11y:
+  title: "Akadálymentességi beállítások"
  disable_blur: "Elmosódás kikapcsolása"
  disable_images: "Képek kikapcsolása"
  show_link_underline: "Link aláhúzásának megjelenítése"
--- a/i18n/id.yaml
+++ b/i18n/id.yaml
@@ -27,6 +27,7 @@ article:
  related_articles: "Terkait"

 a11y:
+  title: "Pengaturan aksesibilitas"
  disable_blur: "Nonaktifkan blur"
  disable_images: "Nonaktifkan gambar"
  show_link_underline: "Tampilkan garis bawah tautan"
--- a/i18n/it.yaml
+++ b/i18n/it.yaml
@@ -20,6 +20,13 @@ article:
  this_article: "This Article"
  related_articles: "Related"

+a11y:
+  title: "Impostazioni di accessibilità"
+  disable_blur: "Disattiva sfocatura"
+  disable_images: "Disattiva immagini"
+  show_link_underline: "Mostra sottolineatura link"
+  font_size: "Dimensione del carattere"
+
 author:
  byline_title: "Autore"

--- a/i18n/ja.yaml
+++ b/i18n/ja.yaml
@@ -30,6 +30,7 @@ article:
    disable: "Zenモードを無効にする"

 a11y:
+  title: "アクセシビリティ設定"
  disable_blur: "ぼかしを無効にする"
  disable_images: "画像を無効にする"
  show_link_underline: "リンクの下線を表示する"
--- a/i18n/ko.yaml
+++ b/i18n/ko.yaml
@@ -27,6 +27,7 @@ article:
  related_articles: "관련 글"

 a11y:
+  title: "접근성 설정"
  disable_blur: "흐림 효과 끄기"
  disable_images: "이미지 끄기"
  show_link_underline: "링크 밑줄 표시"
--- a/i18n/nl.yaml
+++ b/i18n/nl.yaml
@@ -29,6 +29,9 @@ article:
    enable: "Zen-modus inschakelen"
    disable: "Zen-modus uitschakelen"

+a11y:
+  title: "Toegankelijkheidsinstellingen"
+
 author:
  byline_title: "Auteur"

--- a/i18n/pl.yaml
+++ b/i18n/pl.yaml
@@ -27,6 +27,7 @@ article:
  related_articles: "Related"

 a11y:
+  title: "Ustawienia dostępności"
  disable_blur: "Wyłącz rozmycie"
  disable_images: "Wyłącz obrazy"
  show_link_underline: "Pokaż podkreślenie linków"
--- a/i18n/pt-BR.yaml
+++ b/i18n/pt-BR.yaml
@@ -24,6 +24,7 @@ article:
  related_articles: "Relacionados"

 a11y:
+  title: "Configurações de acessibilidade"
  disable_blur: "Desativar desfoque"
  disable_images: "Desativar imagens"
  show_link_underline: "Mostrar sublinhado de links"
--- a/i18n/pt-PT.yaml
+++ b/i18n/pt-PT.yaml
@@ -23,6 +23,13 @@ article:
  this_article: "Este artigo"
  related_articles: "Relacionados"

+a11y:
+  title: "Definições de acessibilidade"
+  disable_blur: "Desativar desfoque"
+  disable_images: "Desativar imagens"
+  show_link_underline: "Mostrar sublinhado de links"
+  font_size: "Tamanho da fonte"
+
 author:
  byline_title: "Autor"

--- a/i18n/ro.yaml
+++ b/i18n/ro.yaml
@@ -21,6 +21,7 @@ article:
  related_articles: "Related"

 a11y:
+  title: "Setări de accesibilitate"
  disable_blur: "Dezactivează estomparea"
  disable_images: "Dezactivează imaginile"
  show_link_underline: "Afișează sublinierea linkurilor"
--- a/i18n/ru.yaml
+++ b/i18n/ru.yaml
@@ -27,6 +27,7 @@ article:
  related_articles: "Related"

 a11y:
+  title: "Настройки доступности"
  disable_blur: "Отключить размытие"
  disable_images: "Отключить изображения"
  show_link_underline: "Показать подчеркивание ссылок"
--- a/i18n/sv.yaml
+++ b/i18n/sv.yaml
@@ -21,6 +21,7 @@ article:
  related_articles: "Relaterade"

 a11y:
+  title: "Tillgänglighetsinställningar"
  disable_blur: "Inaktivera suddighet"
  disable_images: "Inaktivera bilder"
  show_link_underline: "Visa länkunderstrykning"
--- a/i18n/th.yaml
+++ b/i18n/th.yaml
@@ -30,6 +30,7 @@ article:
    disable: "ปิดโหมดเซน"

 a11y:
+  title: "การตั้งค่าการเข้าถึง"
  disable_blur: "ปิดการเบลอ"
  disable_images: "ปิดการแสดงรูปภาพ"
  show_link_underline: "แสดงเส้นใต้ลิงก์"
--- a/i18n/tr.yaml
+++ b/i18n/tr.yaml
@@ -19,6 +19,9 @@ article:
  this_article: "This Article"
  related_articles: "Related"

+a11y:
+  title: "Erişilebilirlik ayarları"
+
 author:
  byline_title: "Yazar"

--- a/i18n/uk.yaml
+++ b/i18n/uk.yaml
@@ -34,6 +34,7 @@ article:
    disable: "Disable zen mode"

 a11y:
+  title: "Налаштування доступності"
  disable_blur: "Вимкнути розмиття"
  disable_images: "Вимкнути зображення"
  show_link_underline: "Показати підкреслення посилань"
--- a/i18n/vi.yaml
+++ b/i18n/vi.yaml
@@ -30,6 +30,7 @@ article:
    disable: "Tắt zen mode"

 a11y:
+  title: "Cài đặt khả năng truy cập"
  disable_blur: "Tắt làm mờ"
  disable_images: "Tắt hình ảnh"
  show_link_underline: "Hiển thị gạch chân liên kết"
--- a/i18n/zh-CN.yaml
+++ b/i18n/zh-CN.yaml
@@ -30,6 +30,7 @@ article:
    disable: "停用阅读模式"

 a11y:
+  title: "无障碍设定"
  disable_blur: "禁用模糊效果"
  disable_images: "禁用图片"
  show_link_underline: "显示链接下划线"
--- a/i18n/zh-TW.yaml
+++ b/i18n/zh-TW.yaml
@@ -30,6 +30,7 @@ article:
    disable: "停用閱讀模式"

 a11y:
+  title: "無障礙設定"
  disable_blur: "停用模糊效果"
  disable_images: "停用圖片"
  show_link_underline: "顯示連結底線"
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -72,9 +72,16 @@
  {{ if .Site.Params.enableA11y | default false }}
    {{ $jsA11y := resources.Get "js/a11y.js" }}
    {{ $jsA11y = $jsA11y | resources.Minify | resources.Fingerprint (site.Params.fingerprintAlgorithm | default "sha512") }}
+    <script src="{{ $jsA11y.RelPermalink }}" integrity="{{ $jsA11y.Data.Integrity }}"></script>
+  {{ end }}
+  {{ $shouldIncludeZenMode := or (.Site.Params.enableA11y | default false) (.Params.showZenMode | default (.Site.Params.article.showZenMode | default false)) }}
+  {{ if and .IsPage $shouldIncludeZenMode }}
+    {{ $jsZenMode := resources.Get "js/zen-mode.js" }}
+    {{ $jsZenMode = $jsZenMode | resources.Minify | resources.Fingerprint (.Site.Params.fingerprintAlgorithm | default "sha512") }}
    <script
-      src="{{ $jsA11y.RelPermalink }}"
-      integrity="{{ $jsA11y.Data.Integrity }}"></script>
+      type="text/javascript"
+      src="{{ $jsZenMode.RelPermalink }}"
+      integrity="{{ $jsZenMode.Data.Integrity }}"></script>
  {{ end }}
  {{ if .Site.Params.enableSearch | default false }}
    {{ $jsFuse := resources.Get "lib/fuse/fuse.min.js" }}
--- a/layouts/partials/header/basic.html
+++ b/layouts/partials/header/basic.html
@@ -185,7 +185,7 @@
        <h3
          id="{{ $prefix }}a11y-panel-title"
          class="text-lg font-semibold text-neutral-900 dark:text-neutral-100">
-          Accessibility settings
+          {{ i18n "a11y.title" }}
        </h3>
        <button
          id="{{ $prefix }}a11y-close"
@@ -198,14 +198,17 @@
      </div>

      <div class="space-y-5">
-        {{- $toggles := slice
-          (dict "id" (print $prefix "disable-blur") "label" (i18n "a11y.disable_blur"))
+        {{ $toggles := slice }}
+        {{ $shouldDisableBlur := or site.Params.homepage.layoutBackgroundBlur site.Params.article.layoutBackgroundBlur site.Params.list.layoutBackgroundBlur }}
+        {{ if $shouldDisableBlur }}
+          {{ $toggles = $toggles | append (dict "id" (print $prefix "disable-blur") "label" (i18n "a11y.disable_blur")) }}
+        {{ end }}
+        {{- $toggles = $toggles | append
          (dict "id" (print $prefix "disable-images") "label" (i18n "a11y.disable_images"))
          (dict "id" (print $prefix "underline-links") "label" (i18n "a11y.show_link_underline"))
          (dict "id" (print $prefix "zen-mode") "label" (i18n "article.zen_mode_title.enable"))
        -}}

-
        {{- range $toggles }}
          <div class="flex items-center justify-between">
            <label for="{{ .id }}" class="text-sm font-medium text-neutral-700 dark:text-neutral-300">
--- a/layouts/partials/header/fixed-fill-blur.html
+++ b/layouts/partials/header/fixed-fill-blur.html
@@ -13,4 +13,4 @@
  type="text/javascript"
  src="{{ $backgroundBlur.RelPermalink }}"
  integrity="{{ $backgroundBlur.Data.Integrity }}"
-  data-target-id="menu-blur"></script>
+  data-blur-id="menu-blur"></script>
--- a/layouts/partials/header/fixed-gradient.html
+++ b/layouts/partials/header/fixed-gradient.html
@@ -15,4 +15,4 @@
  type="text/javascript"
  src="{{ $backgroundBlur.RelPermalink }}"
  integrity="{{ $backgroundBlur.Data.Integrity }}"
-  data-target-id="menu-blur"></script>
+  data-blur-id="menu-blur"></script>
--- a/layouts/partials/header/fixed.html
+++ b/layouts/partials/header/fixed.html
@@ -13,4 +13,4 @@
  type="text/javascript"
  src="{{ $backgroundBlur.RelPermalink }}"
  integrity="{{ $backgroundBlur.Data.Integrity }}"
-  data-target-id="menu-blur"></script>
+  data-blur-id="menu-blur"></script>
--- a/layouts/partials/hero/background.html
+++ b/layouts/partials/hero/background.html
@@ -62,7 +62,7 @@
      type="text/javascript"
      src="{{ $backgroundBlur.RelPermalink }}"
      integrity="{{ $backgroundBlur.Data.Integrity }}"
-      data-target-id="background-blur"
+      data-blur-id="background-blur"
      data-image-id="background-image"
      data-image-url="{{ .RelPermalink }}"></script>
  {{ end }}
--- a/layouts/partials/hero/thumbAndBackground.html
+++ b/layouts/partials/hero/thumbAndBackground.html
@@ -59,23 +59,15 @@
 {{- with $background -}}

  <div class="single_hero_background nozoom fixed inset-x-0 top-0 h-[800px]">
-    {{ if or $disableImageOptimization (strings.HasSuffix . ".svg") }}
-      {{ with . }}
+    {{ $imageURL := .RelPermalink }}
+    {{ if not (or $disableImageOptimization (eq .MediaType.SubType "svg")) }}
+      {{ $imageURL = (.Resize (print ($.Site.Params.backgroundImageWidth | default "1200") "x")).RelPermalink }}
+    {{ end }}
    <img
-          id="background-image-main"
-          src="{{ .RelPermalink }}"
+      id="background-image"
+      src="{{ $imageURL }}"
      alt="Background Image"
      class="absolute inset-0 h-full w-full object-cover">
-      {{ end }}
-    {{ else }}
-      {{ with .Resize (print ($.Site.Params.backgroundImageWidth | default "1200") "x") }}
-        <img
-          id="background-image-main"
-          src="{{ .RelPermalink }}"
-          alt="Background Image"
-          class="absolute inset-0 h-full w-full object-cover">
-      {{ end }}
-    {{ end }}
    <div
      class="from-neutral absolute inset-0 bg-gradient-to-t to-transparent mix-blend-normal dark:from-neutral-800"></div>
    <div
@@ -93,7 +85,7 @@
    type="text/javascript"
    src="{{ $backgroundBlur.RelPermalink }}"
    integrity="{{ $backgroundBlur.Data.Integrity }}"
-    data-target-id="background-blur"
+    data-blur-id="background-blur"
    data-image-id="background-image-main"
    {{ with $background }}data-image-url="{{ .RelPermalink }}"{{ end }}></script>
 {{ end }}
--- a/layouts/partials/home/background.html
+++ b/layouts/partials/home/background.html
@@ -22,7 +22,7 @@
          {{ end }}
          {{ if $homepageImage }}
            <img
-              id="homepage-background-image"
+              id="background-image"
              class="nozoom mt-0 mr-0 mb-0 ml-0 h-[1000px] w-full object-cover"
              src="{{ $homepageImage.RelPermalink }}"
              role="presentation">
@@ -99,7 +99,7 @@
    type="text/javascript"
    src="{{ $backgroundBlur.RelPermalink }}"
    integrity="{{ $backgroundBlur.Data.Integrity }}"
-    data-target-id="background-blur"
-    data-image-id="homepage-background-image"
+    data-blur-id="background-blur"
+    data-image-id="background-image"
    {{ if $homepageImage }}data-image-url="{{ $homepageImage.RelPermalink }}"{{ end }}></script>
 {{ end }}
--- a/layouts/partials/meta/zen-mode.html
+++ b/layouts/partials/meta/zen-mode.html
@@ -1,12 +1,3 @@
-{{ $jsZenMode := resources.Get "js/zen-mode.js" }}
-{{ $jsZenMode = $jsZenMode | resources.Minify | resources.Fingerprint (.Site.Params.fingerprintAlgorithm | default "sha512") }}
-
-
-<script
-  type="text/javascript"
-  src="{{ $jsZenMode.RelPermalink }}"
-  integrity="{{ $jsZenMode.Data.Integrity }}"></script>
-
 <span class="mb-[2px]">
  <span
    id="zen-mode-button"