accessify-widget 0.2.21 → 0.2.22

package/dist/accessify.mjs

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

package/dist/{index-DlEXo7aY.js → index-B9BgMU66.js}

@@ -6351,14 +6351,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-CZma_qRC.js"),
+    "keyboard-nav": () => import("./keyboard-nav-cvuhPLSY.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-DTIVV243.js"),
+    "page-structure": () => import("./page-structure-XImoLRLq.js"),
     tts: () => import("./tts-CjszLRnb.js"),
     "text-simplify": () => import("./text-simplify-Cvhpio7g.js"),
     "alt-text": () => Promise.resolve().then(() => altText)
@@ -7828,6 +7828,7 @@ function createAltTextModule(aiService, initialLang = "de", serverConfig) {
   const processedImages = /* @__PURE__ */ new Map();
   let describeClickHandler = null;
   let describeEscHandler = null;
+  const describeButtons = /* @__PURE__ */ new Map();
   function lang() {
     return getCurrentWidgetLang() || initialLang;
   }
@@ -7867,10 +7868,42 @@ function createAltTextModule(aiService, initialLang = "de", serverConfig) {
         content: none;
       }
 
-      img[data-a11y-describable="true"] {
+      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(26, 26, 46, 0.85);
+        color: #e0e0e0;
+        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);
+        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;
+      }
+
       .accessify-describe-tooltip {
         position: fixed;
         z-index: 2147483647;
@@ -8054,20 +8087,51 @@ function createAltTextModule(aiService, initialLang = "de", serverConfig) {
       );
     }
   }
-  function enableClickToDescribe() {
-    document.querySelectorAll("img").forEach((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";
+  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 && !e.target.closest(".accessify-describe-tooltip")) {
-          hideDescribeTooltip();
-        }
+        if (tooltipEl) hideDescribeTooltip();
         return;
       }
+      if (isLinkedImage(img)) return;
       e.preventDefault();
       e.stopPropagation();
       handleImageClick(img);
@@ -8088,8 +8152,10 @@ function createAltTextModule(aiService, initialLang = "de", serverConfig) {
       describeEscHandler = null;
     }
     hideDescribeTooltip();
+    removeDescribeButtons();
     document.querySelectorAll("img[data-a11y-describable]").forEach((img) => {
       delete img.dataset.a11yDescribable;
+      delete img.dataset.a11yIsLink;
     });
   }
   function isGenericAlt(alt) {
@@ -8281,7 +8347,7 @@ function createAltTextModule(aiService, initialLang = "de", serverConfig) {
     function addIfValid() {
       if (!enabled || missingAltImages.includes(img)) return;
       if (img.naturalWidth < 20 || img.naturalHeight < 20) return;
-      img.dataset.a11yDescribable = "true";
+      markImageDescribable(img);
       if (needsAltText(img)) {
         img.classList.add(HIGHLIGHT_CLASS);
         missingAltImages.push(img);
@@ -8564,4 +8630,4 @@ export {
   init as i,
   t
 };
-//# sourceMappingURL=index-DlEXo7aY.js.map
+//# sourceMappingURL=index-B9BgMU66.js.map