Fix pagedecorations hotspot (#275)

Author: jrlarano

lib/kits/core-ui/components/paged-publication/main-container.ts

@@ -11,6 +11,7 @@ const defaultTemplate = `\
             </div>
         </div>
         
+        <div class="sgn-page_decorations"></div>
         
         <button
             class="sgn-pp__control"
@@ -40,7 +41,6 @@ const defaultTemplate = `\
         >
             &laquo;
         </button>
-        <div class="sgn-page_decorations"></div>
         <div class="sgn__header-container"></div>
         
         {{#enableSidebar}}

lib/kits/paged-publication/hotspots.ts

@@ -97,23 +97,25 @@ function renderHotspot(hotspot, position, contentRect, boundingRect) {
     el.style.width = `${width}px`;
     el.style.height = `${height}px`;
 
-    el.setAttribute('tabindex', '-1');
-    el.setAttribute(
-        'aria-label',
-        `${hotspot.offer.heading}; ${hotspot.offer.pricing.price} ${hotspot.offer.pricing.currency};`
-    );
-
-    const observer = new IntersectionObserver((entries) => {
-        entries.forEach((entry) => {
-            if (entry.isIntersecting) {
-                entry.target.setAttribute('tabindex', '0');
-            } else {
-                entry.target.setAttribute('tabindex', '-1');
-            }
+    if (hotspot.type === 'offer') {
+        el.setAttribute('tabindex', '-1');
+        el.setAttribute(
+            'aria-label',
+            `${hotspot.offer.heading}; ${hotspot.offer.pricing.price} ${hotspot.offer.pricing.currency};`
+        );
+
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                if (entry.isIntersecting) {
+                    entry.target.setAttribute('tabindex', '0');
+                } else {
+                    entry.target.setAttribute('tabindex', '-1');
+                }
+            });
         });
-    });
 
-    observer.observe(el);
+        observer.observe(el);
+    }
 
     return el;
 }