accessify-widget 0.3.1 → 0.3.3

package/dist/accessify.mjs

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

package/dist/{index-CFoky8Ty.js → index-B8sAE1Po.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-B66DnefL.js"),
+    "keyboard-nav": () => import("./keyboard-nav-SGx_nXud.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-C76rueHv.js"),
+    "page-structure": () => import("./page-structure-BfD6Mw28.js"),
     tts: () => import("./tts-CjszLRnb.js"),
     "text-simplify": () => import("./text-simplify-Cvhpio7g.js"),
     "alt-text": () => Promise.resolve().then(() => altText)
@@ -7953,17 +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("title", 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) => {
@@ -7986,7 +7985,6 @@ function createAltTextModule(aiService, initialLang = "de", serverConfig) {
   const proxyUrl = serverConfig?.proxyUrl || "";
   let enabled = false;
   let styleEl = null;
-  let badgeEl = null;
   let tooltipEl = null;
   let domObserver = null;
   let autoGenerating = false;
@@ -8002,38 +8000,8 @@ function createAltTextModule(aiService, initialLang = "de", serverConfig) {
     return lang().startsWith("de");
   }
   const STYLE_ID = "accessify-alt-text-styles";
-  const HIGHLIGHT_CLASS = "accessify-alt-missing";
   function getStyles() {
     return `
-      .${HIGHLIGHT_CLASS} {
-        outline: 3px dashed #e63946 !important;
-        outline-offset: 3px !important;
-        position: relative !important;
-      }
-      .${HIGHLIGHT_CLASS}.accessify-alt-generating::after {
-        content: '\\2026';
-        position: absolute;
-        top: 4px;
-        left: 4px;
-        padding: 2px 6px;
-        background: #f77f00;
-        color: #fff;
-        font-family: system-ui, -apple-system, sans-serif;
-        font-size: 10px;
-        font-weight: 700;
-        border-radius: 3px;
-        line-height: 1.4;
-        pointer-events: none;
-        z-index: 1;
-      }
-      .${HIGHLIGHT_CLASS}.accessify-alt-done {
-        outline-color: #2a9d8f !important;
-        outline-style: solid !important;
-      }
-      .${HIGHLIGHT_CLASS}.accessify-alt-done::after {
-        content: none;
-      }
-
       img[data-a11y-describable="true"]:not([data-a11y-is-link="true"]) {
         cursor: help !important;
       }
@@ -8048,8 +8016,8 @@ function createAltTextModule(aiService, initialLang = "de", serverConfig) {
         padding: 0;
         border: none;
         border-radius: 50%;
-        background: rgba(26, 26, 46, 0.85);
-        color: #e0e0e0;
+        background: rgba(0, 0, 0, 0.55);
+        color: #fff;
         font-family: system-ui, -apple-system, sans-serif;
         font-size: 14px;
         font-weight: 700;
@@ -8059,60 +8027,44 @@ function createAltTextModule(aiService, initialLang = "de", serverConfig) {
         opacity: 0;
         transition: opacity 0.15s ease;
         backdrop-filter: blur(4px);
-        box-shadow: 0 2px 8px rgba(0,0,0,0.3);
       }
       img[data-a11y-is-link="true"]:hover ~ .accessify-describe-btn,
       .accessify-describe-btn:hover {
         opacity: 1;
       }
       .accessify-describe-btn:hover {
-        background: rgba(26, 26, 46, 0.95);
-        color: #fff;
+        background: rgba(0, 0, 0, 0.75);
       }
 
       .accessify-describe-tooltip {
         position: fixed;
         z-index: 2147483647;
-        max-width: 340px;
-        padding: 14px 18px;
-        background: #1a1a2e;
-        color: #e0e0e0;
-        border-radius: 10px;
-        box-shadow: 0 6px 24px rgba(0,0,0,0.45);
+        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: 14px;
-        line-height: 1.6;
+        font-size: 13px;
+        line-height: 1.5;
         word-break: break-word;
-        animation: accessify-fade-in 0.15s ease;
-      }
-      .accessify-describe-tooltip .accessify-describe-close {
-        position: absolute;
-        top: 6px;
-        right: 8px;
-        background: none;
-        border: none;
-        color: #888;
-        font-size: 16px;
-        cursor: pointer;
-        padding: 2px 6px;
-        line-height: 1;
-      }
-      .accessify-describe-tooltip .accessify-describe-close:hover {
-        color: #fff;
+        animation: accessify-fade-in 0.12s ease;
+        pointer-events: auto;
       }
       .accessify-describe-loading {
         display: flex;
         align-items: center;
         gap: 8px;
-        color: #aaa;
+        color: #ddd;
         font-style: italic;
       }
       .accessify-describe-loading::before {
         content: '';
-        width: 14px;
-        height: 14px;
-        border: 2px solid #555;
-        border-top-color: #aaa;
+        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;
       }
@@ -8123,37 +8075,6 @@ function createAltTextModule(aiService, initialLang = "de", serverConfig) {
         from { opacity: 0; transform: translateY(4px); }
         to { opacity: 1; transform: translateY(0); }
       }
-
-      .accessify-alt-badge {
-        position: fixed;
-        top: 12px;
-        right: 12px;
-        z-index: 2147483646;
-        display: flex;
-        align-items: center;
-        gap: 6px;
-        padding: 8px 14px;
-        background: #1a1a2e;
-        color: #f0f0f0;
-        border-radius: 8px;
-        box-shadow: 0 4px 16px rgba(0,0,0,0.3);
-        font-family: system-ui, -apple-system, sans-serif;
-        font-size: 13px;
-        user-select: none;
-      }
-      .accessify-alt-badge-count {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        min-width: 22px;
-        height: 22px;
-        padding: 0 6px;
-        background: #e63946;
-        color: #fff;
-        font-size: 12px;
-        font-weight: 700;
-        border-radius: 11px;
-      }
     `;
   }
   function injectStyles() {
@@ -8172,15 +8093,6 @@ function createAltTextModule(aiService, initialLang = "de", serverConfig) {
     hideDescribeTooltip();
     const tip = document.createElement("div");
     tip.className = "accessify-describe-tooltip";
-    const closeBtn = document.createElement("button");
-    closeBtn.className = "accessify-describe-close";
-    closeBtn.textContent = "×";
-    closeBtn.setAttribute("aria-label", "Close");
-    closeBtn.addEventListener("click", (e) => {
-      e.stopPropagation();
-      hideDescribeTooltip();
-    });
-    tip.appendChild(closeBtn);
     if (loading) {
       const loadingEl = document.createElement("div");
       loadingEl.className = "accessify-describe-loading";
@@ -8384,10 +8296,6 @@ function createAltTextModule(aiService, initialLang = "de", serverConfig) {
     img.setAttribute("alt", altText2);
     img.setAttribute("title", altText2);
     processedImages.set(img, { generatedAlt: altText2 });
-    if (enabled) {
-      img.classList.add("accessify-alt-done");
-      img.classList.remove("accessify-alt-generating");
-    }
   }
   async function generateAll() {
     if (autoGenerating || !enabled || !aiService) return;
@@ -8404,12 +8312,10 @@ function createAltTextModule(aiService, initialLang = "de", serverConfig) {
         uncached.push(img);
       }
     }
-    updateBadge();
     if (!uncached.length) {
       autoGenerating = false;
       return;
     }
-    uncached.forEach((img) => img.classList.add("accessify-alt-generating"));
     for (let i = 0; i < uncached.length; i += CONCURRENCY) {
       if (!enabled) break;
       const batch = uncached.slice(i, i + CONCURRENCY);
@@ -8427,10 +8333,8 @@ function createAltTextModule(aiService, initialLang = "de", serverConfig) {
           }
         } catch (err) {
           console.warn("[Accessify] Alt-text generation failed:", getImageSrc(img), err);
-          img.classList.remove("accessify-alt-generating");
         }
       }));
-      updateBadge();
     }
     autoGenerating = false;
   }
@@ -8443,7 +8347,6 @@ function createAltTextModule(aiService, initialLang = "de", serverConfig) {
       updateBadge();
       return;
     }
-    img.classList.add("accessify-alt-generating");
     try {
       const ctx = gatherImageContext(img);
       const alt = await aiService.generateAltText(src, ctx, lang());
@@ -8452,60 +8355,11 @@ function createAltTextModule(aiService, initialLang = "de", serverConfig) {
         setCachedAltText(src, alt, lang()).catch(() => {
         });
         if (siteKey) persistAltTextToServer(siteKey, proxyUrl, src, alt, lang());
-        updateBadge();
       }
     } catch (err) {
       console.warn("[Accessify] Alt-text generation failed:", src, err);
-      img.classList.remove("accessify-alt-generating");
     }
   }
-  function updateBadge() {
-    removeBadge();
-    const remaining = missingAltImages.filter((img) => !processedImages.has(img)).length;
-    const generating = missingAltImages.filter((img) => img.classList.contains("accessify-alt-generating")).length;
-    if (generating > 0) {
-      showBadge(isDE() ? `${generating} Bilder werden analysiert…` : `Analyzing ${generating} images…`, "#f77f00", generating);
-      return;
-    }
-    if (remaining === 0 && processedImages.size > 0) {
-      showBadge(
-        isDE() ? `✓ ${processedImages.size} Bildbeschreibungen erstellt` : `✓ ${processedImages.size} descriptions generated`,
-        "#2a9d8f",
-        0
-      );
-      setTimeout(() => removeBadge(), 6e3);
-      return;
-    }
-    if (remaining > 0) {
-      showBadge(
-        isDE() ? `${remaining} Bilder ohne Beschreibung` : `${remaining} images without description`,
-        "#e63946",
-        remaining
-      );
-    }
-  }
-  function showBadge(text, color, count) {
-    const badge = document.createElement("div");
-    badge.className = "accessify-alt-badge";
-    badge.setAttribute("role", "status");
-    badge.setAttribute("aria-live", "polite");
-    if (count > 0) {
-      const c = document.createElement("span");
-      c.className = "accessify-alt-badge-count";
-      c.style.background = color;
-      c.textContent = String(count);
-      badge.appendChild(c);
-    }
-    const label = document.createElement("span");
-    label.textContent = text;
-    badge.appendChild(label);
-    document.body.appendChild(badge);
-    badgeEl = badge;
-  }
-  function removeBadge() {
-    badgeEl?.remove();
-    badgeEl = null;
-  }
   function tryRegisterImage(img) {
     if (!enabled) return;
     if (img.closest("#accessify-root")) return;
@@ -8515,9 +8369,7 @@ function createAltTextModule(aiService, initialLang = "de", serverConfig) {
       if (img.naturalWidth < 20 || img.naturalHeight < 20) return;
       markImageDescribable(img);
       if (needsAltText(img)) {
-        img.classList.add(HIGHLIGHT_CLASS);
         missingAltImages.push(img);
-        updateBadge();
         generateSingle(img);
       }
     }
@@ -8534,18 +8386,23 @@ function createAltTextModule(aiService, initialLang = "de", serverConfig) {
       if (!processedImages.has(img)) {
         processedImages.set(img, { generatedAlt: img.getAttribute("alt") || "" });
         missingAltImages.push(img);
-        img.classList.add(HIGHLIGHT_CLASS, "accessify-alt-done");
       }
     });
     const missing = scanForMissingAlt();
     for (const img of missing) {
       if (!missingAltImages.includes(img)) {
         missingAltImages.push(img);
-        img.classList.add(HIGHLIGHT_CLASS);
       }
     }
-    updateBadge();
     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();
     document.querySelectorAll("img").forEach((img) => {
       if (!img.complete) tryRegisterImage(img);
@@ -8578,9 +8435,9 @@ function createAltTextModule(aiService, initialLang = "de", serverConfig) {
     domObserver?.disconnect();
     domObserver = null;
     disableClickToDescribe();
-    removeBadge();
-    missingAltImages.forEach((img) => {
-      img.classList.remove(HIGHLIGHT_CLASS, "accessify-alt-done", "accessify-alt-generating");
+    document.querySelectorAll('img[data-accessify-title="auto"]').forEach((img) => {
+      img.removeAttribute("title");
+      img.removeAttribute("data-accessify-title");
     });
     missingAltImages = [];
     removeStyles();
@@ -8796,4 +8653,4 @@ export {
   init as i,
   t
 };
-//# sourceMappingURL=index-CFoky8Ty.js.map
+//# sourceMappingURL=index-B8sAE1Po.js.map