accessify-widget 0.3.7 → 0.3.9

package/dist/accessify.mjs

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

package/dist/{index-C_cEJXg7.js → index-DabFemHm.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-BN8NOhTx.js"),
+    "keyboard-nav": () => import("./keyboard-nav-BAnuU08t.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-CK_agCbv.js"),
+    "page-structure": () => import("./page-structure-DjY63saM.js"),
     tts: () => import("./tts-CjszLRnb.js"),
     "text-simplify": () => import("./text-simplify-Cvhpio7g.js"),
     "alt-text": () => Promise.resolve().then(() => altText)
@@ -8149,6 +8149,7 @@ function createAltTextModule(aiService, initialLang = "de", serverConfig) {
     img.setAttribute("alt", altText2);
     img.setAttribute("title", altText2);
     processedImages.set(img, { generatedAlt: altText2 });
+    if (enabled) addInfoBadge(img, altText2);
   }
   function applyTitlesToAllImages() {
     document.querySelectorAll("img").forEach((img) => {
@@ -8161,6 +8162,96 @@ function createAltTextModule(aiService, initialLang = "de", serverConfig) {
       }
     });
   }
+  const INFO_BADGE_CLASS = "accessify-alt-badge";
+  const INFO_TOOLTIP_CLASS = "accessify-alt-tooltip";
+  let styleEl = null;
+  function injectBadgeStyles() {
+    if (styleEl) return;
+    styleEl = document.createElement("style");
+    styleEl.textContent = `
+      .${INFO_BADGE_CLASS} {
+        position: absolute;
+        top: 6px;
+        left: 6px;
+        width: 22px;
+        height: 22px;
+        border-radius: 50%;
+        background: rgba(0,0,0,0.55);
+        color: #fff;
+        font: bold 13px/22px sans-serif;
+        text-align: center;
+        cursor: default;
+        z-index: 10;
+        pointer-events: auto;
+        transition: background 0.15s;
+        box-shadow: 0 1px 3px rgba(0,0,0,0.3);
+      }
+      .${INFO_BADGE_CLASS}:hover {
+        background: rgba(0,0,0,0.8);
+      }
+      .${INFO_TOOLTIP_CLASS} {
+        display: none;
+        position: absolute;
+        top: 32px;
+        left: 0;
+        min-width: 180px;
+        max-width: 300px;
+        padding: 8px 10px;
+        background: rgba(0,0,0,0.85);
+        color: #fff;
+        font: normal 12px/1.4 sans-serif;
+        border-radius: 6px;
+        z-index: 11;
+        pointer-events: none;
+        word-wrap: break-word;
+        box-shadow: 0 2px 8px rgba(0,0,0,0.3);
+      }
+      .${INFO_BADGE_CLASS}:hover + .${INFO_TOOLTIP_CLASS},
+      .${INFO_BADGE_CLASS}:focus + .${INFO_TOOLTIP_CLASS} {
+        display: block;
+      }
+    `;
+    document.head.appendChild(styleEl);
+  }
+  function addInfoBadge(target, altText2) {
+    const parent = target.tagName === "IMG" ? target.parentElement : target;
+    if (!parent) return;
+    if (parent.querySelector(`.${INFO_BADGE_CLASS}`)) return;
+    const pos = getComputedStyle(parent).position;
+    if (pos === "static") parent.style.position = "relative";
+    const badge = document.createElement("span");
+    badge.className = INFO_BADGE_CLASS;
+    badge.textContent = "i";
+    badge.setAttribute("aria-hidden", "true");
+    const tooltip = document.createElement("span");
+    tooltip.className = INFO_TOOLTIP_CLASS;
+    tooltip.textContent = altText2;
+    parent.appendChild(badge);
+    parent.appendChild(tooltip);
+  }
+  function removeAllBadges() {
+    document.querySelectorAll(`.${INFO_BADGE_CLASS}, .${INFO_TOOLTIP_CLASS}`).forEach((el) => el.remove());
+    if (styleEl) {
+      styleEl.remove();
+      styleEl = null;
+    }
+  }
+  function addBadgesToAllImages() {
+    injectBadgeStyles();
+    document.querySelectorAll("img").forEach((img) => {
+      if (!isValidImage(img)) return;
+      const alt = img.getAttribute("alt") || img.getAttribute("title");
+      if (alt && alt.trim()) {
+        addInfoBadge(img, alt.trim());
+      }
+    });
+    document.querySelectorAll("[data-accessify-bg-alt]").forEach((el) => {
+      const alt = el.getAttribute("aria-label");
+      if (alt && alt.trim()) {
+        addInfoBadge(el, alt.trim());
+      }
+    });
+  }
   function removeTitles() {
     document.querySelectorAll('img[data-accessify-title="auto"]').forEach((img) => {
       img.removeAttribute("title");
@@ -8172,22 +8263,21 @@ function createAltTextModule(aiService, initialLang = "de", serverConfig) {
       el.removeAttribute("title");
       el.removeAttribute("data-accessify-bg-alt");
     });
+    removeAllBadges();
   }
   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) {
+    const allElements = document.querySelectorAll("*");
+    for (const el of allElements) {
       if (el.closest("#accessify-root") || el.closest("accessify-widget")) continue;
       if (el.getAttribute("data-accessify-bg-alt")) continue;
+      if (el.offsetWidth < 200 || el.offsetHeight < 150) 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 (urlMatch[1].startsWith("data:image/svg")) continue;
       if (el.getAttribute("role") === "img" && el.getAttribute("aria-label")) continue;
       found.push(el);
     }
@@ -8203,6 +8293,7 @@ function createAltTextModule(aiService, initialLang = "de", serverConfig) {
     el.setAttribute("aria-label", altText2);
     el.setAttribute("title", altText2);
     el.setAttribute("data-accessify-bg-alt", "auto");
+    if (enabled) addInfoBadge(el, altText2);
   }
   async function generateBgAlts() {
     if (!aiService || !enabled) return;
@@ -8342,6 +8433,7 @@ function createAltTextModule(aiService, initialLang = "de", serverConfig) {
     generateAll();
     generateBgAlts();
     applyTitlesToAllImages();
+    addBadgesToAllImages();
     document.querySelectorAll("img").forEach((img) => {
       if (!img.complete) tryRegisterImage(img);
     });
@@ -8349,6 +8441,7 @@ function createAltTextModule(aiService, initialLang = "de", serverConfig) {
       if (enabled) {
         document.querySelectorAll("img").forEach(tryRegisterImage);
         applyTitlesToAllImages();
+        addBadgesToAllImages();
       }
     }, 2e3);
     domObserver = new MutationObserver((mutations) => {
@@ -8582,4 +8675,4 @@ export {
   init as i,
   t
 };
-//# sourceMappingURL=index-C_cEJXg7.js.map
+//# sourceMappingURL=index-DabFemHm.js.map