accessify-widget 0.3.2 → 0.3.4

package/dist/accessify.mjs

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

package/dist/{index-C9-1BpqV.js → index-DcqLuguC.js}

@@ -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-DF9rgWAV.js"),
+    "keyboard-nav": () => import("./keyboard-nav-BYCst88Y.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-BcyV93JT.js"),
+    "page-structure": () => import("./page-structure-MGMdSnYw.js"),
     tts: () => import("./tts-CjszLRnb.js"),
     "text-simplify": () => import("./text-simplify-Cvhpio7g.js"),
     "alt-text": () => Promise.resolve().then(() => altText)
@@ -7953,16 +7953,16 @@ async function autoApplyCachedAltTexts(widgetConfig) {
   if (cache.size === 0) return 0;
   function applyToImg(img) {
     if (img.closest("#accessify-root") || img.closest("accessify-widget")) return false;
-    const alt = img.getAttribute("alt");
-    if (alt !== null && alt.trim() !== "") return false;
     const src = getImageSrc(img);
     const cached = cache.get(src) || cache.get(normalizeImageUrl(src)) || cache.get(img.src);
-    if (cached) {
+    if (!cached) return false;
+    const alt = img.getAttribute("alt");
+    if (alt === null || alt.trim() === "") {
       img.setAttribute("alt", cached);
       img.setAttribute("data-accessify-alt", "auto");
-      return true;
     }
-    return false;
+    img.setAttribute("title", cached);
+    return true;
   }
   let applied = 0;
   document.querySelectorAll("img").forEach((img) => {
@@ -7984,257 +7984,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);
-            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;
@@ -8248,9 +8007,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;
@@ -8293,8 +8056,26 @@ function createAltTextModule(aiService, initialLang = "de", serverConfig) {
   }
   function applyAltText(img, altText2) {
     img.setAttribute("alt", altText2);
+    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");
+    });
+  }
   async function generateAll() {
     if (autoGenerating || !enabled || !aiService) return;
     autoGenerating = true;
@@ -8342,7 +8123,6 @@ function createAltTextModule(aiService, initialLang = "de", serverConfig) {
     const cached = await getCachedAltText(src);
     if (cached) {
       applyAltText(img, cached);
-      updateBadge();
       return;
     }
     try {
@@ -8360,15 +8140,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();
@@ -8377,9 +8162,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") || "" });
@@ -8393,13 +8176,14 @@ function createAltTextModule(aiService, initialLang = "de", serverConfig) {
       }
     }
     generateAll();
-    enableClickToDescribe();
+    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) => {
@@ -8408,11 +8192,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";
-              }
-            });
           }
         }
       }
@@ -8424,9 +8203,8 @@ function createAltTextModule(aiService, initialLang = "de", serverConfig) {
     autoGenerating = false;
     domObserver?.disconnect();
     domObserver = null;
-    disableClickToDescribe();
+    removeTitles();
     missingAltImages = [];
-    removeStyles();
   }
   autoApplyCachedAltTexts({ siteKey, proxyUrl, lang: initialLang }).catch(() => {
   });
@@ -8639,4 +8417,4 @@ export {
   init as i,
   t
 };
-//# sourceMappingURL=index-C9-1BpqV.js.map
+//# sourceMappingURL=index-DcqLuguC.js.map