accessify-widget 0.2.16 → 0.2.17

package/dist/{index-BRmOW1-V.js → index-a0msSpCc.js}

@@ -6310,16 +6310,16 @@ function FeatureGrid($$anchor, $$props) {
   const FEATURE_LOADERS = {
     contrast: () => import("./contrast-CqsICAkU.js"),
     "text-size": () => import("./text-size-C6OFhCGi.js"),
-    "keyboard-nav": () => import("./keyboard-nav-Ckw-aZ93.js"),
+    "keyboard-nav": () => import("./keyboard-nav-CfJ2ocV2.js"),
     "link-highlight": () => import("./link-highlight-DBGm067Y.js"),
     "reading-guide": () => import("./reading-guide-VT8NciIL.js"),
     "reading-mask": () => import("./reading-mask-BABChuCz.js"),
-    "animation-stop": () => import("./animation-stop-BG1kaNGZ.js"),
+    "animation-stop": () => import("./animation-stop-CNucTFZ2.js"),
     "hide-images": () => import("./hide-images-B_LeCBcd.js"),
     "big-cursor": () => import("./big-cursor-B2UKu9dQ.js"),
-    "page-structure": () => import("./page-structure-DfDEgXGb.js"),
+    "page-structure": () => import("./page-structure-DAbGRhYZ.js"),
     tts: () => import("./tts-CjszLRnb.js"),
-    "text-simplify": () => import("./text-simplify-B1v6Muvn.js"),
+    "text-simplify": () => import("./text-simplify-Cvhpio7g.js"),
     "alt-text": () => Promise.resolve().then(() => altText)
   };
   let contrastMode = /* @__PURE__ */ state(proxy(readStoredContrastMode()));
@@ -6624,9 +6624,22 @@ function PanelFooter($$anchor, $$props) {
   append($$anchor, div);
   pop();
 }
-let savedNodes = [];
+let savedTextNodes = [];
+let savedAttrs = [];
 let currentTranslateLang = null;
 let translating = false;
+let observer = null;
+let observerPaused = false;
+const TRANSLATABLE_ATTRS = [
+  "aria-label",
+  "aria-description",
+  "placeholder",
+  "title",
+  "alt",
+  "aria-placeholder",
+  "aria-roledescription",
+  "aria-valuetext"
+];
 const TRANSLATE_URL = "https://translate.googleapis.com/translate_a/single";
 async function translateSingleText(text, sourceLang, targetLang) {
   const params = new URLSearchParams({
@@ -6668,24 +6681,23 @@ async function translateTexts(texts, sourceLang, targetLang) {
   }
   return results;
 }
-function getTranslatableTextNodes() {
+function getTranslatableTextNodes(root2 = document.body) {
   const walker = document.createTreeWalker(
-    document.body,
+    root2,
     NodeFilter.SHOW_TEXT,
     {
       acceptNode(node) {
-        if (!node.textContent || !node.textContent.trim()) {
-          return NodeFilter.FILTER_REJECT;
-        }
+        if (!node.textContent || !node.textContent.trim()) return NodeFilter.FILTER_REJECT;
         const parent = node.parentElement;
         if (!parent) return NodeFilter.FILTER_REJECT;
         const tag2 = parent.tagName;
         if (["SCRIPT", "STYLE", "NOSCRIPT", "CODE", "PRE", "TEXTAREA", "INPUT"].includes(tag2)) {
           return NodeFilter.FILTER_REJECT;
         }
-        if (parent.closest("accessify-widget")) {
+        if (parent.closest("accessify-widget") || parent.closest("#accessify-root")) {
           return NodeFilter.FILTER_REJECT;
         }
+        if (parent.classList?.contains("notranslate")) return NodeFilter.FILTER_REJECT;
         return NodeFilter.FILTER_ACCEPT;
       }
     }
@@ -6697,43 +6709,121 @@ function getTranslatableTextNodes() {
   }
   return nodes;
 }
+function getTranslatableAttributes(root2 = document.body) {
+  const attrs = [];
+  const all = root2.querySelectorAll("*");
+  for (const el of all) {
+    if (el.closest("accessify-widget") || el.closest("#accessify-root")) continue;
+    for (const attr of TRANSLATABLE_ATTRS) {
+      const val = el.getAttribute(attr);
+      if (val?.trim()) {
+        attrs.push({ el, attr, original: val });
+      }
+    }
+  }
+  return attrs;
+}
+async function translatePage(targetLang) {
+  const pageLang = document.documentElement.lang?.split("-")[0] || "auto";
+  const textNodes = getTranslatableTextNodes();
+  const attrEntries = getTranslatableAttributes();
+  const existingSaved = new Set(savedTextNodes.map((s) => s.node));
+  for (const node of textNodes) {
+    if (!existingSaved.has(node)) {
+      savedTextNodes.push({ node, original: node.data });
+    }
+  }
+  const existingAttrs = new Set(savedAttrs.map((s) => `${getElId(s.el)}:${s.attr}`));
+  for (const entry of attrEntries) {
+    const key = `${getElId(entry.el)}:${entry.attr}`;
+    if (!existingAttrs.has(key)) {
+      savedAttrs.push(entry);
+    }
+  }
+  const allTexts = [
+    ...textNodes.map((n) => n.data.trim()),
+    ...attrEntries.map((a) => a.original.trim())
+  ].filter(Boolean);
+  const uniqueTexts = [...new Set(allTexts)];
+  if (uniqueTexts.length === 0) return;
+  const translated = await translateTexts(uniqueTexts, pageLang, targetLang);
+  const lookup = /* @__PURE__ */ new Map();
+  uniqueTexts.forEach((text, i) => {
+    if (translated[i] && translated[i] !== text) {
+      lookup.set(text, translated[i]);
+    }
+  });
+  observerPaused = true;
+  for (const node of textNodes) {
+    const trimmed = node.data.trim();
+    const replacement = lookup.get(trimmed);
+    if (replacement) {
+      const leading = node.data.match(/^\s*/)?.[0] || "";
+      const trailing = node.data.match(/\s*$/)?.[0] || "";
+      node.data = leading + replacement + trailing;
+    }
+  }
+  for (const entry of attrEntries) {
+    const replacement = lookup.get(entry.original.trim());
+    if (replacement) {
+      entry.el.setAttribute(entry.attr, replacement);
+    }
+  }
+  observerPaused = false;
+}
+function setupObserver(targetLang) {
+  if (observer) observer.disconnect();
+  const debouncedTranslate = debounce(() => {
+    if (!currentTranslateLang || observerPaused) return;
+    translatePage(currentTranslateLang);
+  }, 300);
+  observer = new MutationObserver((mutations) => {
+    if (observerPaused || !currentTranslateLang) return;
+    let hasRelevantChange = false;
+    for (const m of mutations) {
+      if (m.addedNodes.length > 0) {
+        hasRelevantChange = true;
+        break;
+      }
+      if (m.type === "characterData") {
+        hasRelevantChange = true;
+        break;
+      }
+    }
+    if (hasRelevantChange) debouncedTranslate();
+  });
+  observer.observe(document.body, {
+    childList: true,
+    subtree: true,
+    characterData: true
+  });
+}
+function teardownObserver() {
+  observer?.disconnect();
+  observer = null;
+}
+function getElId(el) {
+  return el.id || el.getAttribute("data-a11y-id") || (el.setAttribute("data-a11y-id", Math.random().toString(36).substr(2, 9)), el.getAttribute("data-a11y-id"));
+}
+function debounce(fn, ms) {
+  let timer;
+  return () => {
+    clearTimeout(timer);
+    timer = setTimeout(fn, ms);
+  };
+}
 function createTextTransformService() {
   return {
     async translate(targetLang) {
       if (translating) return;
       translating = true;
       try {
-        if (savedNodes.length > 0) {
+        if (savedTextNodes.length > 0) {
           this.restore();
         }
-        const pageLang = document.documentElement.lang?.split("-")[0] || "auto";
-        const textNodes = getTranslatableTextNodes();
-        if (textNodes.length === 0) {
-          translating = false;
-          return;
-        }
-        savedNodes = textNodes.map((node) => ({
-          node,
-          original: node.textContent
-        }));
-        const uniqueTexts = [...new Set(savedNodes.map((s) => s.original.trim()).filter(Boolean))];
-        const translated = await translateTexts(uniqueTexts, pageLang, targetLang);
-        const lookup = /* @__PURE__ */ new Map();
-        uniqueTexts.forEach((text, i) => {
-          if (translated[i]) {
-            lookup.set(text, translated[i]);
-          }
-        });
-        for (const saved of savedNodes) {
-          const trimmed = saved.original.trim();
-          const replacement = lookup.get(trimmed);
-          if (replacement) {
-            const leading = saved.original.match(/^\s*/)?.[0] || "";
-            const trailing = saved.original.match(/\s*$/)?.[0] || "";
-            saved.node.textContent = leading + replacement + trailing;
-          }
-        }
+        await translatePage(targetLang);
         currentTranslateLang = targetLang;
+        setupObserver(targetLang);
       } finally {
         translating = false;
       }
@@ -6741,11 +6831,25 @@ function createTextTransformService() {
     async simplify(_level, _lang) {
     },
     restore() {
-      for (const saved of savedNodes) {
-        saved.node.textContent = saved.original;
+      teardownObserver();
+      observerPaused = true;
+      for (const saved of savedTextNodes) {
+        if (saved.node.parentNode) {
+          saved.node.data = saved.original;
+        }
       }
-      savedNodes = [];
+      savedTextNodes = [];
+      for (const saved of savedAttrs) {
+        if (saved.el.isConnected) {
+          saved.el.setAttribute(saved.attr, saved.original);
+        }
+      }
+      savedAttrs = [];
+      document.querySelectorAll("[data-a11y-id]").forEach((el) => {
+        el.removeAttribute("data-a11y-id");
+      });
       currentTranslateLang = null;
+      observerPaused = false;
     },
     isTranslated() {
       return currentTranslateLang !== null;
@@ -7641,10 +7745,11 @@ async function autoApplyCachedAltTexts(widgetConfig) {
   let applied = 0;
   const images = document.querySelectorAll("img");
   images.forEach((img) => {
-    if (img.closest("#accessify-root")) return;
+    if (img.closest("#accessify-root") || img.closest("accessify-widget")) return;
     const alt = img.getAttribute("alt");
     if (alt !== null && alt.trim() !== "") return;
-    const cached = cache.get(img.src);
+    const src = img.currentSrc || img.src;
+    const cached = cache.get(src) || cache.get(img.src);
     if (cached) {
       img.setAttribute("alt", cached);
       img.setAttribute("title", cached);
@@ -7652,15 +7757,16 @@ async function autoApplyCachedAltTexts(widgetConfig) {
       applied++;
     }
   });
-  const observer = new MutationObserver((mutations) => {
+  const observer2 = new MutationObserver((mutations) => {
     for (const m of mutations) {
       for (const node of m.addedNodes) {
         const imgs = node instanceof HTMLImageElement ? [node] : node instanceof HTMLElement ? Array.from(node.querySelectorAll("img")) : [];
         for (const img of imgs) {
-          if (img.closest("#accessify-root")) continue;
+          if (img.closest("#accessify-root") || img.closest("accessify-widget")) continue;
           const a = img.getAttribute("alt");
           if (a !== null && a.trim() !== "") continue;
-          const c = cache.get(img.src);
+          const src = img.currentSrc || img.src;
+          const c = cache.get(src) || cache.get(img.src);
           if (c) {
             img.setAttribute("alt", c);
             img.setAttribute("title", c);
@@ -7670,8 +7776,8 @@ async function autoApplyCachedAltTexts(widgetConfig) {
       }
     }
   });
-  observer.observe(document.body, { childList: true, subtree: true });
-  setTimeout(() => observer.disconnect(), 3e4);
+  observer2.observe(document.body, { childList: true, subtree: true });
+  setTimeout(() => observer2.disconnect(), 3e4);
   return applied;
 }
 function createAltTextModule(aiService, initialLang = "de", serverConfig) {
@@ -7952,14 +8058,43 @@ function createAltTextModule(aiService, initialLang = "de", serverConfig) {
     reportPanelEl?.remove();
     reportPanelEl = null;
   }
+  function isGenericAlt(alt) {
+    if (!alt.trim()) return true;
+    if (/^(image|img|photo|bild|foto|untitled|placeholder)/i.test(alt)) return true;
+    if (/^IMG_\d+/i.test(alt)) return true;
+    if (/\.(jpg|jpeg|png|gif|webp|svg|avif)$/i.test(alt)) return true;
+    return false;
+  }
   function scanForMissingAlt() {
-    const images = document.querySelectorAll("img");
     const missing = [];
-    images.forEach((img) => {
-      if (img.closest("#accessify-root")) return;
+    document.querySelectorAll("img").forEach((img) => {
+      if (img.closest("#accessify-root") || img.closest("accessify-widget")) return;
       if (img.complete && img.naturalWidth > 0 && (img.naturalWidth < 20 || img.naturalHeight < 20)) return;
       const alt = img.getAttribute("alt");
-      if (alt === null || alt.trim() === "") missing.push(img);
+      if (alt === "") return;
+      if (alt === null || isGenericAlt(alt)) missing.push(img);
+    });
+    document.querySelectorAll("picture").forEach((picture) => {
+      if (picture.closest("#accessify-root") || picture.closest("accessify-widget")) return;
+      const img = picture.querySelector("img");
+      if (img && !missing.includes(img)) {
+        const alt = img.getAttribute("alt");
+        if (alt === null || isGenericAlt(alt)) {
+          missing.push(img);
+        }
+      }
+    });
+    document.querySelectorAll("*").forEach((el) => {
+      if (el.closest("#accessify-root") || el.closest("accessify-widget")) return;
+      if (el.tagName === "SCRIPT" || el.tagName === "STYLE") return;
+      const bg = window.getComputedStyle(el).backgroundImage;
+      if (!bg || bg === "none" || !bg.startsWith("url(")) return;
+      const src = bg.match(/url\(["']?(.+?)["']?\)/)?.[1];
+      if (!src || src.includes("data:") || src.includes("gradient")) return;
+      if (el.textContent?.trim() || el.getAttribute("aria-label")) return;
+      if (!el.dataset.accessifyBgSrc) {
+        el.dataset.accessifyBgSrc = src;
+      }
     });
     return missing;
   }
@@ -8400,4 +8535,4 @@ export {
   init as i,
   t
 };
-//# sourceMappingURL=index-BRmOW1-V.js.map
+//# sourceMappingURL=index-a0msSpCc.js.map