accessify-widget 0.3.4 → 0.3.6

package/dist/accessify.mjs

@@ -1,4 +1,4 @@
-import { d, i } from "./index-DcqLuguC.js";
+import { d, i } from "./index-DDv0soH8.js";
 export {
   d as destroy,
   i as init

package/dist/{index-DcqLuguC.js → index-DDv0soH8.js}

@@ -4779,7 +4779,7 @@ const deJson = {
   "feature.textSimplify": "Text vereinfachen",
   "feature.textSimplify.desc": "Text in Einfache Sprache umwandeln",
   "feature.altText": "Bildbeschreibung",
-  "feature.altText.desc": "Bilder per Klick beschreiben lassen",
+  "feature.altText.desc": "Bildbeschreibungen per Hover anzeigen und fehlende automatisch erzeugen",
   "feature.autoScan": "WCAG-Prüfung",
   "feature.autoScan.desc": "Seite auf Barrierefreiheit prüfen",
   "feature.saturation": "Sättigung",
@@ -4868,7 +4868,7 @@ const enJson = {
   "feature.textSimplify": "Simplify Text",
   "feature.textSimplify.desc": "Simplify text for easier understanding",
   "feature.altText": "Image Description",
-  "feature.altText.desc": "Click images to get AI descriptions",
+  "feature.altText.desc": "Show image descriptions on hover and auto-generate missing ones",
   "feature.autoScan": "WCAG Scan",
   "feature.autoScan.desc": "Scan page for accessibility issues",
   "feature.saturation": "Saturation",
@@ -6433,14 +6433,14 @@ function FeatureGrid($$anchor, $$props) {
   const FEATURE_LOADERS = {
     contrast: () => import("./contrast-CqsICAkU.js"),
     "text-size": () => import("./text-size-C6OFhCGi.js"),
-    "keyboard-nav": () => import("./keyboard-nav-BYCst88Y.js"),
+    "keyboard-nav": () => import("./keyboard-nav-DYBrrE4b.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-C0MwseK0.js"),
     "hide-images": () => import("./hide-images-B_LeCBcd.js"),
     "big-cursor": () => import("./big-cursor-B2UKu9dQ.js"),
-    "page-structure": () => import("./page-structure-MGMdSnYw.js"),
+    "page-structure": () => import("./page-structure-BTemvR2X.js"),
     tts: () => import("./tts-CjszLRnb.js"),
     "text-simplify": () => import("./text-simplify-Cvhpio7g.js"),
     "alt-text": () => Promise.resolve().then(() => altText)
@@ -6866,6 +6866,74 @@ function getTranslatableAttributes(root2 = document.body) {
   }
   return attrs;
 }
+const BLOCK_TAGS = /* @__PURE__ */ new Set(["H1", "H2", "H3", "H4", "H5", "H6", "P", "LI", "TD", "TH", "CAPTION", "FIGCAPTION", "BLOCKQUOTE", "DT", "DD"]);
+function groupTextNodes(textNodes) {
+  const groups = [];
+  const assigned = /* @__PURE__ */ new Set();
+  for (const node of textNodes) {
+    if (assigned.has(node)) continue;
+    const block2 = findBlockAncestor(node);
+    if (block2 && BLOCK_TAGS.has(block2.tagName)) {
+      const siblings = textNodes.filter((n) => !assigned.has(n) && findBlockAncestor(n) === block2);
+      if (siblings.length > 1) {
+        for (const s of siblings) assigned.add(s);
+        const fullText = (block2.textContent?.trim() || "").replace(/\s+/g, " ");
+        const shortNodes = siblings.filter((n) => n.data.trim().length <= 2).length;
+        const charPerNode = shortNodes > siblings.length * 0.5;
+        groups.push({ nodes: siblings, fullText, singleNode: false, charPerNode });
+        continue;
+      }
+    }
+    assigned.add(node);
+    groups.push({ nodes: [node], fullText: node.data.trim(), singleNode: true, charPerNode: false });
+  }
+  return groups;
+}
+function distributeCharsToNodes(nodes, translated) {
+  const origLengths = nodes.map((n) => n.data.trim().length);
+  const origWhitespace = nodes.map((n) => ({
+    leading: n.data.match(/^\s*/)?.[0] || "",
+    trailing: n.data.match(/\s*$/)?.[0] || ""
+  }));
+  let charIdx = 0;
+  for (let i = 0; i < nodes.length; i++) {
+    const origLen = origLengths[i];
+    if (origLen === 0) {
+      continue;
+    }
+    const chunk = translated.slice(charIdx, charIdx + origLen);
+    charIdx += origLen;
+    nodes[i].data = origWhitespace[i].leading + chunk + origWhitespace[i].trailing;
+  }
+  if (charIdx < translated.length) {
+    const overflow = translated.slice(charIdx);
+    for (let i = nodes.length - 1; i >= 0; i--) {
+      if (origLengths[i] > 0) {
+        nodes[i].data = nodes[i].data.trimEnd() + overflow + origWhitespace[i].trailing;
+        break;
+      }
+    }
+  }
+  for (let i = 0; i < nodes.length; i++) {
+    if (origLengths[i] > 0) {
+      const assigned = translated.slice(
+        origLengths.slice(0, i).reduce((a, b) => a + b, 0),
+        origLengths.slice(0, i + 1).reduce((a, b) => a + b, 0)
+      );
+      if (!assigned) {
+        nodes[i].data = origWhitespace[i].leading + origWhitespace[i].trailing;
+      }
+    }
+  }
+}
+function findBlockAncestor(node) {
+  let el = node.parentElement;
+  while (el && el !== document.body) {
+    if (BLOCK_TAGS.has(el.tagName)) return el;
+    el = el.parentElement;
+  }
+  return null;
+}
 async function translatePage(targetLang) {
   const pageLang = document.documentElement.lang?.split("-")[0] || "auto";
   const textNodes = getTranslatableTextNodes();
@@ -6883,8 +6951,9 @@ async function translatePage(targetLang) {
       savedAttrs.push(entry);
     }
   }
+  const nodeGroups = groupTextNodes(textNodes);
   const allTexts = [
-    ...textNodes.map((n) => n.data.trim()),
+    ...nodeGroups.map((g) => g.fullText),
     ...attrEntries.map((a) => a.original.trim())
   ].filter(Boolean);
   const uniqueTexts = [...new Set(allTexts)];
@@ -6897,13 +6966,23 @@ async function translatePage(targetLang) {
     }
   });
   observerPaused = true;
-  for (const node of textNodes) {
-    const trimmed = node.data.trim();
-    const replacement = lookup.get(trimmed);
-    if (replacement) {
+  for (const group of nodeGroups) {
+    const replacement = lookup.get(group.fullText);
+    if (!replacement) continue;
+    if (group.singleNode) {
+      const node = group.nodes[0];
       const leading = node.data.match(/^\s*/)?.[0] || "";
       const trailing = node.data.match(/\s*$/)?.[0] || "";
       node.data = leading + replacement + trailing;
+    } else if (group.charPerNode) {
+      distributeCharsToNodes(group.nodes, replacement);
+    } else {
+      const firstNode = group.nodes[0];
+      const leading = firstNode.data.match(/^\s*/)?.[0] || "";
+      firstNode.data = leading + replacement;
+      for (let i = 1; i < group.nodes.length; i++) {
+        group.nodes[i].data = "";
+      }
     }
   }
   for (const entry of attrEntries) {
@@ -8075,6 +8154,79 @@ function createAltTextModule(aiService, initialLang = "de", serverConfig) {
       img.removeAttribute("title");
       img.removeAttribute("data-accessify-title");
     });
+    document.querySelectorAll("[data-accessify-bg-alt]").forEach((el) => {
+      el.removeAttribute("role");
+      el.removeAttribute("aria-label");
+      el.removeAttribute("title");
+      el.removeAttribute("data-accessify-bg-alt");
+    });
+  }
+  function scanForBackgroundImages() {
+    const found = [];
+    const candidates = document.querySelectorAll(
+      'header, [class*="hero"], [class*="banner"], [class*="header"], [class*="bg-"], [class*="background"], [style*="background"]'
+    );
+    for (const el of candidates) {
+      if (el.closest("#accessify-root") || el.closest("accessify-widget")) continue;
+      if (el.getAttribute("data-accessify-bg-alt")) continue;
+      const style = getComputedStyle(el);
+      const bg = style.backgroundImage;
+      if (!bg || bg === "none") continue;
+      const urlMatch = bg.match(/url\(["']?([^"')]+)["']?\)/);
+      if (!urlMatch) continue;
+      const rect = el.getBoundingClientRect();
+      if (rect.width < 100 || rect.height < 100) continue;
+      if (el.getAttribute("role") === "img" && el.getAttribute("aria-label")) continue;
+      found.push(el);
+    }
+    return found;
+  }
+  function getBackgroundImageUrl(el) {
+    const bg = getComputedStyle(el).backgroundImage;
+    const match = bg?.match(/url\(["']?([^"')]+)["']?\)/);
+    return match ? match[1] : null;
+  }
+  function applyBgAlt(el, altText2) {
+    el.setAttribute("role", "img");
+    el.setAttribute("aria-label", altText2);
+    el.setAttribute("title", altText2);
+    el.setAttribute("data-accessify-bg-alt", "auto");
+  }
+  async function generateBgAlts() {
+    if (!aiService || !enabled) return;
+    const bgElements = scanForBackgroundImages();
+    for (const el of bgElements) {
+      if (!enabled) break;
+      const src = getBackgroundImageUrl(el);
+      if (!src) continue;
+      const cached = await getCachedAltText(src);
+      if (cached) {
+        applyBgAlt(el, cached);
+        continue;
+      }
+      try {
+        const ctx = gatherBgContext(el);
+        const alt = await aiService.generateAltText(src, ctx, lang());
+        if (alt && enabled) {
+          applyBgAlt(el, alt);
+          setCachedAltText(src, alt, lang()).catch(() => {
+          });
+          if (siteKey) persistAltTextToServer(siteKey, proxyUrl, src, alt, lang());
+        }
+      } catch (err) {
+        console.warn("[Accessify] Bg alt-text generation failed:", src, err);
+      }
+    }
+  }
+  function gatherBgContext(el) {
+    const parts = [];
+    parts.push(`Element: <${el.tagName.toLowerCase()}>`);
+    if (el.className) parts.push(`Class: ${el.className}`);
+    const text = el.textContent?.trim().slice(0, 100);
+    if (text) parts.push(`Overlay text: ${text}`);
+    const heading = el.querySelector("h1, h2, h3");
+    if (heading?.textContent?.trim()) parts.push(`Heading: ${heading.textContent.trim()}`);
+    return parts.join(". ");
   }
   async function generateAll() {
     if (autoGenerating || !enabled || !aiService) return;
@@ -8176,6 +8328,7 @@ function createAltTextModule(aiService, initialLang = "de", serverConfig) {
       }
     }
     generateAll();
+    generateBgAlts();
     applyTitlesToAllImages();
     document.querySelectorAll("img").forEach((img) => {
       if (!img.complete) tryRegisterImage(img);
@@ -8211,7 +8364,7 @@ function createAltTextModule(aiService, initialLang = "de", serverConfig) {
   return {
     id: "alt-text",
     name: () => isDE() ? "Bildbeschreibung" : "Image Description",
-    description: isDE() ? "Bilder per Klick beschreiben lassen" : "Click images to get AI descriptions",
+    description: isDE() ? "Bildbeschreibungen per Hover anzeigen und fehlende automatisch erzeugen" : "Show image descriptions on hover and auto-generate missing ones",
     icon: "alt-text",
     category: "ai",
     activate,
@@ -8417,4 +8570,4 @@ export {
   init as i,
   t
 };
-//# sourceMappingURL=index-DcqLuguC.js.map
+//# sourceMappingURL=index-DDv0soH8.js.map