eat-js-sdk 2.4.2 → 2.5.1

package/dist/interaction-builder.mjs

@@ -5453,6 +5453,23 @@ async function typesetMathJax(element) {
     el.setAttribute("tabindex", "-1");
   });
 }
+async function getMathJaxSpeechText(html2) {
+  const staging = document.createElement("div");
+  staging.style.cssText = "position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden";
+  staging.innerHTML = html2;
+  document.body.appendChild(staging);
+  try {
+    await typesetMathJax(staging);
+    staging.querySelectorAll("mjx-container").forEach((container) => {
+      const assistive = container.querySelector("mjx-assistive-mml");
+      const text2 = assistive?.textContent?.trim() ?? "";
+      container.replaceWith(document.createTextNode(text2));
+    });
+    return staging.textContent?.trim() ?? "";
+  } finally {
+    if (staging.parentNode) staging.remove();
+  }
+}
 var root_1$o = /* @__PURE__ */ from_html(`<div><!></div>`);
 function CommonStringToHtml($$anchor, $$props) {
   push($$props, true);
@@ -6982,9 +6999,9 @@ function useImageModalSize() {
   };
 }
 var root_4$8 = /* @__PURE__ */ from_html(`<span class="w-6 h-6 flex items-center justify-center"><!></span>`);
-var root_5$8 = /* @__PURE__ */ from_html(`<span class="w-6 h-6 flex items-center justify-center"><!></span>`);
-var root_7$5 = /* @__PURE__ */ from_html(`<span class="sr-only"><!></span>`);
-var root_6$5 = /* @__PURE__ */ from_html(`<div><!> <span aria-hidden="true"><!></span></div>`);
+var root_5$a = /* @__PURE__ */ from_html(`<span class="w-6 h-6 flex items-center justify-center"><!></span>`);
+var root_7$7 = /* @__PURE__ */ from_html(`<span class="sr-only"><!></span>`);
+var root_6$4 = /* @__PURE__ */ from_html(`<div><!> <span aria-hidden="true"><!></span></div>`);
 var root_10$3 = /* @__PURE__ */ from_html(`<span class="w-4 h-4 flex items-center justify-center"><!></span>`);
 var root_11$2 = /* @__PURE__ */ from_html(`<span class="w-4 h-4 flex items-center justify-center"><!></span>`);
 var root_2$f = /* @__PURE__ */ from_html(`<div class="absolute inset-0 m-0"><div class="w-full h-full px-0 md:px-[82px] lg:px-[128px] pt-14 pb-[72px] relative lg:py-24 flex flex-col items-center justify-center"><div aria-live="polite" aria-atomic="true" class="sr-only"><!> <!></div> <div class="w-full h-full flex flex-col md:flex-row md:justify-center items-center justify-between"><div class="md:hidden"></div> <!> <!> <div><div class="flex-shrink-0 flex items-center justify-between py-1 px-2 md:px-4 border-border-minimal border rounded-t-md lg:rounded-t-lg md:gap-4 h-8.5 md:h-fit"><!> <!> <!></div> <div class="rounded-b-md"><img class="mx-auto block rounded-b-md lg:rounded-b-lg object-contain max-w-full max-h-[calc(100vh-168px-34px)] md:max-h-[calc(100vh-128px-54px)] lg:max-h-[calc(100vh-192px-54px)] pointer-events-none"/></div></div> <div class="md:hidden flex justify-center items-center gap-1 flex-shrink-0 h-6 mt-4"><!> <!></div></div></div></div>`);
@@ -7256,7 +7273,7 @@ function MCQImageModal($$anchor, $$props) {
             dataTestId: "img-viewer-next",
             onclick: navigateNext,
             children: ($$anchor4, $$slotProps2) => {
-              var span_1 = root_5$8();
+              var span_1 = root_5$a();
               var node_6 = child(span_1);
               SvgLoader(node_6, {
                 svgName: "smallChevronRight",
@@ -7284,11 +7301,11 @@ function MCQImageModal($$anchor, $$props) {
                 return get$1(fullAnswerText);
               },
               children: ($$anchor4, $$slotProps2) => {
-                var div_6 = root_6$5();
+                var div_6 = root_6$4();
                 var node_8 = child(div_6);
                 {
                   var consequent_1 = ($$anchor5) => {
-                    var span_2 = root_7$5();
+                    var span_2 = root_7$7();
                     var node_9 = child(span_2);
                     {
                       let $02 = /* @__PURE__ */ user_derived(() => get$1(currentOption)?.answer);
@@ -7615,9 +7632,9 @@ function InteractionSection($$anchor, $$props) {
   return pop($$exports);
 }
 create_custom_element(InteractionSection, { children: {} }, [], [], true);
-var root_5$7 = /* @__PURE__ */ from_html(`<div></div>`);
+var root_5$9 = /* @__PURE__ */ from_html(`<div></div>`);
 var root_4$7 = /* @__PURE__ */ from_html(`<div class="px-4 w-full max-w-[1008px] mx-auto flex-shrink-0 text-center font-semibold text-sm md:text-lg leading-[150%] text-white" aria-hidden="true" data-testid="img-viewer-cap-txt"> </div> <!>`, 1);
-var root_7$4 = /* @__PURE__ */ from_html(`<div></div>`);
+var root_7$6 = /* @__PURE__ */ from_html(`<div></div>`);
 var root_2$e = /* @__PURE__ */ from_html(`<div class="absolute inset-0"><div class="w-full h-full flex items-center justify-center pt-14 pb-[72px] lg:py-24"><div aria-live="polite" aria-atomic="true" class="sr-only"> </div> <div class="flex flex-col items-center overflow-y-auto overflow-x-hidden w-full px-0 md:px-6 lg:px-16"><div class="relative bg-white rounded-md md:rounded-lg shadow-sm overflow-hidden flex-shrink-0"><img class="block object-contain w-full h-auto max-w-full mx-auto"/> <!></div> <!></div></div></div>`);
 function PromptStimulusImageModal($$anchor, $$props) {
   push($$props, true);
@@ -7789,7 +7806,7 @@ function PromptStimulusImageModal($$anchor, $$props) {
               var node_3 = sibling(div_5, 2);
               {
                 var consequent = ($$anchor5) => {
-                  var div_6 = root_5$7();
+                  var div_6 = root_5$9();
                   template_effect(() => set_style(div_6, `height:${get$1(bottomSpacerHeight) ?? ""}px`));
                   append($$anchor5, div_6);
                 };
@@ -7808,7 +7825,7 @@ function PromptStimulusImageModal($$anchor, $$props) {
               var node_4 = first_child(fragment_4);
               {
                 var consequent_2 = ($$anchor5) => {
-                  var div_7 = root_7$4();
+                  var div_7 = root_7$6();
                   template_effect(() => set_style(div_7, `height:${get$1(bottomSpacerHeight) ?? ""}px`));
                   append($$anchor5, div_7);
                 };
@@ -8272,7 +8289,7 @@ const shouldRenderSection = (section) => section.condition !== false;
 const getClassString = (classes = []) => classes.join(" ");
 const getStyleString = (styles = {}) => Object.entries(styles).map(([k, v]) => `${k}:${v}`).join(";");
 var root_4$6 = /* @__PURE__ */ from_html(`<p class="text-lg leading-[22px] text-blue-1000 font-semibold mt-4" data-testid="img-cap-txt"> </p>`);
-var root_5$6 = /* @__PURE__ */ from_html(`<div class="mt-6 w-full"><button class="flex items-center font-semibold leading-[1.5] outline-none group w-fit h-11 text-charcoal" aria-controls="long-description-content" aria-labelledby="image-description-label" type="button"><div class="w-6 h-6 flex items-center justify-center mr-2" data-testid="img-desc-txt"><!></div> <div id="image-description-label" class="image-description-accordion group-[.active]:border-b-2">Image Description</div></button> <div id="long-description-content" data-testid="img-desc-txt"><!></div></div>`);
+var root_5$8 = /* @__PURE__ */ from_html(`<div class="mt-6 w-full"><button class="flex items-center font-semibold leading-[1.5] outline-none group w-fit h-11 text-charcoal" aria-controls="long-description-content" aria-labelledby="image-description-label" type="button"><div class="w-6 h-6 flex items-center justify-center mr-2" data-testid="img-desc-txt"><!></div> <div id="image-description-label" class="image-description-accordion group-[.active]:border-b-2">Image Description</div></button> <div id="long-description-content" data-testid="img-desc-txt"><!></div></div>`);
 var root_2$d = /* @__PURE__ */ from_html(`<div class="flex flex-col justify-center items-center text-center"><div class="flex flex-col items-center"><div class="relative inline-block"><img/> <!></div> <!></div></div> <!>`, 1);
 var root_1$j = /* @__PURE__ */ from_html(`<div class="w-full"><!></div>`);
 function CommonMedia($$anchor, $$props) {
@@ -8405,7 +8422,7 @@ function CommonMedia($$anchor, $$props) {
           var node_4 = sibling(div_1, 2);
           {
             var consequent_1 = ($$anchor4) => {
-              var div_4 = root_5$6();
+              var div_4 = root_5$8();
               var button = child(div_4);
               button.__click = toggleLongDescription;
               button.__keydown = handleKeyDown;
@@ -8494,11 +8511,11 @@ create_custom_element(
   true
 );
 var root_4$5 = /* @__PURE__ */ from_html(`<div data-testid="stimulus-txt-ctr"><!></div>`);
-var root_5$5 = /* @__PURE__ */ from_html(`<div data-testid="stimulus-img-ctr"><!></div>`);
+var root_5$7 = /* @__PURE__ */ from_html(`<div data-testid="stimulus-img-ctr"><!></div>`);
 var root_3$b = /* @__PURE__ */ from_html(`<!> <!>`, 1);
-var root_7$3 = /* @__PURE__ */ from_html(`<div data-testid="stimulus-img-ctr"><!></div>`);
-var root_8$7 = /* @__PURE__ */ from_html(`<div data-testid="stimulus-txt-ctr"><!></div>`);
-var root_6$4 = /* @__PURE__ */ from_html(`<!> <!>`, 1);
+var root_7$5 = /* @__PURE__ */ from_html(`<div data-testid="stimulus-img-ctr"><!></div>`);
+var root_8$6 = /* @__PURE__ */ from_html(`<div data-testid="stimulus-txt-ctr"><!></div>`);
+var root_6$3 = /* @__PURE__ */ from_html(`<!> <!>`, 1);
 var root_1$i = /* @__PURE__ */ from_html(`<div class="stimulus-section flex flex-col w-full"><!> <div><!></div></div>`);
 function StimulusSection($$anchor, $$props) {
   push($$props, true);
@@ -8612,7 +8629,7 @@ function StimulusSection($$anchor, $$props) {
           var node_5 = sibling(node_3, 2);
           {
             var consequent_2 = ($$anchor4) => {
-              var div_3 = root_5$5();
+              var div_3 = root_5$7();
               let classes_2;
               var node_6 = child(div_3);
               CommonMedia(node_6, {
@@ -8647,11 +8664,11 @@ function StimulusSection($$anchor, $$props) {
           append($$anchor3, fragment_2);
         };
         var alternate = ($$anchor3) => {
-          var fragment_3 = root_6$4();
+          var fragment_3 = root_6$3();
           var node_7 = first_child(fragment_3);
           {
             var consequent_4 = ($$anchor4) => {
-              var div_4 = root_7$3();
+              var div_4 = root_7$5();
               let classes_3;
               var node_8 = child(div_4);
               CommonMedia(node_8, {
@@ -8686,7 +8703,7 @@ function StimulusSection($$anchor, $$props) {
           var node_9 = sibling(node_7, 2);
           {
             var consequent_5 = ($$anchor4) => {
-              var div_5 = root_8$7();
+              var div_5 = root_8$6();
               var node_10 = child(div_5);
               CommonStringToHtml(node_10, {
                 get htmlString() {
@@ -8735,7 +8752,7 @@ create_custom_element(
   [],
   true
 );
-var root_8$6 = /* @__PURE__ */ from_html(`<div class="divider my-6"></div>`);
+var root_8$5 = /* @__PURE__ */ from_html(`<div class="divider my-6"></div>`);
 var root_13$3 = /* @__PURE__ */ from_html(`<div class="divider my-6"></div>`);
 var root_15$1 = /* @__PURE__ */ from_html(`<div aria-live="polite"><!></div>`);
 var root_1$h = /* @__PURE__ */ from_html(`<div><!></div>`);
@@ -8914,7 +8931,7 @@ function PromptContainer($$anchor, $$props) {
                 var node_3 = first_child(fragment_6);
                 {
                   var consequent_3 = ($$anchor6) => {
-                    var div_4 = root_8$6();
+                    var div_4 = root_8$5();
                     append($$anchor6, div_4);
                   };
                   var alternate_2 = ($$anchor6) => {
@@ -9127,10 +9144,10 @@ var root_1$g = /* @__PURE__ */ from_html(`<div class="sr-only" tabindex="-1"><!>
 var root_2$c = /* @__PURE__ */ from_html(`<span> </span>`);
 var root_3$a = /* @__PURE__ */ from_html(`<span>Missing answer</span>`);
 var root_4$4 = /* @__PURE__ */ from_html(`<span class="sr-only"> </span>`);
-var root_5$4 = /* @__PURE__ */ from_html(`<span class="sr-only"> </span>`);
-var root_6$3 = /* @__PURE__ */ from_html(`<p>Missing answer</p>`);
-var root_7$2 = /* @__PURE__ */ from_html(`<p class="text-red-400 text-sm font-semibold leading-[1.3] pr-2.5 hidden md:block"> </p>`);
-var root_8$5 = /* @__PURE__ */ from_html(`<span aria-hidden="true"><!></span>`);
+var root_5$6 = /* @__PURE__ */ from_html(`<span class="sr-only"> </span>`);
+var root_6$2 = /* @__PURE__ */ from_html(`<p>Missing answer</p>`);
+var root_7$4 = /* @__PURE__ */ from_html(`<p class="text-red-400 text-sm font-semibold leading-[1.3] pr-2.5 hidden md:block"> </p>`);
+var root_8$4 = /* @__PURE__ */ from_html(`<span aria-hidden="true"><!></span>`);
 var root_12$3 = /* @__PURE__ */ from_html(`<span class="w-3 h-2 flex items-center justify-center"><!></span>`);
 var root_11$1 = /* @__PURE__ */ from_html(`<span><!></span>`);
 var root_13$2 = /* @__PURE__ */ from_html(`<div class="w-full overflow-hidden bg-white rounded-b-lg flex items-center justify-center relative"><img class="mcq-opt-img min-h-[154px] max-h-[184px] w-auto max-w-full object-contain pointer-events-none" data-testid="mcq-opt-img" loading="lazy"/></div>`);
@@ -9322,7 +9339,7 @@ function MCQOption($$anchor, $$props) {
   var node_6 = sibling(node_5, 2);
   {
     var consequent_4 = ($$anchor2) => {
-      var span_8 = root_5$4();
+      var span_8 = root_5$6();
       var text_3 = child(span_8, true);
       reset(span_8);
       template_effect(() => set_text(text_3, get$1(labelSuffix)));
@@ -9338,7 +9355,7 @@ function MCQOption($$anchor, $$props) {
   var node_7 = child(span_9);
   {
     var consequent_5 = ($$anchor2) => {
-      var p = root_6$3();
+      var p = root_6$2();
       template_effect(() => set_class(p, 1, `text-green-750 text-sm font-semibold leading-[1.3] hidden md:block
               ${get$1(totalCorrectAnswers) > 1 ? "pr-2.5" : ""}`));
       append($$anchor2, p);
@@ -9350,7 +9367,7 @@ function MCQOption($$anchor, $$props) {
   var node_8 = sibling(node_7, 2);
   {
     var consequent_6 = ($$anchor2) => {
-      var p_1 = root_7$2();
+      var p_1 = root_7$4();
       var text_4 = child(p_1, true);
       reset(p_1);
       template_effect(() => set_text(text_4, get$1(isInteractiveMode2) ? "Your answer" : get$1(isPreviewMode2) ? "" : "Student's answer"));
@@ -9363,7 +9380,7 @@ function MCQOption($$anchor, $$props) {
   var node_9 = sibling(node_8, 2);
   {
     var consequent_8 = ($$anchor2) => {
-      var span_10 = root_8$5();
+      var span_10 = root_8$4();
       var node_10 = child(span_10);
       {
         var consequent_7 = ($$anchor3) => {
@@ -10407,7 +10424,7 @@ create_custom_element(
 var root_1$d = /* @__PURE__ */ from_html(`<p class="p2 text-red-400 mb-3">Student's answer</p>`);
 var root_3$8 = /* @__PURE__ */ from_html(`<span class="w-8 h-8 absolute right-2 top-2.5 flex items-center justify-center" aria-hidden="true"><!></span>`);
 var root_2$9 = /* @__PURE__ */ from_html(`<div class="relative"><textarea autocomplete="off" rows="3"></textarea> <!></div>`);
-var root_5$3 = /* @__PURE__ */ from_html(`<span class="w-8 h-8 absolute right-2 top-2.5 flex items-center justify-center" aria-hidden="true"><!></span>`);
+var root_5$5 = /* @__PURE__ */ from_html(`<span class="w-8 h-8 absolute right-2 top-2.5 flex items-center justify-center" aria-hidden="true"><!></span>`);
 var root_4$2 = /* @__PURE__ */ from_html(`<div class="relative"><input autocomplete="off"/> <!></div>`);
 var root$b = /* @__PURE__ */ from_html(`<div class="relative"><!> <!></div>`);
 function TypeInTextField($$anchor, $$props) {
@@ -10611,7 +10628,7 @@ function TypeInTextField($$anchor, $$props) {
       var node_4 = sibling(input, 2);
       {
         var consequent_3 = ($$anchor3) => {
-          var span_1 = root_5$3();
+          var span_1 = root_5$5();
           var node_5 = child(span_1);
           {
             let $0 = /* @__PURE__ */ user_derived(() => isSkipped() ? false : Boolean(isCorrect()));
@@ -10747,8 +10764,8 @@ action.destroy = n.destroy;
 var root_1$c = /* @__PURE__ */ from_html(`<label data-testid="qn-number-txt" aria-hidden="true"><span></span> <span> </span></label>`);
 var root_2$8 = /* @__PURE__ */ from_html(`<div role="textbox" aria-readonly="true"><!></div>`);
 var root_4$1 = /* @__PURE__ */ from_html(`<div role="textbox" aria-readonly="true" data-testid="ans-sum-corr-txb"><!></div>`);
-var root_5$2 = /* @__PURE__ */ from_html(`<textarea rows="1" readonly=""></textarea>`);
-var root_6$2 = /* @__PURE__ */ from_html(`<span class="w-6 h-6 absolute right-4 top-[calc(50%+0.375rem)] -translate-y-1/2 flex items-center justify-center"><!></span>`);
+var root_5$4 = /* @__PURE__ */ from_html(`<textarea rows="1" readonly=""></textarea>`);
+var root_6$1 = /* @__PURE__ */ from_html(`<span class="w-6 h-6 absolute right-4 top-[calc(50%+0.375rem)] -translate-y-1/2 flex items-center justify-center"><!></span>`);
 var root$a = /* @__PURE__ */ from_html(`<div><!> <!> <!></div>`);
 function AnswerDisplay($$anchor, $$props) {
   push($$props, true);
@@ -10951,7 +10968,7 @@ function AnswerDisplay($$anchor, $$props) {
           append($$anchor3, div_2);
         };
         var alternate = ($$anchor3) => {
-          var textarea = root_5$2();
+          var textarea = root_5$4();
           remove_textarea_child(textarea);
           action$1(textarea, ($$node) => action?.($$node));
           template_effect(() => {
@@ -10983,7 +11000,7 @@ function AnswerDisplay($$anchor, $$props) {
   var node_5 = sibling(node_1, 2);
   {
     var consequent_3 = ($$anchor2) => {
-      var span_2 = root_6$2();
+      var span_2 = root_6$1();
       var node_6 = child(span_2);
       {
         let $0 = /* @__PURE__ */ user_derived(() => isCorrect() ? "text-green-900" : "text-red-900");
@@ -11451,7 +11468,7 @@ create_custom_element(
   true
 );
 var root_3$7 = /* @__PURE__ */ from_html(`<p></p>`);
-var root_8$4 = /* @__PURE__ */ from_html(`<div class="absolute inset-0 bg-transparent z-50"></div>`);
+var root_8$3 = /* @__PURE__ */ from_html(`<div class="absolute inset-0 bg-transparent z-50"></div>`);
 var root_2$6 = /* @__PURE__ */ from_html(`<div class="inline-typein-container mt-6 relative"><!> <div class="divider my-6"></div> <!></div>`);
 var root_10$2 = /* @__PURE__ */ from_html(`<div class="mb-4"><!></div>`);
 var root_13$1 = /* @__PURE__ */ from_html(`<div role="textbox" tabindex="0" aria-readonly="true" aria-labelledby="missing-answer-label" class="typein-textbox typein-textbox-missing border-2 border-green-700 py-[9px] px-4"><!></div>`);
@@ -11765,7 +11782,7 @@ function TypeInComponent($$anchor, $$props) {
           var node_5 = sibling(node_1, 4);
           {
             var consequent_2 = ($$anchor4) => {
-              var div_1 = root_8$4();
+              var div_1 = root_8$3();
               append($$anchor4, div_1);
             };
             if_block(node_5, ($$render) => {
@@ -14466,11 +14483,12 @@ function isInt(value) {
   })(parseFloat(value));
 }
 var root_1$9 = /* @__PURE__ */ from_html(`<span class="sr-only"> </span>`);
-var root_2$5 = /* @__PURE__ */ from_html(`<span class="text-green-800 preview-icon"><!></span>`);
-var root_4 = /* @__PURE__ */ from_html(`<span class="text-red-800 preview-icon"><!></span>`);
-var root_6$1 = /* @__PURE__ */ from_html(`<span class="text-green-800"><!></span>`);
-var root_8$3 = /* @__PURE__ */ from_html(`<span class="preview-vertical hidden"><!></span>`);
-var root$7 = /* @__PURE__ */ from_html(`<button data-item-button=""><span class="sr-only"> </span> <span><!></span> <!> <div aria-hidden="true"><span></span> <span class="absolute"><!> <!></span></div></button>`);
+var root_2$5 = /* @__PURE__ */ from_html(`<span class="sr-only"> </span>`);
+var root_3$6 = /* @__PURE__ */ from_html(`<span class="text-green-800 preview-icon"><!></span>`);
+var root_5$3 = /* @__PURE__ */ from_html(`<span class="text-red-800 preview-icon"><!></span>`);
+var root_7$3 = /* @__PURE__ */ from_html(`<span class="text-green-800"><!></span>`);
+var root_9$2 = /* @__PURE__ */ from_html(`<span class="preview-vertical hidden"><!></span>`);
+var root$7 = /* @__PURE__ */ from_html(`<button data-item-button=""><!> <span><!></span> <!> <div><span></span> <span class="absolute"><!> <!></span></div></button>`);
 function CategoriseItem($$anchor, $$props) {
   push($$props, true);
   let itemId = prop($$props, "itemId", 7), itemText = prop($$props, "itemText", 7), containerId = prop($$props, "containerId", 7), mode = prop($$props, "mode", 7), selectedItemId = prop($$props, "selectedItemId", 7, void 0), isLocked = prop($$props, "isLocked", 7, false), isCollapsed = prop($$props, "isCollapsed", 7, false), resultType = prop($$props, "resultType", 7, ""), isCurrentMobileItem = prop($$props, "isCurrentMobileItem", 7, true), isClonedItem = prop($$props, "isClonedItem", 7, false), isConsideredItem = prop($$props, "isConsideredItem", 7, false), activeContainerForKeyboard = prop($$props, "activeContainerForKeyboard", 7, void 0), onclick = prop($$props, "onclick", 7), onfocus = prop($$props, "onfocus", 7), onblur = prop($$props, "onblur", 7), onkeydown = prop($$props, "onkeydown", 7);
@@ -14483,7 +14501,7 @@ function CategoriseItem($$anchor, $$props) {
   const isSelected = /* @__PURE__ */ user_derived(() => selectedItemId() === get$1(cleanItemId));
   const hasAnyItemSelected = /* @__PURE__ */ user_derived(() => !!selectedItemId());
   const canInteract = /* @__PURE__ */ user_derived(() => !isLocked() && (!resultType() || mode() === MODES.INTERACTIVE));
-  const ariaPrefix = /* @__PURE__ */ user_derived(() => () => {
+  const ariaPrefix = /* @__PURE__ */ user_derived(() => {
     if (resultType() === ANSWER_RESULTS.INCORRECT && isWordBin && !get$1(isSelected)) {
       return "Skipped answer:";
     }
@@ -14495,12 +14513,15 @@ function CategoriseItem($$anchor, $$props) {
     }
     return `${get$1(isSelected) ? "Selected option" : "Option"}:`;
   });
-  const ariaSuffix = /* @__PURE__ */ user_derived(() => () => {
+  const ariaSuffix = /* @__PURE__ */ user_derived(() => {
     if ((resultType() === ANSWER_RESULTS.CORRECT || resultType() === ANSWER_RESULTS.INCORRECT) && !get$1(isSelected)) {
       return `(${resultType()})`;
     }
     return "";
   });
+  const itemHasMath = /* @__PURE__ */ user_derived(() => hasMathJax(itemText()));
+  const cleanItemText = /* @__PURE__ */ user_derived(() => useRemoveRichTextHtmlTags(itemText()));
+  const itemAriaLabel = /* @__PURE__ */ user_derived(() => !get$1(itemHasMath) ? [get$1(ariaPrefix), get$1(cleanItemText), get$1(ariaSuffix)].filter(Boolean).join(" ") : void 0);
   const handleFocus = (event2) => {
     set(lastFocusTime, Date.now(), true);
     if (onfocus()) {
@@ -14567,7 +14588,7 @@ function CategoriseItem($$anchor, $$props) {
       }
     }
   };
-  const itemTabIndex = /* @__PURE__ */ user_derived(() => () => {
+  const itemTabIndex = /* @__PURE__ */ user_derived(() => {
     if (get$1(isSelected)) return 0;
     if (isCollapsed()) return -1;
     if (get$1(hasAnyItemSelected)) return -1;
@@ -14575,7 +14596,7 @@ function CategoriseItem($$anchor, $$props) {
     if (isWordBin && isCurrentMobileItem()) return 0;
     return -1;
   });
-  const buttonClasses = /* @__PURE__ */ user_derived(() => () => {
+  const buttonClasses = /* @__PURE__ */ user_derived(() => {
     const classes = [
       "focus-ring",
       "flex",
@@ -14620,24 +14641,24 @@ function CategoriseItem($$anchor, $$props) {
     }
     return classes.join(" ");
   });
-  const textClasses = /* @__PURE__ */ user_derived(() => () => {
+  const textClasses = /* @__PURE__ */ user_derived(() => {
     return `text-charcoal text-base pl-3 mr-4 ${get$1(isSelected) ? "text-white" : ""}`;
   });
-  const iconContainerClasses = /* @__PURE__ */ user_derived(() => () => {
+  const iconContainerClasses = /* @__PURE__ */ user_derived(() => {
     const base = "group text-blue-1000 h-11 w-11 min-w-[44px] flex items-center justify-center btn-vertical-icon";
     if (!get$1(hasAnyItemSelected) && get$1(canInteract) && !get$1(isSelected)) {
       return `${base} td:hover:cursor-grab td:hover:text-soft-blue`;
     }
     return base;
   });
-  const iconBgClasses = /* @__PURE__ */ user_derived(() => () => {
+  const iconBgClasses = /* @__PURE__ */ user_derived(() => {
     const base = "w-full h-full relative rounded-lg";
     if (!get$1(hasAnyItemSelected) && get$1(canInteract) && !get$1(isSelected)) {
       return `${base} td:group-hover:bg-black td:group-hover:opacity-5`;
     }
     return base;
   });
-  const getItemTestId = /* @__PURE__ */ user_derived(() => () => {
+  const getItemTestId = /* @__PURE__ */ user_derived(() => {
     if (mode() === MODES.SESSION || mode() === MODES.INTERACTIVE) {
       if (resultType() === ANSWER_RESULTS.INCORRECT && isWordBin && !get$1(isSelected)) {
         return "cat-skip-ans-btn";
@@ -14773,40 +14794,56 @@ function CategoriseItem($$anchor, $$props) {
   button.__touchmove = handleTouchMove;
   button.__touchend = handleTouchEnd;
   button.__keydown = handleKeyDown;
-  var span = child(button);
-  var text2 = child(span, true);
-  reset(span);
-  var span_1 = sibling(span, 2);
-  var node = child(span_1);
-  CommonStringToHtml(node, {
-    get htmlString() {
-      return itemText();
-    },
-    otherClass: "inline-block w-full"
-  });
-  reset(span_1);
-  var node_1 = sibling(span_1, 2);
+  var node = child(button);
   {
     var consequent = ($$anchor2) => {
-      var span_2 = root_1$9();
+      var span = root_1$9();
+      var text2 = child(span, true);
+      reset(span);
+      template_effect(() => set_text(text2, get$1(ariaPrefix)));
+      append($$anchor2, span);
+    };
+    if_block(node, ($$render) => {
+      if (get$1(itemHasMath)) $$render(consequent);
+    });
+  }
+  var span_1 = sibling(node, 2);
+  var node_1 = child(span_1);
+  {
+    let $0 = /* @__PURE__ */ user_derived(() => !get$1(itemHasMath));
+    CommonStringToHtml(node_1, {
+      get htmlString() {
+        return itemText();
+      },
+      otherClass: "inline-block w-full",
+      get ariaHidden() {
+        return get$1($0);
+      }
+    });
+  }
+  reset(span_1);
+  var node_2 = sibling(span_1, 2);
+  {
+    var consequent_1 = ($$anchor2) => {
+      var span_2 = root_2$5();
       var text_1 = child(span_2, true);
       reset(span_2);
-      template_effect(($0) => set_text(text_1, $0), [() => get$1(ariaSuffix)()]);
+      template_effect(() => set_text(text_1, get$1(ariaSuffix)));
       append($$anchor2, span_2);
     };
-    if_block(node_1, ($$render) => {
-      if (get$1(ariaSuffix)()) $$render(consequent);
+    if_block(node_2, ($$render) => {
+      if (get$1(itemHasMath) && get$1(ariaSuffix)) $$render(consequent_1);
     });
   }
-  var div = sibling(node_1, 2);
+  var div = sibling(node_2, 2);
   var span_3 = child(div);
   var span_4 = sibling(span_3, 2);
-  var node_2 = child(span_4);
+  var node_3 = child(span_4);
   {
-    var consequent_1 = ($$anchor2) => {
-      var span_5 = root_2$5();
-      var node_3 = child(span_5);
-      SvgLoader(node_3, {
+    var consequent_2 = ($$anchor2) => {
+      var span_5 = root_3$6();
+      var node_4 = child(span_5);
+      SvgLoader(node_4, {
         svgName: "successSolid",
         className: "correct-icon",
         dataTestId: "icon-correct"
@@ -14816,12 +14853,12 @@ function CategoriseItem($$anchor, $$props) {
     };
     var alternate_2 = ($$anchor2) => {
       var fragment = comment();
-      var node_4 = first_child(fragment);
+      var node_5 = first_child(fragment);
       {
-        var consequent_2 = ($$anchor3) => {
-          var span_6 = root_4();
-          var node_5 = child(span_6);
-          SvgLoader(node_5, {
+        var consequent_3 = ($$anchor3) => {
+          var span_6 = root_5$3();
+          var node_6 = child(span_6);
+          SvgLoader(node_6, {
             svgName: "errorSolid",
             className: "incorrect-icon",
             dataTestId: "icon-incorrect"
@@ -14831,12 +14868,12 @@ function CategoriseItem($$anchor, $$props) {
         };
         var alternate_1 = ($$anchor3) => {
           var fragment_1 = comment();
-          var node_6 = first_child(fragment_1);
+          var node_7 = first_child(fragment_1);
           {
-            var consequent_3 = ($$anchor4) => {
-              var span_7 = root_6$1();
-              var node_7 = child(span_7);
-              SvgLoader(node_7, {
+            var consequent_4 = ($$anchor4) => {
+              var span_7 = root_7$3();
+              var node_8 = child(span_7);
+              SvgLoader(node_8, {
                 svgName: "success",
                 className: "missing-correct-icon",
                 dataTestId: "icon-miss-corr"
@@ -14852,9 +14889,9 @@ function CategoriseItem($$anchor, $$props) {
               });
             };
             if_block(
-              node_6,
+              node_7,
               ($$render) => {
-                if (resultType() === ANSWER_RESULTS.MISSED) $$render(consequent_3);
+                if (resultType() === ANSWER_RESULTS.MISSED) $$render(consequent_4);
                 else $$render(alternate, false);
               },
               true
@@ -14863,9 +14900,9 @@ function CategoriseItem($$anchor, $$props) {
           append($$anchor3, fragment_1);
         };
         if_block(
-          node_4,
+          node_5,
           ($$render) => {
-            if (resultType() === ANSWER_RESULTS.INCORRECT && !get$1(isSelected)) $$render(consequent_2);
+            if (resultType() === ANSWER_RESULTS.INCORRECT && !get$1(isSelected)) $$render(consequent_3);
             else $$render(alternate_1, false);
           },
           true
@@ -14873,17 +14910,17 @@ function CategoriseItem($$anchor, $$props) {
       }
       append($$anchor2, fragment);
     };
-    if_block(node_2, ($$render) => {
-      if (resultType() === ANSWER_RESULTS.CORRECT && !get$1(isSelected)) $$render(consequent_1);
+    if_block(node_3, ($$render) => {
+      if (resultType() === ANSWER_RESULTS.CORRECT && !get$1(isSelected)) $$render(consequent_2);
       else $$render(alternate_2, false);
     });
   }
-  var node_8 = sibling(node_2, 2);
+  var node_9 = sibling(node_3, 2);
   {
-    var consequent_4 = ($$anchor2) => {
-      var span_8 = root_8$3();
-      var node_9 = child(span_8);
-      SvgLoader(node_9, {
+    var consequent_5 = ($$anchor2) => {
+      var span_8 = root_9$2();
+      var node_10 = child(span_8);
+      SvgLoader(node_10, {
         svgName: "gripVertical",
         className: "grip-icon",
         dataTestId: "icon-grip"
@@ -14891,35 +14928,24 @@ function CategoriseItem($$anchor, $$props) {
       reset(span_8);
       append($$anchor2, span_8);
     };
-    if_block(node_8, ($$render) => {
-      if (resultType() === ANSWER_RESULTS.CORRECT || resultType() === ANSWER_RESULTS.INCORRECT) $$render(consequent_4);
+    if_block(node_9, ($$render) => {
+      if (resultType() === ANSWER_RESULTS.CORRECT || resultType() === ANSWER_RESULTS.INCORRECT) $$render(consequent_5);
     });
   }
   reset(span_4);
   reset(div);
   reset(button);
-  template_effect(
-    ($0, $1, $2, $3, $4, $5, $6) => {
-      set_attribute(button, "id", itemId());
-      set_class(button, 1, $0);
-      set_attribute(button, "data-testid", $1);
-      set_attribute(button, "tabindex", $2);
-      button.disabled = isLocked() && !resultType();
-      set_text(text2, $3);
-      set_class(span_1, 1, $4);
-      set_class(div, 1, $5);
-      set_class(span_3, 1, $6);
-    },
-    [
-      () => clsx(get$1(buttonClasses)()),
-      () => get$1(getItemTestId)(),
-      () => get$1(itemTabIndex)(),
-      () => get$1(ariaPrefix)(),
-      () => clsx(get$1(textClasses)()),
-      () => clsx(get$1(iconContainerClasses)()),
-      () => clsx(get$1(iconBgClasses)())
-    ]
-  );
+  template_effect(() => {
+    set_attribute(button, "id", itemId());
+    set_class(button, 1, clsx(get$1(buttonClasses)));
+    set_attribute(button, "data-testid", get$1(getItemTestId));
+    set_attribute(button, "tabindex", get$1(itemTabIndex));
+    button.disabled = isLocked() && !resultType();
+    set_attribute(button, "aria-label", get$1(itemAriaLabel));
+    set_class(span_1, 1, clsx(get$1(textClasses)));
+    set_class(div, 1, clsx(get$1(iconContainerClasses)));
+    set_class(span_3, 1, clsx(get$1(iconBgClasses)));
+  });
   event("focus", button, handleFocus);
   event("blur", button, handleBlur);
   append($$anchor, button);
@@ -14951,14 +14977,13 @@ create_custom_element(
   true
 );
 var root_2$4 = /* @__PURE__ */ from_html(`<span class="sr-only"> </span> <!>`, 1);
-var root_3$6 = /* @__PURE__ */ from_html(`<span class="sr-only"> </span>`);
 var root_1$8 = /* @__PURE__ */ from_html(`<button tabindex="0"><!></button>`);
-var root_9$2 = /* @__PURE__ */ from_html(`<div class="w-full text-base text-charcoal font-semibold mt-1 mb-2">Missing answers:</div>`);
-var root_8$2 = /* @__PURE__ */ from_html(`<!> <!>`, 1);
+var root_8$2 = /* @__PURE__ */ from_html(`<div class="w-full text-base text-charcoal font-semibold mt-1 mb-2">Missing answers:</div>`);
+var root_7$2 = /* @__PURE__ */ from_html(`<!> <!>`, 1);
 var root$6 = /* @__PURE__ */ from_html(`<!>   <section><!></section>`, 1);
 function CategoriseDndContainer($$anchor, $$props) {
   push($$props, true);
-  let containerId = prop($$props, "containerId", 7), containerLabel = prop($$props, "containerLabel", 7, ""), containerLabelHtml = prop($$props, "containerLabelHtml", 7, ""), containerIndex = prop($$props, "containerIndex", 7, 0), containerClass = prop($$props, "containerClass", 7, ""), showButton = prop($$props, "showButton", 7, true), items = prop($$props, "items", 23, () => []), selectedItemId = prop($$props, "selectedItemId", 7, void 0), isLocked = prop($$props, "isLocked", 7, false), isMobile = prop($$props, "isMobile", 7, false), mode = prop($$props, "mode", 7), paddingTop = prop($$props, "paddingTop", 7, 0), dndType = prop($$props, "dndType", 7, "categorise"), activeContainerForKeyboard = prop($$props, "activeContainerForKeyboard", 7, void 0), isCollapsed = prop($$props, "isCollapsed", 7, false), onitemdrop = prop($$props, "onitemdrop", 7), onitemselect = prop($$props, "onitemselect", 7), oncontainerclick = prop($$props, "oncontainerclick", 7), onitemfocus = prop($$props, "onitemfocus", 7), onitemblur = prop($$props, "onitemblur", 7), onitemkeydown = prop($$props, "onitemkeydown", 7), ondraghover = prop($$props, "ondraghover", 7), ondragstart = prop($$props, "ondragstart", 7), children = prop($$props, "children", 7);
+  let containerId = prop($$props, "containerId", 7), containerLabel = prop($$props, "containerLabel", 7, ""), containerLabelHtml = prop($$props, "containerLabelHtml", 7, ""), containerHasMath = prop($$props, "containerHasMath", 7, false), containerIndex = prop($$props, "containerIndex", 7, 0), containerClass = prop($$props, "containerClass", 7, ""), showButton = prop($$props, "showButton", 7, true), items = prop($$props, "items", 23, () => []), selectedItemId = prop($$props, "selectedItemId", 7, void 0), isLocked = prop($$props, "isLocked", 7, false), isMobile = prop($$props, "isMobile", 7, false), mode = prop($$props, "mode", 7), paddingTop = prop($$props, "paddingTop", 7, 0), dndType = prop($$props, "dndType", 7, "categorise"), activeContainerForKeyboard = prop($$props, "activeContainerForKeyboard", 7, void 0), isCollapsed = prop($$props, "isCollapsed", 7, false), onitemdrop = prop($$props, "onitemdrop", 7), onitemselect = prop($$props, "onitemselect", 7), oncontainerclick = prop($$props, "oncontainerclick", 7), onitemfocus = prop($$props, "onitemfocus", 7), onitemblur = prop($$props, "onitemblur", 7), onitemkeydown = prop($$props, "onitemkeydown", 7), ondraghover = prop($$props, "ondraghover", 7), ondragstart = prop($$props, "ondragstart", 7), children = prop($$props, "children", 7);
   let considerItemId = /* @__PURE__ */ state(void 0);
   let isHoveringDrag = /* @__PURE__ */ state(false);
   let dragCounter = /* @__PURE__ */ state(0);
@@ -15112,6 +15137,13 @@ function CategoriseDndContainer($$anchor, $$props) {
       containerLabelHtml($$value);
       flushSync();
     },
+    get containerHasMath() {
+      return containerHasMath();
+    },
+    set containerHasMath($$value = false) {
+      containerHasMath($$value);
+      flushSync();
+    },
     get containerIndex() {
       return containerIndex();
     },
@@ -15283,20 +15315,15 @@ function CategoriseDndContainer($$anchor, $$props) {
           template_effect(() => set_text(text2, `Category ${containerIndex() ?? ""}:`));
           append($$anchor3, fragment_1);
         };
-        var alternate = ($$anchor3) => {
-          var span_1 = root_3$6();
-          var text_1 = child(span_1, true);
-          reset(span_1);
-          template_effect(() => set_text(text_1, containerLabel()));
-          append($$anchor3, span_1);
-        };
         if_block(node_1, ($$render) => {
-          if (containerLabelHtml()) $$render(consequent);
-          else $$render(alternate, false);
+          if (containerHasMath()) $$render(consequent);
         });
       }
       reset(button);
-      template_effect(() => set_class(button, 1, `focus-ring absolute inset-0 bg-transparent rounded-lg z-10 pointer-events-auto focus-visible:border ${containerId() === "container-word-bin" ? "focus-visible:border-gray-400" : "focus-visible:border-gray-800"}`));
+      template_effect(() => {
+        set_class(button, 1, `focus-ring absolute inset-0 bg-transparent rounded-lg z-10 pointer-events-auto focus-visible:border ${containerId() === "container-word-bin" ? "focus-visible:border-gray-400" : "focus-visible:border-gray-800"}`);
+        set_attribute(button, "aria-label", !containerHasMath() ? containerLabel() : void 0);
+      });
       append($$anchor2, button);
     };
     if_block(node, ($$render) => {
@@ -15327,7 +15354,7 @@ function CategoriseDndContainer($$anchor, $$props) {
       }
       append($$anchor2, fragment_2);
     };
-    var alternate_1 = ($$anchor2) => {
+    var alternate = ($$anchor2) => {
       var fragment_4 = comment();
       var node_6 = first_child(fragment_4);
       {
@@ -15336,11 +15363,11 @@ function CategoriseDndContainer($$anchor, $$props) {
           var node_7 = first_child(fragment_5);
           each(node_7, 19, () => get$1(localItems), (item) => `${item.id}-${get$1(dragCounter)}`, ($$anchor4, item, index2) => {
             const itemResultType = /* @__PURE__ */ user_derived(() => getItemResultType(get$1(item).isClonedItem && get$1(item).cloneId ? get$1(item).cloneId : get$1(item).id));
-            var fragment_6 = root_8$2();
+            var fragment_6 = root_7$2();
             var node_8 = first_child(fragment_6);
             {
               var consequent_4 = ($$anchor5) => {
-                var div = root_9$2();
+                var div = root_8$2();
                 append($$anchor5, div);
               };
               if_block(node_8, ($$render) => {
@@ -15410,7 +15437,7 @@ function CategoriseDndContainer($$anchor, $$props) {
     };
     if_block(node_3, ($$render) => {
       if (get$1(isEmpty)) $$render(consequent_3);
-      else $$render(alternate_1, false);
+      else $$render(alternate, false);
     });
   }
   reset(section);
@@ -15433,6 +15460,7 @@ create_custom_element(
     containerId: {},
     containerLabel: {},
     containerLabelHtml: {},
+    containerHasMath: {},
     containerIndex: {},
     containerClass: {},
     showButton: {},
@@ -15459,10 +15487,12 @@ create_custom_element(
   [],
   true
 );
-var root_2$3 = /* @__PURE__ */ from_svg(`<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-testid="icon-chevron-coll"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>`);
-var root_3$5 = /* @__PURE__ */ from_svg(`<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-testid="icon-chevron-exp"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"></path></svg>`);
-var root_1$7 = /* @__PURE__ */ from_html(`<button type="button" class="focus-ring flex items-center rounded-[32px] p-1.5 text-charcoal text-sm border border-gray-800 bg-gray-50 min-w-[85px] ml-3 whitespace-nowrap active:raw-focus-ring active:bg-black-55"><span class="mx-0.5"> </span> <span class="w-4 h-4 text-inherit flex items-center justify-center"><!></span></button>`);
-var root$5 = /* @__PURE__ */ from_html(`<div role="group" data-testid="cat-ctr"><div><span class="sr-only"> </span> <!> <span class="sr-only"> </span> <!></div> <!></div>`);
+var root_1$7 = /* @__PURE__ */ from_html(`<span class="sr-only"> </span>`);
+var root_2$3 = /* @__PURE__ */ from_html(`<span class="sr-only"> </span>`);
+var root_4 = /* @__PURE__ */ from_svg(`<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-testid="icon-chevron-coll"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>`);
+var root_5$2 = /* @__PURE__ */ from_svg(`<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-testid="icon-chevron-exp"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"></path></svg>`);
+var root_3$5 = /* @__PURE__ */ from_html(`<button type="button" class="focus-ring flex items-center rounded-[32px] p-1.5 text-charcoal text-sm border border-gray-800 bg-gray-50 min-w-[85px] ml-3 whitespace-nowrap active:raw-focus-ring active:bg-black-55"><span class="mx-0.5"> </span> <span class="w-4 h-4 text-inherit flex items-center justify-center"><!></span></button>`);
+var root$5 = /* @__PURE__ */ from_html(`<div role="group" data-testid="cat-ctr"><div><!> <!> <!> <!></div> <!></div>`);
 function CategoriseCategory($$anchor, $$props) {
   push($$props, true);
   let categoryId = prop($$props, "categoryId", 7), categoryTitle = prop($$props, "categoryTitle", 7), categoryIndex = prop($$props, "categoryIndex", 7, 1), items = prop($$props, "items", 23, () => []), selectedItemId = prop($$props, "selectedItemId", 7, void 0), isLocked = prop($$props, "isLocked", 7, false), isCollapsed = prop($$props, "isCollapsed", 7, false), isDraggingOver = prop($$props, "isDraggingOver", 7, false), dropContainerId = prop($$props, "dropContainerId", 7, void 0), hasAddItemAnimation = prop($$props, "hasAddItemAnimation", 7, false), dragSourceContainerId = prop($$props, "dragSourceContainerId", 7, void 0), mode = prop($$props, "mode", 7), isMobile = prop($$props, "isMobile", 7, false), hasStimulus = prop($$props, "hasStimulus", 7, false), dndType = prop($$props, "dndType", 7, "categorise"), tabindex = prop($$props, "tabindex", 7, 0), activeContainerForKeyboard = prop($$props, "activeContainerForKeyboard", 7, void 0), onitemdrop = prop($$props, "onitemdrop", 7), onitemselect = prop($$props, "onitemselect", 7), oncontainerclick = prop($$props, "oncontainerclick", 7), ontogglecollapse = prop($$props, "ontogglecollapse", 7), onitemfocus = prop($$props, "onitemfocus", 7), onitemblur = prop($$props, "onitemblur", 7), onitemkeydown = prop($$props, "onitemkeydown", 7), onkeydown = prop($$props, "onkeydown", 7), ondraghover = prop($$props, "ondraghover", 7), ondragstart = prop($$props, "ondragstart", 7);
@@ -15493,6 +15523,8 @@ function CategoriseCategory($$anchor, $$props) {
     ${get$1(effectiveIsCollapsed) && isDraggingOver() && get$1(isNotSourceContainer) ? "!bg-violet-100 md:!bg-white" : ""}
     ${get$1(effectiveIsCollapsed) && isMobile() ? "rounded-b-lg md:rounded-b-none" : ""}`);
   const adjustedTabindex = /* @__PURE__ */ user_derived(tabindex);
+  const categoryHasMath = /* @__PURE__ */ user_derived(() => hasMathJax(categoryTitle()));
+  const shouldShowAriaLabel = /* @__PURE__ */ user_derived(() => !get$1(categoryHasMath) && (!get$1(hasSelectedItem) || !get$1(isNotSourceContainer)));
   const handleToggle = () => {
     if (isMobile() && ontogglecollapse()) {
       ontogglecollapse()(categoryId());
@@ -15709,23 +15741,46 @@ function CategoriseCategory($$anchor, $$props) {
   };
   div.__click = handleContainerClick;
   var div_1 = child(div);
-  var span = child(div_1);
-  var text2 = child(span);
-  reset(span);
-  var node = sibling(span, 2);
-  CommonStringToHtml(node, {
+  var node = child(div_1);
+  {
+    var consequent = ($$anchor2) => {
+      var span = root_1$7();
+      var text2 = child(span);
+      reset(span);
+      template_effect(() => set_text(text2, `Category ${categoryIndex() ?? ""}:`));
+      append($$anchor2, span);
+    };
+    if_block(node, ($$render) => {
+      if (get$1(categoryHasMath)) $$render(consequent);
+    });
+  }
+  var node_1 = sibling(node, 2);
+  CommonStringToHtml(node_1, {
     get htmlString() {
       return categoryTitle();
     },
-    otherClass: "text-base leading-5 !text-gray-900 md:item-heading"
+    otherClass: "text-base leading-5 !text-gray-900 md:item-heading",
+    get ariaHidden() {
+      return get$1(shouldShowAriaLabel);
+    }
   });
-  var span_1 = sibling(node, 2);
-  var text_1 = child(span_1);
-  reset(span_1);
-  var node_1 = sibling(span_1, 2);
+  var node_2 = sibling(node_1, 2);
   {
     var consequent_1 = ($$anchor2) => {
-      var button = root_1$7();
+      var span_1 = root_2$3();
+      var text_1 = child(span_1);
+      reset(span_1);
+      template_effect(() => set_text(text_1, `. ${get$1(getTotalWords) ?? ""} added.`));
+      append($$anchor2, span_1);
+    };
+    if_block(node_2, ($$render) => {
+      if (get$1(categoryHasMath)) $$render(consequent_1);
+    });
+  }
+  var node_3 = sibling(node_2, 2);
+  {
+    var consequent_3 = ($$anchor2) => {
+      var button = root_3$5();
       button.__click = handleToggle;
       button.__keydown = (e2) => {
         if (e2.key === "Enter" || e2.key === " ") {
@@ -15736,18 +15791,18 @@ function CategoriseCategory($$anchor, $$props) {
       var text_2 = child(span_2, true);
       reset(span_2);
       var span_3 = sibling(span_2, 2);
-      var node_2 = child(span_3);
+      var node_4 = child(span_3);
       {
-        var consequent = ($$anchor3) => {
-          var svg = root_2$3();
+        var consequent_2 = ($$anchor3) => {
+          var svg = root_4();
           append($$anchor3, svg);
         };
         var alternate = ($$anchor3) => {
-          var svg_1 = root_3$5();
+          var svg_1 = root_5$2();
           append($$anchor3, svg_1);
         };
-        if_block(node_2, ($$render) => {
-          if (get$1(effectiveIsCollapsed)) $$render(consequent);
+        if_block(node_4, ($$render) => {
+          if (get$1(effectiveIsCollapsed)) $$render(consequent_2);
           else $$render(alternate, false);
         });
       }
@@ -15760,14 +15815,14 @@ function CategoriseCategory($$anchor, $$props) {
       });
       append($$anchor2, button);
     };
-    if_block(node_1, ($$render) => {
-      if (isMobile()) $$render(consequent_1);
+    if_block(node_3, ($$render) => {
+      if (isMobile()) $$render(consequent_3);
     });
   }
   reset(div_1);
   bind_this(div_1, ($$value) => set(titleElement, $$value), () => get$1(titleElement));
-  var node_3 = sibling(div_1, 2);
-  key(node_3, () => `${categoryId()}-${get$1(effectiveIsCollapsed)}-${isMobile()}`, ($$anchor2) => {
+  var node_5 = sibling(div_1, 2);
+  key(node_5, () => `${categoryId()}-${get$1(effectiveIsCollapsed)}-${isMobile()}`, ($$anchor2) => {
     {
       const children = ($$anchor3) => {
       };
@@ -15784,6 +15839,9 @@ function CategoriseCategory($$anchor, $$props) {
         get containerLabelHtml() {
           return categoryTitle();
         },
+        get containerHasMath() {
+          return get$1(categoryHasMath);
+        },
         get containerIndex() {
           return categoryIndex();
         },
@@ -15850,10 +15908,9 @@ function CategoriseCategory($$anchor, $$props) {
   bind_this(div, ($$value) => set(categoryElement, $$value), () => get$1(categoryElement));
   template_effect(() => {
     set_attribute(div, "tabindex", get$1(adjustedTabindex));
+    set_attribute(div, "aria-label", get$1(shouldShowAriaLabel) ? `Category ${categoryIndex()}: ${get$1(cleanCategoryTitle)}. ${get$1(getTotalWords)} added.` : void 0);
     set_class(div, 1, `cat-ctr ${get$1(outerClasses) ?? ""}`);
     set_class(div_1, 1, clsx(get$1(titleClasses)));
-    set_text(text2, `Category ${categoryIndex() ?? ""}:`);
-    set_text(text_1, `. ${get$1(getTotalWords) ?? ""} added.`);
   });
   bind_element_size(div_1, "clientHeight", ($$value) => set(categoryTitleHeight, $$value));
   append($$anchor, div);
@@ -16465,7 +16522,7 @@ var root_2$1 = /* @__PURE__ */ from_html(`<button aria-label="Reset words" class
               text-blue-1000 px-3 py-2 absolute right-0 -top-2.5 hover:bg-blue-100" data-testid="cat-reset-btn"><span class="h-6 w-6 flex items-center justify-center"><!></span> <span class="text-base leading-4 font-bold ml-1 group-hover:underline">Reset <span class="hidden md:inline-block">words</span></span></button>`);
 var root_1$4 = /* @__PURE__ */ from_html(
   `<button type="button" aria-label="Skip to Word Bin" class="flex items-center text-charcoal border-l-6 border-charcoal bg-yellow-1000 py-1.5 pr-3 pl-4 focus-visible:border-charcoal
-        left-[-9999px] z-0 focus-within:left-0 focus-within:right-0 focus-within:top-0 absolute focus-within:z-30 focus-visible:outline-none"><span class="test-base font-semibold underline mr-1">Skip to Word Bin</span> <span class="text-inherit h-6 w-6 flex items-center justify-center"><!></span></button> <div class="w-full relative"><div class="sr-only" role="status" aria-live="polite" aria-atomic="true" tabindex="-1"> </div> <div class="mt-7.5 mb-6 relative md:text-center md:mb-8 md:mt-14"><p class="text-base leading-5 !text-gray-900 font-semibold md:item-heading">Categories</p> <!></div> <!> <!> <!></div>`,
+        left-[-9999px] z-0 focus-within:left-0 focus-within:right-0 focus-within:top-0 absolute focus-within:z-30 focus-visible:outline-none"><span class="test-base font-semibold underline mr-1">Skip to Word Bin</span> <span class="text-inherit h-6 w-6 flex items-center justify-center"><!></span></button> <div class="w-full relative"><div role="status" class="sr-only" tabindex="-1"> </div> <div class="mt-7.5 mb-6 relative md:text-center md:mb-8 md:mt-14"><p class="text-base leading-5 !text-gray-900 font-semibold md:item-heading">Categories</p> <!></div> <!> <!> <!></div>`,
   1
 );
 function CategoriseComponent($$anchor, $$props) {
@@ -16543,14 +16600,12 @@ function CategoriseComponent($$anchor, $$props) {
       onstateChange()(new CustomEvent("statechange", { detail: { state: get$1(interactionState), serialized } }));
     }
   };
-  const announceToScreenReader = async (message, hasMath = false) => {
+  const announceToScreenReader = async (message) => {
+    const containsMath = hasMathJax(message);
+    const speechText = containsMath ? await getMathJaxSpeechText(processMathJax(message)) : message;
     set(announcement, "");
     await tick();
-    set(announcement, message, true);
-    await tick();
-    if (hasMath && get$1(srDivRef)) {
-      await typesetMathJax(get$1(srDivRef));
-    }
+    set(announcement, speechText, true);
     setTimeout(
       () => {
         set(announcement, "");
@@ -16638,12 +16693,11 @@ function CategoriseComponent($$anchor, $$props) {
     const targetCategoryIndex = config().category_groups.findIndex((c) => c.id === targetContainerId);
     const targetCategory = targetCategoryIndex >= 0 ? config().category_groups[targetCategoryIndex] : void 0;
     if (item) {
-      const itemName = useRemoveRichTextHtmlTags(item.name);
-      const categoryName = targetCategory ? useRemoveRichTextHtmlTags(targetCategory.name) : null;
+      const cleanItemName = useRemoveRichTextHtmlTags(item.name);
+      const cleanCategoryName = targetCategory ? useRemoveRichTextHtmlTags(targetCategory.name) : null;
       const itemCount = targetContainerId === CATEGORISE.CONTAINER_WORD_BIN_ID ? get$1(interactionState).data.wordBinItems.length : api().getCategoryItems(get$1(interactionState), targetContainerId).length;
-      const message = createItemPlacementAnnouncement(itemName, categoryName, targetCategoryIndex, itemCount, targetContainerId);
-      const containsMath = hasMathJax(message);
-      await announceToScreenReader(containsMath ? processMathJax(message) : message, containsMath);
+      const message = createItemPlacementAnnouncement(cleanItemName, cleanCategoryName, targetCategoryIndex, itemCount, targetContainerId);
+      await announceToScreenReader(message);
     }
     await playDropAnimation(targetContainerId);
   };
@@ -16694,12 +16748,11 @@ function CategoriseComponent($$anchor, $$props) {
     const targetCategoryIndex = containerId === CATEGORISE.CONTAINER_WORD_BIN_ID ? -1 : config().category_groups.findIndex((c) => c.id === containerId);
     const targetCategory = targetCategoryIndex >= 0 ? config().category_groups[targetCategoryIndex] : null;
     if (item) {
-      const itemName = useRemoveRichTextHtmlTags(item.name);
-      const categoryName = targetCategory ? useRemoveRichTextHtmlTags(targetCategory.name) : null;
+      const cleanItemName = useRemoveRichTextHtmlTags(item.name);
+      const cleanCategoryName = targetCategory ? useRemoveRichTextHtmlTags(targetCategory.name) : null;
       const itemCount = containerId === CATEGORISE.CONTAINER_WORD_BIN_ID ? get$1(interactionState).data.wordBinItems.length : api().getCategoryItems(get$1(interactionState), containerId).length;
-      const message = createItemPlacementAnnouncement(itemName, categoryName, targetCategoryIndex, itemCount, containerId);
-      const containsMath = hasMathJax(message);
-      await announceToScreenReader(containsMath ? processMathJax(message) : message, containsMath);
+      const message = createItemPlacementAnnouncement(cleanItemName, cleanCategoryName, targetCategoryIndex, itemCount, containerId);
+      await announceToScreenReader(message);
     }
     await playDropAnimation(containerId);
     await tick();

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "eat-js-sdk",
-  "version": "2.4.2",
-  "change version": "2.4.0",
+  "version": "2.5.1",
+  "change version": "2.5.0",
   "description": "Authoring tool frontend SDK",
   "contributors": [
     {