accessify-widget 0.3.4 → 0.3.5

package/dist/accessify.mjs

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

package/dist/{index-DcqLuguC.js → index-BTkeEVoS.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-BZ4ei-Lt.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-JY54Sj14.js"),
     tts: () => import("./tts-CjszLRnb.js"),
     "text-simplify": () => import("./text-simplify-Cvhpio7g.js"),
     "alt-text": () => Promise.resolve().then(() => altText)
@@ -6866,6 +6866,38 @@ 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);
+        groups.push({
+          nodes: siblings,
+          fullText: siblings.map((n) => n.data.trim()).filter(Boolean).join(" "),
+          singleNode: false
+        });
+        continue;
+      }
+    }
+    assigned.add(node);
+    groups.push({ nodes: [node], fullText: node.data.trim(), singleNode: true });
+  }
+  return groups;
+}
+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 +6915,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 +6930,25 @@ async function translatePage(targetLang) {
     }
   });
   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 group of nodeGroups) {
+    if (group.singleNode) {
+      const node = group.nodes[0];
+      const replacement = lookup.get(group.fullText);
+      if (replacement) {
+        const leading = node.data.match(/^\s*/)?.[0] || "";
+        const trailing = node.data.match(/\s*$/)?.[0] || "";
+        node.data = leading + replacement + trailing;
+      }
+    } else {
+      const replacement = lookup.get(group.fullText);
+      if (replacement) {
+        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 +8120,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 +8294,7 @@ function createAltTextModule(aiService, initialLang = "de", serverConfig) {
       }
     }
     generateAll();
+    generateBgAlts();
     applyTitlesToAllImages();
     document.querySelectorAll("img").forEach((img) => {
       if (!img.complete) tryRegisterImage(img);
@@ -8211,7 +8330,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 +8536,4 @@ export {
   init as i,
   t
 };
-//# sourceMappingURL=index-DcqLuguC.js.map
+//# sourceMappingURL=index-BTkeEVoS.js.map