[Release] Stage to Main

.github/workflows/run-nala.yml

@@ -1,4 +1,4 @@
-name: Nala Tests
+name: Nala Tests (Consuming Apps)
 
 on:
   pull_request:
@@ -8,11 +8,12 @@ jobs:
   action:
     name: Running E2E & IT
     runs-on: ubuntu-latest
+    if: contains(join(github.event.pull_request.labels.*.name, ' '), 'run-nala-on-')
 
     steps:
       - name: Check out repository
         uses: actions/checkout@v4
-      - name: Run Nala
+      - name: Run Nala Tests (Consuming Apps) 
         uses: adobecom/nala@main # Change if doing dev work
         env:
           labels: ${{ join(github.event.pull_request.labels.*.name, ' ') }}

libs/blocks/adobetv/adobetv.js

@@ -1,15 +1,22 @@
-import { decorateAnchorVideo } from '../../utils/decorate.js';
+import { createIntersectionObserver } from '../../utils/utils.js';
+import { applyHoverPlay, getVideoAttrs } from '../../utils/decorate.js';
 
-export default function init(a) {
-  a.classList.add('hide-video');
+const ROOT_MARGIN = 1000;
+
+const loadAdobeTv = (a) => {
   const bgBlocks = ['aside', 'marquee', 'hero-marquee'];
   if (a.href.includes('.mp4') && bgBlocks.some((b) => a.closest(`.${b}`))) {
     a.classList.add('hide');
+    const { href, hash, dataset } = a;
+    const attrs = getVideoAttrs(hash || 'autoplay', dataset);
+    const video = `<video ${attrs}>
+          <source src="${href}" type="video/mp4" />
+        </video>`;
     if (!a.parentNode) return;
-    decorateAnchorVideo({
-      src: a.href,
-      anchorTag: a,
-    });
+    a.insertAdjacentHTML('afterend', video);
+    const videoElem = document.body.querySelector(`source[src="${href}"]`)?.parentElement;
+    applyHoverPlay(videoElem);
+    a.remove();
   } else {
     const embed = `<div class="milo-video">
       <iframe src="${a.href}" class="adobetv" webkitallowfullscreen mozallowfullscreen allowfullscreen scrolling="no" allow="encrypted-media" title="Adobe Video Publishing Cloud Player" loading="lazy">
@@ -18,4 +25,17 @@ export default function init(a) {
     a.insertAdjacentHTML('afterend', embed);
     a.remove();
   }
+};
+
+export default function init(a) {
+  a.classList.add('hide-video');
+  if (a.textContent.includes('no-lazy')) {
+    loadAdobeTv(a);
+  } else {
+    createIntersectionObserver({
+      el: a,
+      options: { rootMargin: `${ROOT_MARGIN}px` },
+      callback: loadAdobeTv,
+    });
+  }
 }

libs/blocks/caas/utils.js

@@ -738,8 +738,10 @@ export const getConfig = async (originalState, strs = {}) => {
       lastViewedSession: state.lastViewedSession || '',
     },
     customCard: ['card', `return \`${state.customCard}\``],
+    linkTransformer: pageConfig.caasLinkTransformer || {},
     headers: caasRequestHeaders,
   };
+
   return config;
 };
 

libs/blocks/editorial-card/editorial-card.js

@@ -57,14 +57,15 @@ const decorateForeground = async (el, rows) => {
   });
 };
 
-const decorateBgRow = (el, background) => {
-  decorateBlockBg(el, background);
+const decorateBgRow = (el, background, remove = false) => {
   const rows = background.querySelectorAll(':scope > div');
   const bgRowsEmpty = [...rows].every((row) => row.innerHTML.trim() === '');
-  if (bgRowsEmpty) {
+  if (bgRowsEmpty || remove) {
     el.classList.add('no-bg');
     background.remove();
+    return;
   }
+  decorateBlockBg(el, background);
 };
 
 function handleClickableCard(el) {
@@ -80,38 +81,50 @@ function handleClickableCard(el) {
 
 const init = async (el) => {
   el.classList.add('con-block');
-  if (el.className.includes('open')) {
-    el.classList.add('no-border', 'l-rounded-corners-image', 'static-links-copy');
-  }
-  if (el.className.includes('rounded-corners')) {
-    loadStyle(`${base}/styles/rounded-corners.css`);
-  }
+  const hasOpenClass = el.className.includes('open');
+  if (hasOpenClass) el.classList.add('no-border', 'l-rounded-corners-image', 'static-links-copy');
+  if (el.className.includes('rounded-corners')) loadStyle(`${base}/styles/rounded-corners.css`);
   if (![...el.classList].some((c) => c.endsWith('-lockup'))) el.classList.add('m-lockup');
   let rows = el.querySelectorAll(':scope > div');
   const [head, middle, ...tail] = rows;
   if (rows.length === 4) el.classList.add('equal-height');
   if (rows.length >= 1) {
-    const count = rows.length >= 3 ? 'three-plus' : rows.length;
+    const count = rows.length >= 4 ? 'four-plus' : rows.length;
     switch (count) {
-      case 'three-plus':
-        // 3+ rows (0:bg, 1:media, 2:copy, ...3:static, last:card-footer)
-        decorateBgRow(el, head);
+      case 'four-plus':
+        // 4+ rows (0:bg, 1:media, 2:copy, ...3:static, last:card-footer)
+        // 4+ rows.open (0:bg[removed], 1:media, 2:copy, ...3:static, last:card-footer)
+        decorateBgRow(el, head, hasOpenClass);
         rows = tail;
-        await decorateForeground(el, rows);
         decorateMedia(el, middle);
+        await decorateForeground(el, rows);
+        break;
+      case 3:
+        // 3 rows (0:bg, 1:media, last:copy)
+        // 3 rows.open (0:media, 1:copy, last:card-footer)
+        if (hasOpenClass) {
+          el.classList.add('no-bg');
+          rows = [middle, tail[0]];
+          decorateMedia(el, head);
+        } else {
+          rows = tail;
+          decorateBgRow(el, head);
+          decorateMedia(el, middle);
+        }
+        await decorateForeground(el, rows);
         break;
       case 2:
         // 2 rows (0:media, 1:copy)
-        rows = middle;
-        await decorateForeground(el, [rows]);
+        rows = [middle];
         decorateMedia(el, head);
         el.classList.add('no-bg');
+        await decorateForeground(el, rows);
         break;
       case 1:
         // 1 row  (0:copy)
-        rows = head;
-        await decorateForeground(el, [rows]);
+        rows = [head];
         el.classList.add('no-bg', 'no-media');
+        await decorateForeground(el, rows);
         break;
       default:
     }

libs/blocks/figure/figure.js

@@ -1,5 +1,4 @@
-import { applyHoverPlay, decorateAnchorVideo } from '../../utils/decorate.js';
-import { createTag } from '../../utils/utils.js';
+import { applyHoverPlay, getVideoAttrs } from '../../utils/decorate.js';
 
 function buildCaption(pEl) {
   const figCaptionEl = document.createElement('figcaption');
@@ -16,22 +15,23 @@ function htmlToElement(html) {
 }
 
 function decorateVideo(clone, figEl) {
-  const videoTag = clone.querySelector('video');
-  const anchorTag = clone.querySelector('a[href*=".mp4"]');
-  if (anchorTag && !anchorTag.hash) anchorTag.hash = '#autoplay';
-  if (anchorTag) decorateAnchorVideo({ src: anchorTag.href, anchorTag });
-  if (videoTag) {
-    videoTag.removeAttribute('data-mouseevent');
-    if (videoTag.dataset?.videoSource) {
-      videoTag.appendChild(
-        createTag('source', {
-          src: videoTag.dataset?.videoSource,
-          type: 'video/mp4',
-        }),
-      );
-    }
-    applyHoverPlay(videoTag);
-    figEl.prepend(videoTag);
+  let video = clone.querySelector('video');
+  const videoLink = clone.querySelector('a[href*=".mp4"]');
+  if (videoLink) {
+    const { href, hash, dataset } = videoLink;
+    const attrs = getVideoAttrs(hash, dataset);
+    const videoElem = `<video ${attrs}>
+      <source src="${href}" type="video/mp4" />
+    </video>`;
+
+    videoLink.insertAdjacentHTML('afterend', videoElem);
+    videoLink.remove();
+    video = clone.querySelector('video');
+  }
+  if (video) {
+    video.removeAttribute('data-mouseevent');
+    applyHoverPlay(video);
+    figEl.prepend(video);
   }
 }
 

libs/blocks/quiz-entry/quiz-entry.css

@@ -1,6 +1,6 @@
 .quiz-entry {
   --quiz-button-disabled-bg: #757575;
-  --quiz-button-disabled-text: #FFF6F6;
+  --quiz-button-disabled-text: #FFF;
 }
 
 .quiz-container {
@@ -25,12 +25,13 @@
   font-size: var(--type-heading-xl-size);
   line-height: var(--type-heading-xl-lh);
   font-weight: var(--type-heading-all-weight);
-  margin-bottom: 8px;
+  margin: 0 0 8px;
 }
 
 .quiz-subtitle {
   font-size: var(--type-heading-l-size);
   line-height: var(--type-heading-l-lh);
+  margin: 0;
 }
 
 .quiz-question-container {

libs/blocks/quiz-entry/quiz-entry.js

@@ -345,8 +345,8 @@ const App = ({
 
   return html`<div class="quiz-container">
     <div class="quiz-heading-container">
-      <div id="question" class="quiz-title">${quizLists.strings[selectedQuestion.questions].heading}</div>
-      <div class="quiz-subtitle">${quizLists.strings[selectedQuestion.questions]['sub-head']}</div>
+      <h2 id="question" class="quiz-title">${quizLists.strings[selectedQuestion.questions].heading}</h2>
+      <p class="quiz-subtitle">${quizLists.strings[selectedQuestion.questions]['sub-head']}</p>
     </div>
     <div class="quiz-question-container">
       <div class="quiz-input-container">

libs/blocks/quiz-entry/quizoption.js

@@ -1,5 +1,6 @@
 import { html, useState, useEffect } from '../../deps/htm-preact.js';
 import { getSwipeDistance, getSwipeDirection } from '../carousel/carousel.js';
+import { createTag } from '../../utils/utils.js';
 
 export const OptionCard = ({
   text, title, image, icon, iconTablet, iconDesktop, options,
@@ -51,15 +52,30 @@ export const GetQuizOption = ({
 
   const isRTL = document.documentElement.getAttribute('dir') === 'rtl';
 
+  /**
+ * Resets focus to the top of the quiz-entry options for accessibility.
+ * To ensure that the next keyboard tab after carousel navigation
+ * will focus the first avaiable quiz option.
+ */
+  const resetFocus = () => {
+    const quiz = document.querySelector('.quiz-options-container');
+    const focuser = createTag('button', { tabindex: 0 });
+    quiz.prepend(focuser);
+    focuser.focus();
+    quiz.removeChild(focuser);
+  };
+
   const next = async () => {
     if (index + visibleCount < options.data.length) {
       setIndex(index + 1);
+      resetFocus();
     }
   };
 
   const prev = () => {
     if (index > 0) {
       setIndex(index - 1);
+      resetFocus();
     }
   };
 
@@ -144,24 +160,24 @@ export const GetQuizOption = ({
 
   return html`
   <div class="quiz-options-container" role="group" aria-labelledby="question" tabindex="0" onkeydown=${handleKey}>
-  ${index > 0 && html`<button onClick=${prev} class="carousel-arrow arrow-prev ${isRTL ? 'rtl' : ''}" aria-label="Previous"></button>`}
-  <div class="carousel-slides ${index > 0 ? 'align-right' : ''}">
-    ${options.data.slice(index + 1, index + visibleCount).map((option, idx) => html`
-      <${OptionCard} 
-        key=${idx}
-        text=${option.text}
-        title=${option.title} 
-        icon=${getOptionsValue(option.options, 'icon')}
-        iconTablet=${getOptionsValue(option.options, 'icon-tablet')}
-        iconDesktop=${getOptionsValue(option.options, 'icon-desktop')}
-        image=${getOptionsValue(option.options, 'image')}
-        background=${background}
-        options=${option.options}
-        selected=${selectedCards[option.options] ? 'selected' : ''}
-        disabled=${(countSelectedCards > 0 && !selectedCards[option.options] && countSelectedCards >= maxSelections) || mlInputUsed ? 'disabled' : ''}
-        onClick=${onOptionClick(option)}
-        />`)}
-  </div>
-  ${(index + visibleCount < options.data.length) && html`<button onClick=${next} class="carousel-arrow arrow-next ${isRTL ? 'rtl' : ''}" aria-label="Next"></button>`}
+    ${index > 0 && html`<button onClick=${prev} class="carousel-arrow arrow-prev ${isRTL ? 'rtl' : ''}" aria-label="Previous"></button>`}
+    <div class="carousel-slides ${index > 0 ? 'align-right' : ''}">
+      ${options.data.slice(index + 1, index + visibleCount).map((option, idx) => html`
+        <${OptionCard} 
+          key=${idx}
+          text=${option.text}
+          title=${option.title} 
+          icon=${getOptionsValue(option.options, 'icon')}
+          iconTablet=${getOptionsValue(option.options, 'icon-tablet')}
+          iconDesktop=${getOptionsValue(option.options, 'icon-desktop')}
+          image=${getOptionsValue(option.options, 'image')}
+          background=${background}
+          options=${option.options}
+          selected=${selectedCards[option.options] ? 'selected' : ''}
+          disabled=${(countSelectedCards > 0 && !selectedCards[option.options] && countSelectedCards >= maxSelections) || mlInputUsed ? 'disabled' : ''}
+          onClick=${onOptionClick(option)}
+          />`)}
+    </div>
+    ${(index + visibleCount < options.data.length) && html`<button onClick=${next} class="carousel-arrow arrow-next ${isRTL ? 'rtl' : ''}" aria-label="Next"></button>`}
   </div>`;
 };

libs/blocks/video/video.js

@@ -1,13 +1,10 @@
-import { getConfig } from '../../utils/utils.js';
-import { decorateAnchorVideo } from '../../utils/decorate.js';
+import { createIntersectionObserver, getConfig } from '../../utils/utils.js';
+import { applyHoverPlay, getVideoAttrs, applyInViewPortPlay } from '../../utils/decorate.js';
 
-export default function init(a) {
-  a.classList.add('hide-video');
-  if (!a.parentNode) {
-    a.remove();
-    return;
-  }
-  const { pathname } = a;
+const ROOT_MARGIN = 1000;
+
+const loadVideo = (a) => {
+  const { pathname, hash, dataset } = a;
   let videoPath = `.${pathname}`;
   if (pathname.match('media_.*.mp4')) {
     const { codeRoot } = getConfig();
@@ -17,8 +14,28 @@ export default function init(a) {
     const mediaFilename = pathname.split('/').pop();
     videoPath = `${root}${mediaFilename}`;
   }
-  decorateAnchorVideo({
-    src: videoPath,
-    anchorTag: a,
-  });
+
+  const attrs = getVideoAttrs(hash, dataset);
+  const video = `<video ${attrs}>
+        <source src="${videoPath}" type="video/mp4" />
+      </video>`;
+  if (!a.parentNode) return;
+  a.insertAdjacentHTML('afterend', video);
+  const videoElem = document.body.querySelector(`source[src="${videoPath}"]`)?.parentElement;
+  applyHoverPlay(videoElem);
+  applyInViewPortPlay(videoElem);
+  a.remove();
+};
+
+export default function init(a) {
+  a.classList.add('hide-video');
+  if (a.textContent.includes('no-lazy')) {
+    loadVideo(a);
+  } else {
+    createIntersectionObserver({
+      el: a,
+      options: { rootMargin: `${ROOT_MARGIN}px` },
+      callback: loadVideo,
+    });
+  }
 }