From 14db97110311d6094b99e17474d64104380cccc3 Mon Sep 17 00:00:00 2001
From: Andrei Bogdan <166901+andreibogdan@users.noreply.github.com>
Date: Tue, 21 Nov 2023 12:05:46 +0200
Subject: [PATCH] Fix quote-carousel & carousel not rendering (#412)

Co-authored-by: Andrei Bogdan <andbogda@adobe.com>
---
 .../blocks/quote-carousel/quote-carousel.js   | 11 ++++----
 solutions/blocks/quote/quote.js               |  6 ++--
 solutions/scripts/lib-franklin.js             | 28 +++++++++++++------
 3 files changed, 29 insertions(+), 16 deletions(-)

diff --git a/solutions/blocks/quote-carousel/quote-carousel.js b/solutions/blocks/quote-carousel/quote-carousel.js
index 36ec87dd4..e6c758b96 100644
--- a/solutions/blocks/quote-carousel/quote-carousel.js
+++ b/solutions/blocks/quote-carousel/quote-carousel.js
@@ -8,7 +8,7 @@ function createSlide(item, index) {
   const paragraphs = Array.from(item.querySelectorAll('p'));
   const quote = paragraphs.find((paragraph) => {
     const strongOrEm = paragraph.querySelector('strong, em');
-    return !strongOrEm && paragraph.textContent.trim() !== '';
+    return !strongOrEm && paragraph.innerHTML !== '';
   });
 
   const author = item.querySelector('p > strong');
@@ -16,6 +16,7 @@ function createSlide(item, index) {
   if (!quote) {
     return null;
   }
+
   return createTag(
     'div',
     {
@@ -30,9 +31,9 @@ function createSlide(item, index) {
         <span class="icon icon-dark-blue-quote"/>
     </div>
     <div class="quote-content">
-        <h4>${quote?.textContent}</h4>
+        <h4>${quote?.innerHTML}</h4>
         <h5>${author?.textContent}</h5>
-        <p>${description?.textContent}</p>
+        <p>${description?.innerHTML}</p>
     </div>`,
   );
 }
@@ -121,8 +122,8 @@ export default async function decorate(block) {
       slides.append(slide);
     }
   });
-  slides.children[0].classList.add('active');
 
+  slides.children[0].classList.add('active');
   const dotsControls = createDotsControls(slides, block);
 
   /* Add carousel action button if it exists */
@@ -138,5 +139,5 @@ export default async function decorate(block) {
   block.replaceChildren(slidesContainer);
   updateControlsState(block, 0);
   addDotsListeners(dotsControls, slides);
-  await decorateIcons(block);
+  decorateIcons(block);
 }
diff --git a/solutions/blocks/quote/quote.js b/solutions/blocks/quote/quote.js
index 920848cc6..fd176c411 100644
--- a/solutions/blocks/quote/quote.js
+++ b/solutions/blocks/quote/quote.js
@@ -45,8 +45,8 @@ function createQuote(item) {
     </div>
     <div class="quote-content">
         <p class="stars">${starsContainer?.innerHTML}</p>
-        <p class="description">${quote?.textContent}</p>
-        <p class="author">${author?.textContent}</p>
+        <p class="description">${quote?.innerHTML}</p>
+        <p class="author">${author?.innerHTML}</p>
     </div>`,
   );
 }
@@ -60,5 +60,5 @@ export default async function decorate(block) {
   });
   block.replaceChildren(quoteWrap);
 
-  await decorateIcons(block);
+  decorateIcons(block);
 }
diff --git a/solutions/scripts/lib-franklin.js b/solutions/scripts/lib-franklin.js
index dcb62ca89..057d9c1b8 100644
--- a/solutions/scripts/lib-franklin.js
+++ b/solutions/scripts/lib-franklin.js
@@ -182,7 +182,7 @@ const ICONS_CACHE = {};
  * Replace icons with inline SVG and prefix with codeBasePath.
  * @param {Element} [element] Element containing icons
  */
-export async function decorateIcons(element) {
+async function internalDecorateIcons(element) {
   // Prepare the inline sprite
   let svgSprite = document.getElementById('franklin-svg-sprite');
   if (!svgSprite) {
@@ -225,19 +225,20 @@ export async function decorateIcons(element) {
     }
   }));
 
-  const symbols = Object
-    .keys(ICONS_CACHE).filter((k) => !svgSprite.querySelector(`#icons-sprite-${k}`))
-    .map((k) => ICONS_CACHE[k])
-    .filter((v) => !v.styled)
-    .map((v) => v.html)
-    .join('\n');
+  const symbols = Object.values(ICONS_CACHE).filter((v) => !v.styled).map((v) => v.html).join('\n');
   svgSprite.innerHTML += symbols;
 
   icons.forEach((span) => {
     const iconName = Array.from(span.classList).find((c) => c.startsWith('icon-')).substring(5);
     const parent = span.firstElementChild?.tagName === 'A' ? span.firstElementChild : span;
+
+    // Set aria-label if the parent is an anchor tag
+    const spanParent = span.parentElement;
+    if (spanParent.tagName === 'A' && !spanParent.hasAttribute('aria-label')) {
+      spanParent.setAttribute('aria-label', iconName);
+    }
     // Styled icons need to be inlined as-is, while unstyled ones can leverage the sprite
-    if (ICONS_CACHE[iconName].styled) {
+    if (ICONS_CACHE[iconName] && ICONS_CACHE[iconName].styled) {
       parent.innerHTML = ICONS_CACHE[iconName].html;
     } else {
       parent.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg"><use href="#icons-sprite-${iconName}"/></svg>`;
@@ -245,6 +246,17 @@ export async function decorateIcons(element) {
   });
 }
 
+let previousDecoration = Promise.resolve();
+
+/**
+ * Replace icons with inline SVG and prefix with codeBasePath.
+ * @param {Element} [element] Element containing icons
+ */
+export async function decorateIcons(element) {
+  previousDecoration = previousDecoration.then(() => internalDecorateIcons(element));
+  await previousDecoration;
+}
+
 export async function decorateTags(element) {
   const tagTypes = [
     { regex: /\[#(.*?)#\]/g, className: 'dark-blue' },