[Release] Stage to Main

libs/blocks/fragment/fragment.js

@@ -59,7 +59,7 @@ function replaceDotMedia(path, doc) {
 }
 
 export default async function init(a) {
-  const { expFragments, decorateArea } = getConfig();
+  const { expFragments, decorateArea, mep } = getConfig();
   let relHref = localizeLink(a.href);
   let inline = false;
 
@@ -78,9 +78,9 @@ export default async function init(a) {
   }
 
   const path = new URL(a.href).pathname;
-  if (expFragments?.[path]) {
-    a.href = expFragments[path];
-    relHref = expFragments[path];
+  if (expFragments?.[path] && mep) {
+    relHref = mep.handleFragmentCommand(expFragments[path], a);
+    if (!relHref) return;
   }
 
   if (isCircularRef(relHref)) {

libs/blocks/quiz/quiz.js

@@ -21,7 +21,7 @@ export async function loadFragments(fragmentURL) {
 const App = ({
   initialIsDataLoaded = false,
   preQuestions = {}, initialStrings = {}, shortQuiz: isShortQuiz = false,
-  preselections = [], nextQuizViewsExist: preNextQuizViewsExist = true,
+  preselections = [], nextQuizViewsExist: preNextQuizViewsExist = true, storedQuizState = true,
 }) => {
   const [btnAnalytics, setBtnAnalytics] = useState(null);
   const [countSelectedCards, setCountOfSelectedCards] = useState(0);
@@ -56,7 +56,14 @@ const App = ({
         strMap[question.q] = question;
       });
 
-      setUserFlow([questions.questions.data[0].questions]);
+      if (!!Object.keys(storedQuizState).length
+        && !!storedQuizState?.userFlow.length
+        && !!storedQuizState?.userSelection.length) {
+        setUserFlow(storedQuizState.userFlow);
+        updateUserSelection(storedQuizState.userSelection);
+      } else {
+        setUserFlow([questions.questions.data[0].questions]);
+      }
 
       setStringData(dataStrings);
       setQuestionData(questions);
@@ -195,6 +202,8 @@ const App = ({
     const nextQuizViewsLen = nextQuizViews.length;
     const [firstQuizView] = nextQuizViews;
 
+    localStorage.removeItem('stored-quiz-state');
+
     if (nextQuizViewsLen === 1 && isValidUrl(firstQuizView)) {
       window.location.href = firstQuizView;
       return;
@@ -332,6 +341,14 @@ export default async function init(
 ) {
   const configData = initConfigPathGlob(el);
   const updatedShortQuiz = shortQuiz || configData.shortQuiz;
+  let storedQuizState = localStorage.getItem('stored-quiz-state') || {};
+
+  try {
+    storedQuizState = JSON.parse(storedQuizState);
+  } catch (e) {
+    storedQuizState = {};
+  }
+
   el.replaceChildren();
   render(html`<${App} 
     initialIsDataLoaded=${initialIsDataLoaded} 
@@ -340,5 +357,6 @@ export default async function init(
     shortQuiz=${updatedShortQuiz}
     preselections=${preselections}
     nextQuizViewsExist=${nextQuizViewsExist}
+    storedQuizState=${storedQuizState}
   />`, el);
 }

libs/blocks/quiz/quizcontainer.js

@@ -3,7 +3,7 @@ import { html } from '../../deps/htm-preact.js';
 export const DecorateBlockBackgroundCmp = ({ background = '' }) => html`<img loading="eager" alt="" src=${background} height="1020" width="1920" />`;
 
 export const DecorateBlockForeground = ({ heading, subhead }) => html`<div class="quiz-foreground">
-    <h1 class="quiz-question-title" daa-lh="${heading}">${heading}</h1>
+    <h1 id="question" class="quiz-question-title" daa-lh="${heading}">${heading}</h1>
     <p class="quiz-question-text">${subhead}</p>
   </div>`;
 

libs/blocks/quiz/quizoption.js

@@ -42,7 +42,7 @@ export const OptionCard = ({
   `;
 
   return html`<button class="quiz-option ${getOptionClass()}" data-option-name="${options}" 
-        aria-pressed="${!!selected}" tabindex="${disabled ? '-1' : '0'}">
+        role="checkbox" aria-checked="${!!selected}" disabled="${disabled}">
         ${(icon || iconTablet || iconDesktop) && getIconHtml()}
         ${image && imageHtml}
         <div class="quiz-option-text-container">  
@@ -78,7 +78,7 @@ export const GetQuizOption = ({
   btnAnalyticsData, background,
 }) => html`
   <div class="quiz-question">
-      <div class="quiz-options-container">
+      <div class="quiz-options-container" role="group" aria-labelledby="question">
         <${CreateOptions} 
           options=${options} 
           selectedCards=${selectedCards}