@frybynite/image-cloud 0.11.3 → 1.0.1

package/dist/web-component.d.ts

@@ -864,6 +864,7 @@ export declare class ImageCloud {
     private counterElAutoCreated;
     private prevButtonEl;
     private nextButtonEl;
+    private ariaLiveEl;
     private prevButtonElAutoCreated;
     private nextButtonElAutoCreated;
     constructor(options?: ImageCloudOptions);
@@ -891,6 +892,7 @@ export declare class ImageCloud {
     private createDefaultCounterElement;
     private createDefaultPrevButtonElement;
     private createDefaultNextButtonElement;
+    private getImageAlt;
     private setupEventListeners;
     /**
      * Navigate to the next image (Right arrow)

package/dist/web-component.js

@@ -583,8 +583,8 @@ function he(o) {
     return;
   }
   const R = performance.now(), M = -r / 2, T = -a / 2;
-  function z(k) {
-    const D = k - R, O = Math.min(D / s, 1);
+  function z(P) {
+    const D = P - R, O = Math.min(D / s, 1);
     let S;
     switch (l) {
       case "bounce": {
@@ -617,11 +617,11 @@ function he(o) {
           y: V(i.y, e.y, O)
         };
     }
-    const P = S.x - e.x, _ = S.y - e.y;
+    const U = S.x - e.x, k = S.y - e.y;
     let A;
     h ? A = ce(O, c, b) : g ? A = V(p, c, O) : A = c;
     let j;
-    E ? j = le(O, d, x) : y ? j = V(v, d, O) : j = d, t.style.transform = `translate(${M}px, ${T}px) translate(${P}px, ${_}px) rotate(${A}deg) scale(${j})`, f && O < 1 && f(O, D, {
+    E ? j = le(O, d, x) : y ? j = V(v, d, O) : j = d, t.style.transform = `translate(${M}px, ${T}px) translate(${U}px, ${k}px) rotate(${A}deg) scale(${j})`, f && O < 1 && f(O, D, {
       x: S.x,
       y: S.y,
       rotation: A,
@@ -1243,25 +1243,25 @@ class pe {
     }
     let E = 1, x = 1;
     for (; E < t; ) {
-      const F = x / b, R = w > 0 ? 1 - F * w * 0.5 : 1, M = Math.max(l * 0.8, y / b * 1.5 / v.tightness), T = x * M, z = T * 1.5, k = Math.PI * (3 * (z + T) - Math.sqrt((3 * z + T) * (z + 3 * T))), D = this.estimateWidth(l), O = Math.floor(k / (D * 0.7));
+      const F = x / b, R = w > 0 ? 1 - F * w * 0.5 : 1, M = Math.max(l * 0.8, y / b * 1.5 / v.tightness), T = x * M, z = T * 1.5, P = Math.PI * (3 * (z + T) - Math.sqrt((3 * z + T) * (z + 3 * T))), D = this.estimateWidth(l), O = Math.floor(P / (D * 0.7));
       if (O === 0) {
         x++;
         continue;
       }
-      const S = 2 * Math.PI / O, P = x * (20 * Math.PI / 180);
-      for (let _ = 0; _ < O && E < t; _++) {
-        const A = _ * S + P, j = p ? this.random(f, m) : 1, N = R * j, $ = l * N;
-        let H = g + Math.cos(A) * z, U = h + Math.sin(A) * T;
-        const B = $ * 1.5 / 2, W = $ / 2;
-        H - B < I ? H = I + B : H + B > s - I && (H = s - I - B), U - W < I ? U = I + W : U + W > r - I && (U = r - I - W);
+      const S = 2 * Math.PI / O, U = x * (20 * Math.PI / 180);
+      for (let k = 0; k < O && E < t; k++) {
+        const A = k * S + U, j = p ? this.random(f, m) : 1, N = R * j, _ = l * N;
+        let H = g + Math.cos(A) * z, $ = h + Math.sin(A) * T;
+        const B = _ * 1.5 / 2, W = _ / 2;
+        H - B < I ? H = I + B : H + B > s - I && (H = s - I - B), $ - W < I ? $ = I + W : $ + W > r - I && ($ = r - I - W);
         const X = c === "random" ? this.random(d, u) : 0;
         n.push({
           id: E,
           x: H,
-          y: U,
+          y: $,
           rotation: X,
           scale: N,
-          baseSize: $,
+          baseSize: _,
           zIndex: Math.max(1, 100 - x)
           // Outer rings have lower z-index
         }), E++;
@@ -1335,27 +1335,16 @@ class ye {
       v,
       d,
       a
-    ), h = a.stagger === "row", b = a.stagger === "column", I = h ? l + 0.5 : l, y = b ? g + 0.5 : g, E = (w - a.gap * (l - 1)) / I, x = (v - a.gap * (g - 1)) / y, F = h ? E / 2 : 0, R = b ? x / 2 : 0, M = 1 + a.overlap, T = Math.min(E, x) * M, z = e.fixedHeight ? Math.min(e.fixedHeight, T) : T, k = l * E + (l - 1) * a.gap + F, D = g * x + (g - 1) * a.gap + R, O = c + (w - k) / 2, S = c + (v - D) / 2, P = l * g, _ = a.columns !== "auto" && a.rows !== "auto", A = _ && t > P;
-    typeof window < "u" && (window.__gridOverflowDebug = {
-      gridConfigColumns: a.columns,
-      gridConfigRows: a.rows,
-      columns: l,
-      rows: g,
-      cellCount: P,
-      hasFixedGrid: _,
-      imageCount: t,
-      isOverflowMode: A
-    });
-    const j = A ? new Array(P).fill(0) : [], N = Math.min(E, x) * a.overflowOffset;
-    for (let $ = 0; $ < t; $++) {
-      let H, U, Y = 0;
-      if (A && $ >= P) {
-        const q = $ - P, G = q % P;
-        Y = Math.floor(q / P) + 1, j[G]++, a.fillDirection === "row" ? (H = G % l, U = Math.floor(G / l)) : (U = G % g, H = Math.floor(G / g));
+    ), h = a.stagger === "row", b = a.stagger === "column", I = h ? l + 0.5 : l, y = b ? g + 0.5 : g, E = (w - a.gap * (l - 1)) / I, x = (v - a.gap * (g - 1)) / y, F = h ? E / 2 : 0, R = b ? x / 2 : 0, M = 1 + a.overlap, T = Math.min(E, x) * M, z = e.fixedHeight ? Math.min(e.fixedHeight, T) : T, P = l * E + (l - 1) * a.gap + F, D = g * x + (g - 1) * a.gap + R, O = c + (w - P) / 2, S = c + (v - D) / 2, U = l * g, A = a.columns !== "auto" && a.rows !== "auto" && t > U, j = A ? new Array(U).fill(0) : [], N = Math.min(E, x) * a.overflowOffset;
+    for (let _ = 0; _ < t; _++) {
+      let H, $, Y = 0;
+      if (A && _ >= U) {
+        const q = _ - U, G = q % U;
+        Y = Math.floor(q / U) + 1, j[G]++, a.fillDirection === "row" ? (H = G % l, $ = Math.floor(G / l)) : ($ = G % g, H = Math.floor(G / g));
       } else
-        a.fillDirection === "row" ? (H = $ % l, U = Math.floor($ / l)) : (U = $ % g, H = Math.floor($ / g));
-      let B = O + H * (E + a.gap) + E / 2, W = S + U * (x + a.gap) + x / 2;
-      if (a.stagger === "row" && U % 2 === 1 ? B += E / 2 : a.stagger === "column" && H % 2 === 1 && (W += x / 2), Y > 0) {
+        a.fillDirection === "row" ? (H = _ % l, $ = Math.floor(_ / l)) : ($ = _ % g, H = Math.floor(_ / g));
+      let B = O + H * (E + a.gap) + E / 2, W = S + $ * (x + a.gap) + x / 2;
+      if (a.stagger === "row" && $ % 2 === 1 ? B += E / 2 : a.stagger === "column" && H % 2 === 1 && (W += x / 2), Y > 0) {
         const q = (Y - 1) % Lt.length, G = Lt[q];
         B += G.x * N, W += G.y * N;
       }
@@ -1366,10 +1355,10 @@ class ye {
       let X = B, J = W;
       if (!A && a.fillDirection === "row") {
         const q = t % l || l;
-        if (U === Math.floor((t - 1) / l) && q < l) {
+        if ($ === Math.floor((t - 1) / l) && q < l) {
           const Ct = q * E + (q - 1) * a.gap;
           let gt = 0;
-          a.alignment === "center" ? gt = (k - Ct) / 2 : a.alignment === "end" && (gt = k - Ct), X += gt;
+          a.alignment === "center" ? gt = (P - Ct) / 2 : a.alignment === "end" && (gt = P - Ct), X += gt;
         }
       }
       const ct = p ? this.random(f, m) : 1, K = z * ct, nt = K * 1.5 / 2, ot = K / 2, ht = c + nt, dt = s - c - nt, Ut = c + ot, kt = r - c - ot;
@@ -1380,8 +1369,8 @@ class ye {
         a.jitter > 0 ? ut = this.random(q * a.jitter, G * a.jitter) : ut = this.random(q, G);
       }
       let ft;
-      A && Y > 0 ? ft = 50 - Y : ft = A ? 100 + $ : $ + 1, n.push({
-        id: $,
+      A && Y > 0 ? ft = 50 - Y : ft = A ? 100 + _ : _ + 1, n.push({
+        id: _,
         x: X,
         y: J,
         rotation: ut,
@@ -1451,19 +1440,19 @@ class xe {
         const B = y * 0.3 * a.tightness;
         E = B * I + a.startAngle, x = this.calculateLogarithmicRadius(B, t, b, a.tightness);
       }
-      const F = g + Math.cos(E) * x, R = h + Math.sin(E) * x, M = x / b, T = l > 0 ? 1 - M * l * 0.5 : 1, z = v ? this.random(p, w) : 1, k = T * z, D = d * k, S = D * 1.5 / 2, P = D / 2, _ = c + S, A = s - c - S, j = c + P, N = r - c - P, $ = Math.max(_, Math.min(F, A)), H = Math.max(j, Math.min(R, N));
-      let U = 0;
+      const F = g + Math.cos(E) * x, R = h + Math.sin(E) * x, M = x / b, T = l > 0 ? 1 - M * l * 0.5 : 1, z = v ? this.random(p, w) : 1, P = T * z, D = d * P, S = D * 1.5 / 2, U = D / 2, k = c + S, A = s - c - S, j = c + U, N = r - c - U, _ = Math.max(k, Math.min(F, A)), H = Math.max(j, Math.min(R, N));
+      let $ = 0;
       if (u === "random") {
         const B = E * 180 / Math.PI % 360, W = this.random(f, m);
-        U = a.spiralType === "golden" ? W : B * 0.1 + W * 0.9;
-      } else u === "tangent" && (U = this.calculateSpiralTangent(E, x, a));
+        $ = a.spiralType === "golden" ? W : B * 0.1 + W * 0.9;
+      } else u === "tangent" && ($ = this.calculateSpiralTangent(E, x, a));
       const Y = t - y;
       n.push({
         id: y,
-        x: $,
+        x: _,
         y: H,
-        rotation: U,
-        scale: k,
+        rotation: $,
+        scale: P,
         baseSize: D,
         zIndex: Y
       });
@@ -1561,22 +1550,22 @@ class Ie {
         if (a.distribution === "gaussian")
           F = this.gaussianRandom() * y.spread, R = this.gaussianRandom() * y.spread;
         else {
-          const U = this.random(0, Math.PI * 2), Y = this.random(0, y.spread);
-          F = Math.cos(U) * Y, R = Math.sin(U) * Y;
+          const $ = this.random(0, Math.PI * 2), Y = this.random(0, y.spread);
+          F = Math.cos($) * Y, R = Math.sin($) * Y;
         }
         const M = 1 + a.overlap * 0.5, T = 1 + a.overlap * 0.3;
         F /= M, R /= M;
-        const z = v ? this.random(p, w) : 1, k = T * z, D = d * k;
+        const z = v ? this.random(p, w) : 1, P = T * z, D = d * P;
         let O = y.x + F, S = y.y + R;
-        const _ = D * 1.5 / 2, A = D / 2;
-        O = Math.max(c + _, Math.min(O, s - c - _)), S = Math.max(c + A, Math.min(S, r - c - A));
-        const j = u === "random" ? this.random(f, m) : 0, $ = Math.sqrt(F * F + R * R) / y.spread, H = Math.round((1 - $) * 50) + 1;
+        const k = D * 1.5 / 2, A = D / 2;
+        O = Math.max(c + k, Math.min(O, s - c - k)), S = Math.max(c + A, Math.min(S, r - c - A));
+        const j = u === "random" ? this.random(f, m) : 0, _ = Math.sqrt(F * F + R * R) / y.spread, H = Math.round((1 - _) * 50) + 1;
         n.push({
           id: b,
           x: O,
           y: S,
           rotation: j,
-          scale: k,
+          scale: P,
           baseSize: D,
           zIndex: H
         }), b++;
@@ -1659,26 +1648,26 @@ class Se {
     const n = [], { width: s, height: r } = i, a = e.fixedHeight ?? 200, c = this.config.spacing.padding ?? 50, d = this.imageConfig.rotation?.mode ?? "none", u = this.imageConfig.rotation?.range?.min ?? -15, f = this.imageConfig.rotation?.range?.max ?? 15, m = this.imageConfig.sizing?.variance?.min ?? 1, p = this.imageConfig.sizing?.variance?.max ?? 1, w = m !== 1 || p !== 1, v = e.fixedHeight ?? a, l = {
       ...Nt,
       ...this.config.wave
-    }, { rows: g, amplitude: h, frequency: b, phaseShift: I, synchronization: y } = l, E = Math.ceil(t / g), R = v * 1.5 / 2, M = c + R, T = s - c - R, z = T - M, k = E > 1 ? z / (E - 1) : 0, D = c + h + v / 2, O = r - c - h - v / 2, S = O - D, P = g > 1 ? S / (g - 1) : 0;
-    let _ = 0;
-    for (let A = 0; A < g && _ < t; A++) {
-      const j = g === 1 ? (D + O) / 2 : D + A * P;
+    }, { rows: g, amplitude: h, frequency: b, phaseShift: I, synchronization: y } = l, E = Math.ceil(t / g), R = v * 1.5 / 2, M = c + R, T = s - c - R, z = T - M, P = E > 1 ? z / (E - 1) : 0, D = c + h + v / 2, O = r - c - h - v / 2, S = O - D, U = g > 1 ? S / (g - 1) : 0;
+    let k = 0;
+    for (let A = 0; A < g && k < t; A++) {
+      const j = g === 1 ? (D + O) / 2 : D + A * U;
       let N = 0;
       y === "offset" ? N = A * I : y === "alternating" && (N = A * Math.PI);
-      for (let $ = 0; $ < E && _ < t; $++) {
-        const H = E === 1 ? (M + T) / 2 : M + $ * k, U = this.calculateWaveY(H, s, h, b, N), Y = H, B = j + U, W = w ? this.random(m, p) : 1, X = v * W;
+      for (let _ = 0; _ < E && k < t; _++) {
+        const H = E === 1 ? (M + T) / 2 : M + _ * P, $ = this.calculateWaveY(H, s, h, b, N), Y = H, B = j + $, W = w ? this.random(m, p) : 1, X = v * W;
         let J = 0;
         d === "tangent" ? J = this.calculateRotation(H, s, h, b, N) : d === "random" && (J = this.random(u, f));
         const K = X * 1.5 / 2, lt = X / 2, nt = c + K, ot = s - c - K, ht = c + lt, dt = r - c - lt;
         n.push({
-          id: _,
+          id: k,
           x: Math.max(nt, Math.min(Y, ot)),
           y: Math.max(ht, Math.min(B, dt)),
           rotation: J,
           scale: W,
           baseSize: X,
-          zIndex: _ + 1
-        }), _++;
+          zIndex: k + 1
+        }), k++;
       }
     }
     return n;
@@ -3221,7 +3210,7 @@ function Ze() {
 }
 class Qe {
   constructor(t = {}) {
-    this.fullConfig = Zt(t), t.container instanceof HTMLElement ? (this.containerRef = t.container, this.containerId = null) : (this.containerRef = null, this.containerId = t.container || "imageCloud"), this.callbacks = t.on ?? {}, this.imagesLoaded = !1, this.imageElements = [], this.imageLayouts = [], this.currentImageHeight = 225, this.currentFocusIndex = null, this.hoveredImage = null, this.resizeTimeout = null, this.displayQueue = [], this.queueInterval = null, this.loadGeneration = 0, this.loadingElAutoCreated = !1, this.errorElAutoCreated = !1, this.counterEl = null, this.counterElAutoCreated = !1, this.prevButtonEl = null, this.nextButtonEl = null, this.prevButtonElAutoCreated = !1, this.nextButtonElAutoCreated = !1, this.animationEngine = new ie(this.fullConfig.animation), this.layoutEngine = new Oe({
+    this.ariaLiveEl = null, this.fullConfig = Zt(t), t.container instanceof HTMLElement ? (this.containerRef = t.container, this.containerId = null) : (this.containerRef = null, this.containerId = t.container || "imageCloud"), this.callbacks = t.on ?? {}, this.imagesLoaded = !1, this.imageElements = [], this.imageLayouts = [], this.currentImageHeight = 225, this.currentFocusIndex = null, this.hoveredImage = null, this.resizeTimeout = null, this.displayQueue = [], this.queueInterval = null, this.loadGeneration = 0, this.loadingElAutoCreated = !1, this.errorElAutoCreated = !1, this.counterEl = null, this.counterElAutoCreated = !1, this.prevButtonEl = null, this.nextButtonEl = null, this.prevButtonElAutoCreated = !1, this.nextButtonElAutoCreated = !1, this.animationEngine = new ie(this.fullConfig.animation), this.layoutEngine = new Oe({
       layout: this.fullConfig.layout,
       image: this.fullConfig.image
     }), this.zoomEngine = new He(this.fullConfig.interaction.focus, this.animationEngine, this.fullConfig.styling), this.defaultStyles = it(this.fullConfig.styling?.default), this.defaultClassName = this.fullConfig.styling?.default?.className, this.hoverClassName = this.fullConfig.styling?.hover?.className;
@@ -3311,7 +3300,7 @@ class Qe {
         this.containerEl = this.containerRef;
       else if (this.containerEl = document.getElementById(this.containerId), !this.containerEl)
         throw new Error(`Container "#${this.containerId}" not found. Ensure an element with id="${this.containerId}" exists in the DOM before calling imageCloud().`);
-      this.containerEl.classList.add("fbn-ic-gallery"), this.containerEl.setAttribute("tabindex", "0"), this.fullConfig.interaction.navigation?.swipe !== !1 && (this.swipeEngine = new bt(this.containerEl, {
+      this.containerEl.classList.add("fbn-ic-gallery"), this.containerEl.setAttribute("tabindex", "0"), this.containerEl.setAttribute("role", "region"), this.containerEl.setAttribute("aria-label", "Image gallery"), this.fullConfig.interaction.navigation?.swipe !== !1 && (this.swipeEngine = new bt(this.containerEl, {
         onNext: () => this.navigateToNextImage(),
         onPrev: () => this.navigateToPreviousImage(),
         onDragOffset: (t) => this.zoomEngine.setDragOffset(t),
@@ -3329,7 +3318,7 @@ class Qe {
       i.stopPropagation(), this.navigateToPreviousImage();
     }), this.nextButtonEl?.addEventListener("click", (i) => {
       i.stopPropagation(), this.navigateToNextImage();
-    }));
+    })), this.ariaLiveEl = document.createElement("div"), this.ariaLiveEl.setAttribute("aria-live", "polite"), this.ariaLiveEl.setAttribute("aria-atomic", "true"), this.ariaLiveEl.className = "fbn-ic-sr-only", this.containerEl.appendChild(this.ariaLiveEl);
   }
   resolveElement(t) {
     return t instanceof HTMLElement ? t : document.getElementById(t);
@@ -3352,11 +3341,19 @@ class Qe {
   }
   createDefaultPrevButtonElement() {
     const t = document.createElement("button");
-    return t.className = "fbn-ic-nav-btn fbn-ic-nav-btn-prev fbn-ic-hidden", t.textContent = "‹", t.setAttribute("aria-label", "Previous image"), t.setAttribute("tabindex", "-1"), this.containerEl.appendChild(t), t;
+    return t.className = "fbn-ic-nav-btn fbn-ic-nav-btn-prev fbn-ic-hidden", t.textContent = "‹", t.setAttribute("aria-label", "Previous image"), this.containerEl.appendChild(t), t;
   }
   createDefaultNextButtonElement() {
     const t = document.createElement("button");
-    return t.className = "fbn-ic-nav-btn fbn-ic-nav-btn-next fbn-ic-hidden", t.textContent = "›", t.setAttribute("aria-label", "Next image"), t.setAttribute("tabindex", "-1"), this.containerEl.appendChild(t), t;
+    return t.className = "fbn-ic-nav-btn fbn-ic-nav-btn-next fbn-ic-hidden", t.textContent = "›", t.setAttribute("aria-label", "Next image"), this.containerEl.appendChild(t), t;
+  }
+  getImageAlt(t, i) {
+    try {
+      const s = (new URL(t).pathname.split("/").pop() ?? "").replace(/\.[^.]+$/, "").replace(/[-_]/g, " ").trim();
+      return s.length > 0 ? s : `Image ${i + 1}`;
+    } catch {
+      return `Image ${i + 1}`;
+    }
   }
   setupEventListeners() {
     this.fullConfig.interaction.navigation?.keyboard !== !1 && this.containerEl.addEventListener("keydown", (t) => {
@@ -3473,7 +3470,7 @@ class Qe {
     }, w = (l) => {
       this.containerEl && (this.containerEl.appendChild(l), this.imageElements.push(l), requestAnimationFrame(async () => {
         l.offsetWidth, l.style.opacity = this.defaultStyles.opacity ?? "1";
-        const g = parseInt(l.dataset.imageId || "0"), h = this.imageLayouts[g], b = this.entryAnimationEngine.getTiming(), I = performance.now(), y = parseFloat(l.dataset.startX || "0"), E = parseFloat(l.dataset.startY || "0"), x = parseFloat(l.dataset.endX || "0"), F = parseFloat(l.dataset.endY || "0"), R = parseFloat(l.dataset.rotation || "0"), M = parseFloat(l.dataset.scale || "1"), T = parseFloat(l.dataset.startRotation || l.dataset.rotation || "0"), z = parseFloat(l.dataset.startScale || l.dataset.scale || "1"), k = parseFloat(l.dataset.imageWidth || "0"), D = parseFloat(l.dataset.imageHeight || "0");
+        const g = parseInt(l.dataset.imageId || "0"), h = this.imageLayouts[g], b = this.entryAnimationEngine.getTiming(), I = performance.now(), y = parseFloat(l.dataset.startX || "0"), E = parseFloat(l.dataset.startY || "0"), x = parseFloat(l.dataset.endX || "0"), F = parseFloat(l.dataset.endY || "0"), R = parseFloat(l.dataset.rotation || "0"), M = parseFloat(l.dataset.scale || "1"), T = parseFloat(l.dataset.startRotation || l.dataset.rotation || "0"), z = parseFloat(l.dataset.startScale || l.dataset.scale || "1"), P = parseFloat(l.dataset.imageWidth || "0"), D = parseFloat(l.dataset.imageHeight || "0");
         if (this.callbacks.onEntryStart && h) {
           const S = {
             element: l,
@@ -3494,7 +3491,7 @@ class Qe {
             endPosition: { x, y: F },
             pathConfig: this.entryAnimationEngine.getPathConfig(),
             duration: b.duration,
-            imageWidth: k,
+            imageWidth: P,
             imageHeight: D,
             rotation: R,
             scale: M,
@@ -3502,7 +3499,7 @@ class Qe {
             startRotation: T,
             scaleConfig: this.entryAnimationEngine.getScaleConfig(),
             startScale: z,
-            onProgress: this.callbacks.onEntryProgress && h ? (S, P, _) => {
+            onProgress: this.callbacks.onEntryProgress && h ? (S, U, k) => {
               const A = {
                 element: l,
                 index: g,
@@ -3514,8 +3511,8 @@ class Qe {
                 duration: b.duration,
                 progress: S,
                 rawProgress: S,
-                elapsed: P,
-                current: _
+                elapsed: U,
+                current: k
               };
               this.callbacks.onEntryProgress(A);
             } : void 0,
@@ -3536,9 +3533,9 @@ class Qe {
         else {
           const S = l.dataset.finalTransform || "";
           if (l.style.transform = S, this.callbacks.onEntryComplete && h) {
-            const P = (_) => {
-              if (_.propertyName !== "transform") return;
-              l.removeEventListener("transitionend", P);
+            const U = (k) => {
+              if (k.propertyName !== "transform") return;
+              l.removeEventListener("transitionend", U);
               const A = {
                 element: l,
                 index: g,
@@ -3549,7 +3546,7 @@ class Qe {
               };
               this.callbacks.onEntryComplete(A);
             };
-            l.addEventListener("transitionend", P);
+            l.addEventListener("transitionend", U);
           }
         }
         if (this.fullConfig.config.debug?.enabled && g < 3) {
@@ -3606,7 +3603,7 @@ class Qe {
       h.style.left = `${b - 6}px`, h.style.top = `${I - 6}px`, h.title = `Image ${g}: center (${Math.round(b)}, ${Math.round(I)})`, this.containerEl.appendChild(h);
     })), t.forEach((l, g) => {
       const h = document.createElement("img");
-      h.referrerPolicy = "no-referrer", h.classList.add("fbn-ic-image"), this.fullConfig.interaction.dragging === !1 && (h.draggable = !1), h.dataset.imageId = String(g), h.dataset.createdFlag = "true";
+      h.referrerPolicy = "no-referrer", h.classList.add("fbn-ic-image"), h.alt = this.getImageAlt(l, g), this.fullConfig.interaction.dragging === !1 && (h.draggable = !1), h.dataset.imageId = String(g);
       const b = s[g];
       h.style.position = "absolute", h.style.width = "auto", h.style.height = `${i}px`, h.style.left = `${b.x}px`, h.style.top = `${b.y}px`, b.zIndex && (h.style.zIndex = String(b.zIndex)), et(h, this.defaultClassName), h.addEventListener("mouseenter", () => {
         if (this.hoveredImage = { element: h, layout: b }, !this.zoomEngine.isInvolved(h)) {
@@ -3632,7 +3629,7 @@ class Qe {
         if (n !== this.loadGeneration)
           return;
         const y = h.naturalWidth / h.naturalHeight, E = i * y;
-        h.dataset.onloadCalled = "true", window.DEBUG_CLIPPATH && console.log(`[onload #${g}] Called with imageHeight=${i}, renderedWidth=${E}`), h.style.width = `${E}px`, h.cachedRenderedWidth = E, h.aspectRatio = y, st(h, this.fullConfig.styling?.default, i, E);
+        h.style.width = `${E}px`, h.cachedRenderedWidth = E, h.aspectRatio = y, st(h, this.fullConfig.styling?.default, i, E);
         const x = { x: b.x, y: b.y }, F = { width: E, height: i }, R = this.entryAnimationEngine.calculateStartPosition(
           x,
           F,
@@ -3644,7 +3641,7 @@ class Qe {
           b.scale,
           E,
           i
-        ), k = this.entryAnimationEngine.buildStartTransform(
+        ), P = this.entryAnimationEngine.buildStartTransform(
           R,
           x,
           b.rotation,
@@ -3662,7 +3659,7 @@ class Qe {
           finalTransform: z,
           renderedWidth: E,
           renderedHeight: i
-        }), h.style.transform = k, h.dataset.finalTransform = z, h.dataset.startX = String(R.x), h.dataset.startY = String(R.y), h.dataset.endX = String(x.x), h.dataset.endY = String(x.y), h.dataset.imageWidth = String(E), h.dataset.imageHeight = String(i), h.dataset.rotation = String(b.rotation), h.dataset.scale = String(b.scale), h.dataset.startRotation = String(M), h.dataset.startScale = String(T), a++, this.callbacks.onImageLoaded) {
+        }), h.style.transform = P, h.dataset.finalTransform = z, h.dataset.startX = String(R.x), h.dataset.startY = String(R.y), h.dataset.endX = String(x.x), h.dataset.endY = String(x.y), h.dataset.imageWidth = String(E), h.dataset.imageHeight = String(i), h.dataset.rotation = String(b.rotation), h.dataset.scale = String(b.scale), h.dataset.startRotation = String(M), h.dataset.startScale = String(T), a++, this.callbacks.onImageLoaded) {
           const D = {
             element: h,
             url: l,
@@ -3712,8 +3709,8 @@ class Qe {
                 const M = await (await fetch(F, x.fetch)).blob(), T = URL.createObjectURL(M);
                 y = T;
                 const z = h.onload;
-                h.onload = (k) => {
-                  URL.revokeObjectURL(T), z?.call(h, k);
+                h.onload = (P) => {
+                  URL.revokeObjectURL(T), z?.call(h, P);
                 };
               } catch {
                 I();
@@ -3732,11 +3729,15 @@ class Qe {
       height: this.containerEl.offsetHeight
     };
     if (e)
-      await this.zoomEngine.unfocusImage(), this.currentFocusIndex = null, this.swipeEngine?.disable(), this.hideCounter(), this.hideNavButtons(), this.hideFocusIndicator();
+      await this.zoomEngine.unfocusImage(), this.currentFocusIndex = null, this.swipeEngine?.disable(), this.hideCounter(), this.hideNavButtons(), this.ariaLiveEl && (this.ariaLiveEl.textContent = ""), this.hideFocusIndicator();
     else {
       this.idleAnimationEngine?.pauseForImage(t);
       const s = t.dataset.imageId;
-      if (this.currentFocusIndex = s !== void 0 ? parseInt(s, 10) : null, this.swipeEngine?.enable(), this.containerEl?.focus({ preventScroll: !0 }), await this.zoomEngine.focusImage(t, n, i), this.currentFocusIndex !== null && this.updateCounter(this.currentFocusIndex), this.showNavButtons(), this.showFocusIndicator(), this.callbacks.onImageFocus && this.currentFocusIndex !== null) {
+      if (this.currentFocusIndex = s !== void 0 ? parseInt(s, 10) : null, this.swipeEngine?.enable(), this.containerEl?.focus({ preventScroll: !0 }), await this.zoomEngine.focusImage(t, n, i), this.currentFocusIndex !== null && this.updateCounter(this.currentFocusIndex), this.showNavButtons(), this.ariaLiveEl && this.currentFocusIndex !== null) {
+        const r = t.alt, a = this.imageLayouts.length;
+        this.ariaLiveEl.textContent = `Image ${this.currentFocusIndex + 1} of ${a}: ${r}`;
+      }
+      if (this.showFocusIndicator(), this.callbacks.onImageFocus && this.currentFocusIndex !== null) {
         const r = this.imageLoader.imageURLs(), a = {
           element: t,
           index: this.currentFocusIndex,