Fix quote-carousel & carousel not rendering (#412)

Co-authored-by: Andrei Bogdan <[email protected]>
hlxsites · Nov 21, 2023 · 14db971 · 14db971
1 parent f1f14d4
commit 14db971
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 16 deletions.
diff --git a/solutions/blocks/quote-carousel/quote-carousel.js b/solutions/blocks/quote-carousel/quote-carousel.js
@@ -8,14 +8,15 @@ 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');
   const description = item.querySelector('p > em');
   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
@@ -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
@@ -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,26 +225,38 @@ 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>`;
     }
   });
 }
 
+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' },