accessify-widget 0.3.3 → 0.3.5

package/dist/accessify.mjs

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

package/dist/{index-B8sAE1Po.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-SGx_nXud.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-BfD6Mw28.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) {
@@ -7984,258 +8029,16 @@ function createAltTextModule(aiService, initialLang = "de", serverConfig) {
   const siteKey = serverConfig?.siteKey || "";
   const proxyUrl = serverConfig?.proxyUrl || "";
   let enabled = false;
-  let styleEl = null;
-  let tooltipEl = null;
   let domObserver = null;
   let autoGenerating = false;
   let missingAltImages = [];
   const processedImages = /* @__PURE__ */ new Map();
-  let describeClickHandler = null;
-  let describeEscHandler = null;
-  const describeButtons = /* @__PURE__ */ new Map();
   function lang() {
     return getCurrentWidgetLang() || initialLang;
   }
   function isDE() {
     return lang().startsWith("de");
   }
-  const STYLE_ID = "accessify-alt-text-styles";
-  function getStyles() {
-    return `
-      img[data-a11y-describable="true"]:not([data-a11y-is-link="true"]) {
-        cursor: help !important;
-      }
-
-      .accessify-describe-btn {
-        position: absolute;
-        top: 6px;
-        right: 6px;
-        z-index: 10;
-        width: 26px;
-        height: 26px;
-        padding: 0;
-        border: none;
-        border-radius: 50%;
-        background: rgba(0, 0, 0, 0.55);
-        color: #fff;
-        font-family: system-ui, -apple-system, sans-serif;
-        font-size: 14px;
-        font-weight: 700;
-        line-height: 26px;
-        text-align: center;
-        cursor: help;
-        opacity: 0;
-        transition: opacity 0.15s ease;
-        backdrop-filter: blur(4px);
-      }
-      img[data-a11y-is-link="true"]:hover ~ .accessify-describe-btn,
-      .accessify-describe-btn:hover {
-        opacity: 1;
-      }
-      .accessify-describe-btn:hover {
-        background: rgba(0, 0, 0, 0.75);
-      }
-
-      .accessify-describe-tooltip {
-        position: fixed;
-        z-index: 2147483647;
-        max-width: 320px;
-        padding: 10px 14px;
-        background: rgba(0, 0, 0, 0.75);
-        color: #fff;
-        border-radius: 8px;
-        backdrop-filter: blur(8px);
-        font-family: system-ui, -apple-system, sans-serif;
-        font-size: 13px;
-        line-height: 1.5;
-        word-break: break-word;
-        animation: accessify-fade-in 0.12s ease;
-        pointer-events: auto;
-      }
-      .accessify-describe-loading {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        color: #ddd;
-        font-style: italic;
-      }
-      .accessify-describe-loading::before {
-        content: '';
-        width: 12px;
-        height: 12px;
-        border: 2px solid rgba(255,255,255,0.3);
-        border-top-color: #fff;
-        border-radius: 50%;
-        animation: accessify-spin 0.8s linear infinite;
-      }
-      @keyframes accessify-spin {
-        to { transform: rotate(360deg); }
-      }
-      @keyframes accessify-fade-in {
-        from { opacity: 0; transform: translateY(4px); }
-        to { opacity: 1; transform: translateY(0); }
-      }
-    `;
-  }
-  function injectStyles() {
-    if (document.getElementById(STYLE_ID)) return;
-    styleEl = document.createElement("style");
-    styleEl.id = STYLE_ID;
-    styleEl.textContent = getStyles();
-    document.head.appendChild(styleEl);
-  }
-  function removeStyles() {
-    styleEl?.remove();
-    styleEl = null;
-    document.getElementById(STYLE_ID)?.remove();
-  }
-  function showDescribeTooltip(text, rect, loading = false) {
-    hideDescribeTooltip();
-    const tip = document.createElement("div");
-    tip.className = "accessify-describe-tooltip";
-    if (loading) {
-      const loadingEl = document.createElement("div");
-      loadingEl.className = "accessify-describe-loading";
-      loadingEl.textContent = isDE() ? "Bild wird analysiert…" : "Analyzing image…";
-      tip.appendChild(loadingEl);
-    } else {
-      const textEl = document.createElement("div");
-      textEl.textContent = text;
-      tip.appendChild(textEl);
-    }
-    document.body.appendChild(tip);
-    tooltipEl = tip;
-    const tipRect = tip.getBoundingClientRect();
-    let top = rect.bottom + 8;
-    if (top + tipRect.height > window.innerHeight - 8) {
-      top = rect.top - tipRect.height - 8;
-    }
-    if (top < 4) top = 4;
-    let left = rect.left + (rect.width - tipRect.width) / 2;
-    left = Math.max(8, Math.min(left, window.innerWidth - tipRect.width - 8));
-    tip.style.top = `${top}px`;
-    tip.style.left = `${left}px`;
-  }
-  function hideDescribeTooltip() {
-    tooltipEl?.remove();
-    tooltipEl = null;
-  }
-  async function handleImageClick(img) {
-    const rect = img.getBoundingClientRect();
-    const cached = img.dataset.accessifyDescription;
-    if (cached) {
-      showDescribeTooltip(cached, rect);
-      return;
-    }
-    const existingAlt = img.getAttribute("alt");
-    showDescribeTooltip("", rect, true);
-    try {
-      if (!aiService) {
-        showDescribeTooltip(
-          existingAlt || (isDE() ? "Kein API-Key konfiguriert" : "No API key configured"),
-          rect
-        );
-        return;
-      }
-      const src = getImageSrc(img);
-      const description = await aiService.describeImage(src, lang());
-      if (!enabled) return;
-      img.dataset.accessifyDescription = description;
-      showDescribeTooltip(description, rect);
-      const currentAlt = img.getAttribute("alt");
-      if (!currentAlt || !currentAlt.trim()) {
-        try {
-          const ctx = gatherImageContext(img);
-          const altText2 = await aiService.generateAltText(src, ctx, lang());
-          if (altText2) {
-            img.setAttribute("alt", altText2);
-            img.setAttribute("title", altText2);
-            setCachedAltText(src, altText2, lang()).catch(() => {
-            });
-            if (siteKey) persistAltTextToServer(siteKey, proxyUrl, src, altText2, lang());
-          }
-        } catch {
-        }
-      }
-    } catch (err) {
-      console.warn("[Accessify] Image description failed:", err);
-      showDescribeTooltip(
-        existingAlt || (isDE() ? "Beschreibung konnte nicht geladen werden" : "Could not load description"),
-        rect
-      );
-    }
-  }
-  function isLinkedImage(img) {
-    return !!img.closest("a[href]");
-  }
-  function addDescribeButton(img) {
-    if (describeButtons.has(img)) return;
-    const parent = img.parentElement;
-    if (!parent) return;
-    const pos = getComputedStyle(parent).position;
-    if (pos === "static") parent.style.position = "relative";
-    const btn = document.createElement("button");
-    btn.className = "accessify-describe-btn";
-    btn.textContent = "i";
-    btn.setAttribute("aria-label", isDE() ? "Bildbeschreibung anzeigen" : "Show image description");
-    btn.addEventListener("click", (e) => {
-      e.preventDefault();
-      e.stopPropagation();
-      handleImageClick(img);
-    });
-    img.insertAdjacentElement("afterend", btn);
-    describeButtons.set(img, btn);
-  }
-  function removeDescribeButtons() {
-    describeButtons.forEach((btn) => btn.remove());
-    describeButtons.clear();
-  }
-  function markImageDescribable(img) {
-    if (img.closest("#accessify-root") || img.closest("accessify-widget")) return;
-    if (img.complete && img.naturalWidth > 0 && (img.naturalWidth < 20 || img.naturalHeight < 20)) return;
-    img.dataset.a11yDescribable = "true";
-    if (isLinkedImage(img)) {
-      img.dataset.a11yIsLink = "true";
-      addDescribeButton(img);
-    }
-  }
-  function enableClickToDescribe() {
-    document.querySelectorAll("img").forEach(markImageDescribable);
-    describeClickHandler = (e) => {
-      if (e.target.closest(".accessify-describe-tooltip")) return;
-      if (e.target.closest(".accessify-describe-btn")) return;
-      const img = e.target.closest("img[data-a11y-describable]");
-      if (!img) {
-        if (tooltipEl) hideDescribeTooltip();
-        return;
-      }
-      if (isLinkedImage(img)) return;
-      e.preventDefault();
-      e.stopPropagation();
-      handleImageClick(img);
-    };
-    document.addEventListener("click", describeClickHandler, true);
-    describeEscHandler = (e) => {
-      if (e.key === "Escape") hideDescribeTooltip();
-    };
-    document.addEventListener("keydown", describeEscHandler);
-  }
-  function disableClickToDescribe() {
-    if (describeClickHandler) {
-      document.removeEventListener("click", describeClickHandler, true);
-      describeClickHandler = null;
-    }
-    if (describeEscHandler) {
-      document.removeEventListener("keydown", describeEscHandler);
-      describeEscHandler = null;
-    }
-    hideDescribeTooltip();
-    removeDescribeButtons();
-    document.querySelectorAll("img[data-a11y-describable]").forEach((img) => {
-      delete img.dataset.a11yDescribable;
-      delete img.dataset.a11yIsLink;
-    });
-  }
   function isGenericAlt(alt) {
     if (!alt.trim()) return true;
     if (/^(image|img|photo|bild|foto|untitled|placeholder)/i.test(alt)) return true;
@@ -8249,9 +8052,13 @@ function createAltTextModule(aiService, initialLang = "de", serverConfig) {
     if (img.complete && img.naturalWidth > 0 && (img.naturalWidth < 50 || img.naturalHeight < 50)) return true;
     return false;
   }
-  function needsAltText(img) {
+  function isValidImage(img) {
     if (img.closest("#accessify-root") || img.closest("accessify-widget")) return false;
     if (img.complete && img.naturalWidth > 0 && (img.naturalWidth < 20 || img.naturalHeight < 20)) return false;
+    return true;
+  }
+  function needsAltText(img) {
+    if (!isValidImage(img)) return false;
     const alt = img.getAttribute("alt");
     if (alt === null) return true;
     if (isGenericAlt(alt)) return true;
@@ -8297,6 +8104,96 @@ function createAltTextModule(aiService, initialLang = "de", serverConfig) {
     img.setAttribute("title", altText2);
     processedImages.set(img, { generatedAlt: altText2 });
   }
+  function applyTitlesToAllImages() {
+    document.querySelectorAll("img").forEach((img) => {
+      if (!isValidImage(img)) return;
+      if (img.getAttribute("title")) return;
+      const alt = img.getAttribute("alt");
+      if (alt && alt.trim()) {
+        img.setAttribute("title", alt);
+        img.setAttribute("data-accessify-title", "auto");
+      }
+    });
+  }
+  function removeTitles() {
+    document.querySelectorAll('img[data-accessify-title="auto"]').forEach((img) => {
+      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;
     autoGenerating = true;
@@ -8344,7 +8241,6 @@ function createAltTextModule(aiService, initialLang = "de", serverConfig) {
     const cached = await getCachedAltText(src);
     if (cached) {
       applyAltText(img, cached);
-      updateBadge();
       return;
     }
     try {
@@ -8362,15 +8258,20 @@ function createAltTextModule(aiService, initialLang = "de", serverConfig) {
   }
   function tryRegisterImage(img) {
     if (!enabled) return;
-    if (img.closest("#accessify-root")) return;
+    if (!isValidImage(img)) return;
     if (missingAltImages.includes(img)) return;
     function addIfValid() {
       if (!enabled || missingAltImages.includes(img)) return;
       if (img.naturalWidth < 20 || img.naturalHeight < 20) return;
-      markImageDescribable(img);
       if (needsAltText(img)) {
         missingAltImages.push(img);
         generateSingle(img);
+      } else {
+        const alt = img.getAttribute("alt");
+        if (alt && alt.trim() && !img.getAttribute("title")) {
+          img.setAttribute("title", alt);
+          img.setAttribute("data-accessify-title", "auto");
+        }
       }
     }
     if (img.complete && img.naturalWidth > 0) addIfValid();
@@ -8379,9 +8280,7 @@ function createAltTextModule(aiService, initialLang = "de", serverConfig) {
   function activate() {
     if (enabled) return;
     enabled = true;
-    injectStyles();
-    const alreadyApplied = document.querySelectorAll('img[data-accessify-alt="auto"]');
-    alreadyApplied.forEach((img) => {
+    document.querySelectorAll('img[data-accessify-alt="auto"]').forEach((img) => {
       if (img.closest("#accessify-root")) return;
       if (!processedImages.has(img)) {
         processedImages.set(img, { generatedAlt: img.getAttribute("alt") || "" });
@@ -8395,21 +8294,15 @@ function createAltTextModule(aiService, initialLang = "de", serverConfig) {
       }
     }
     generateAll();
-    document.querySelectorAll("img").forEach((img) => {
-      if (img.closest("#accessify-root") || img.closest("accessify-widget")) return;
-      const alt = img.getAttribute("alt");
-      if (alt && alt.trim() && !img.getAttribute("title")) {
-        img.setAttribute("title", alt);
-        img.setAttribute("data-accessify-title", "auto");
-      }
-    });
-    enableClickToDescribe();
+    generateBgAlts();
+    applyTitlesToAllImages();
     document.querySelectorAll("img").forEach((img) => {
       if (!img.complete) tryRegisterImage(img);
     });
     setTimeout(() => {
       if (enabled) {
         document.querySelectorAll("img").forEach(tryRegisterImage);
+        applyTitlesToAllImages();
       }
     }, 2e3);
     domObserver = new MutationObserver((mutations) => {
@@ -8418,11 +8311,6 @@ function createAltTextModule(aiService, initialLang = "de", serverConfig) {
           if (node instanceof HTMLImageElement) tryRegisterImage(node);
           else if (node instanceof HTMLElement) {
             node.querySelectorAll("img").forEach(tryRegisterImage);
-            node.querySelectorAll("img").forEach((img) => {
-              if (!img.closest("#accessify-root") && !img.closest("accessify-widget")) {
-                img.dataset.a11yDescribable = "true";
-              }
-            });
           }
         }
       }
@@ -8434,20 +8322,15 @@ function createAltTextModule(aiService, initialLang = "de", serverConfig) {
     autoGenerating = false;
     domObserver?.disconnect();
     domObserver = null;
-    disableClickToDescribe();
-    document.querySelectorAll('img[data-accessify-title="auto"]').forEach((img) => {
-      img.removeAttribute("title");
-      img.removeAttribute("data-accessify-title");
-    });
+    removeTitles();
     missingAltImages = [];
-    removeStyles();
   }
   autoApplyCachedAltTexts({ siteKey, proxyUrl, lang: initialLang }).catch(() => {
   });
   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,
@@ -8653,4 +8536,4 @@ export {
   init as i,
   t
 };
-//# sourceMappingURL=index-B8sAE1Po.js.map
+//# sourceMappingURL=index-BTkeEVoS.js.map