handle updated mod 4 markdown (#19)

* handle updated mod 4 markdown

* cleanup

* revisions - Mod4, Mod3, and backtesting previously released modules.

Author: JoeArmani

accessibleQuestionTextBuilder.js

@@ -1,5 +1,5 @@
-import { moduleParams } from './questionnaire.js';
-import { getStateManager } from './stateManager.js';
+import { evaluateCondition } from './evaluateConditions.js';
+import { handleForIDAttributes, moduleParams } from './questionnaire.js';
 
 /**
  * Initialize the question text and focus management for screen readers.
@@ -46,6 +46,13 @@ function buildQuestionText(fieldsetEle) {
         (node.nodeType === Node.ELEMENT_NODE &&
             !['INPUT', 'BR', 'LABEL', 'LEGEND', 'TABLE'].includes(node.tagName) &&
             !node.classList.contains('response'));
+    
+    const isTerminalText = (text) => {
+        const trimmed = text.trim();
+        return trimmed.endsWith('?') ||
+            trimmed.endsWith('...') ||
+            trimmed.endsWith('tion:');
+    };
 
     const childNodes = Array.from(fieldsetEle.childNodes);
 
@@ -87,19 +94,30 @@ function buildQuestionText(fieldsetEle) {
             }
 
             // Stop collecting for legend if we hit text + number input node.
-            if (node.nodeType === Node.TEXT_NODE && nodeIndex + 1 < childNodes.length && childNodes[nodeIndex + 1] && childNodes[nodeIndex + 1].tagName === 'INPUT' && childNodes[nodeIndex + 1].type === 'number') {
+            if (node.nodeType === Node.TEXT_NODE && nodeIndex + 1 < childNodes.length && childNodes[nodeIndex + 1] && childNodes[nodeIndex + 1].tagName === 'INPUT' && (childNodes[nodeIndex + 1].type === 'number')) {
                 focusNode = node;
                 break;
             }
 
             questionElements.push(node.cloneNode(true));
 
+            // Stop collecting for legend if we hit the text node with a question-terminating condition.
+            // Let the handleMultiQuestionSurveyAccessibility() handle the focus node.
+            if (node.nodeType === Node.TEXT_NODE && isTerminalText(node.textContent)) {
+                break;
+            }
+
             // Stop looping if the text contains the 'a summary' text (otherwise the summary prompts get compressed).
             if (node.textContent && node.textContent.includes('a summary')) {
                 focusNode = node.nextSibling;
                 break;
             }
+
         } else if (node.tagName === 'BR') {
+            if (nodeIndex + 2 < childNodes.length && childNodes[nodeIndex + 1] && childNodes[nodeIndex + 1].tagName === 'BR' && childNodes[nodeIndex + 2] && childNodes[nodeIndex + 2].tagName === 'BR') {
+                //remove one <br> tag to ensure only two <br> tags are present after the <b> tag.
+                fieldsetEle.removeChild(node); // Remove the first <br> tag.
+            }
             continue; // Skip <br> tags.
         } else {
             focusNode = node; // The focus node splits questions and responses. The invisible focusable element is placed here.
@@ -115,8 +133,7 @@ function buildQuestionText(fieldsetEle) {
     }
 
     // Create the <legend> tag for screen readers and move the question text into it.
-    const updatedFieldset = manageLegendTag(fieldsetEle, questionElements);
-
+    const updatedFieldset = manageAccessibleFieldset(fieldsetEle, questionElements);
     // Create and return the hidden, focusable element for screen reader focus management.
     return createFocusableElement(updatedFieldset, focusNode);
 }
@@ -207,14 +224,17 @@ function handleMultiQuestionSurveyAccessibility(childNodes, fieldsetEle, focusNo
  * @param {Array<Node>} questionElements - array of nodes to be added to the legend.
  */
 
-function manageLegendTag(fieldsetEle, questionElements) {
+function manageAccessibleFieldset(fieldsetEle, questionElements) {
+    // On return to question, the legend will already be built.
     const existingLegend = fieldsetEle.querySelector('legend');
     if (existingLegend) {
-        // Update the existing displayifs in case the user changed a response.
-        manageLegendDisplayIfs(existingLegend);
+        // Update the existing displayifs and forids in case the user changed a response.
+        const returnToQuestion = true;
+        manageFieldsetConditionals(fieldsetEle, returnToQuestion);
         return fieldsetEle;
     }
 
+    // Typical path: new question is loaded. Build the legend.
     let legendEle = document.createElement('legend');
     legendEle.classList.add('question-text');
 
@@ -229,31 +249,86 @@ function manageLegendTag(fieldsetEle, questionElements) {
         }
     });
 
-    // Manage displayifs in the legend (question text) for summary pages and dynamic questions.
-    manageLegendDisplayIfs(legendEle);
-
     // The table case: no fieldset exists, create it.
     const table = fieldsetEle.querySelector('table');
     if (table) {
         // Create a new <fieldset> element, then add the <legend> to it.
         const newFieldset = document.createElement('fieldset');
         newFieldset.appendChild(legendEle);
+        manageFieldsetConditionals(newFieldset);
 
         // Move the table inside the new <fieldset>
         table.parentNode.insertBefore(newFieldset, table);
         newFieldset.appendChild(table);
-        removeBRAfterLegend(newFieldset);
-
+        handleQuestionBRElements(newFieldset);
         return newFieldset;
 
     } else {
         // Insert the <legend> as the first child of the existing <fieldset> for non-table questions.
         fieldsetEle.insertBefore(legendEle, fieldsetEle.firstChild);
-        removeBRAfterLegend(fieldsetEle);
+        manageFieldsetConditionals(fieldsetEle);
+        handleQuestionBRElements(fieldsetEle);
         return fieldsetEle;
     }
 }
 
+// If we're reuturning to a question, we need to re-check all conditionals for changes.
+function manageFieldsetConditionals(fieldset, returnToQuestion = false) {
+    const legend = fieldset.querySelector('legend');
+    if (!legend) return;
+
+    const questionElement = fieldset.closest('.question');
+    const isSummaryPage = questionElement?.id?.includes('SUM');
+
+    // Insert a <br> tag between the legend and the first displayif element. User hasupdated attribute to prevent multiple updates.
+    const nextLegendSibling = legend.nextElementSibling;
+    if (nextLegendSibling && nextLegendSibling.classList.contains('displayif') && nextLegendSibling.style.display !== 'none' && nextLegendSibling.getAttribute('hasupdate') !== 'true') {
+        const brEle1 = document.createElement('br');
+        const brEle2 = document.createElement('br');
+        brEle1.setAttribute('hasupdate', 'true');
+        brEle2.setAttribute('hasupdate', 'true');
+        const afterElement = nextLegendSibling.nextElementSibling;
+        fieldset.insertBefore(brEle1, afterElement);
+        fieldset.insertBefore(brEle2, afterElement);
+        nextLegendSibling.setAttribute('hasupdate', 'true');
+    }
+
+    // Collect text nodes that are adjacent to a hidden element with the displayif attribute.
+    if (!isSummaryPage) {
+        for (let i = 0; i < fieldset.childNodes.length; i++) {
+            const node = fieldset.childNodes[i];
+            const prevElem = node.previousElementSibling;
+            const nextElem = node.nextElementSibling;
+
+            // use hasupdate attribute to prevent multiple updates
+            if (node.nodeType === Node.ELEMENT_NODE && node.tagName === 'BR') {
+                if ((node.getAttribute('hasupdate') !== 'true' &&
+                    prevElem && prevElem.classList.contains('displayif') && prevElem.style.display === 'none' &&
+                    nextElem && !nextElem.classList.contains('response'))) {
+                        node.style.display = 'none';
+                        node.setAttribute('hasupdate', 'true');
+                }
+            }
+
+            if (node.nodeType === Node.TEXT_NODE) {
+                if ((prevElem && prevElem.classList.contains('response') && prevElem.hasAttribute('displayif') && prevElem.style.display === 'none') ||
+                    (nextElem && nextElem.classList.contains('response') && nextElem.hasAttribute('displayif') && nextElem.style.display === 'none')) {
+                    const cleaned = node.textContent.replace(/\s+/g, ' ');
+                    // Set its content to the cleaned version
+                    node.textContent = cleaned.trim() ? cleaned : '';
+                }
+            }
+        }
+    }
+
+    // Handle displayifs and forids in the fieldset and it's child (legend). Separate for speficity.
+    const fieldsetForIdSpans = Array.from(fieldset.querySelectorAll('[forid]'))
+        .filter(el => !legend.contains(el));
+
+    handleForIDAttributes(fieldsetForIdSpans, returnToQuestion);
+    manageLegendDisplayIfs(legend, returnToQuestion);
+}
+
 /**
  * Displayifs are in the legend (question text) for summary pages and dynamic questions.
  * E.g. "Are you still experiencing ______ ?" or "Here's the information you gave us:"
@@ -269,46 +344,45 @@ function manageLegendTag(fieldsetEle, questionElements) {
  * @returns {void} - The forid values are updated directly in the legend
  */
 
-function manageLegendDisplayIfs(legend) {
-    const manageForIdSpans = (forIdSpanArray) => {
-        const appState = getStateManager();
-        forIdSpanArray.forEach(forIdSpan => {
-            const forID = forIdSpan.getAttribute('forid');
-            const foundValue = appState.findResponseValue(forID) ?? '';
-
-            foundValue === ''
-                ? forIdSpan.style.display = 'none'
-                : forIdSpan.style.display = null;
-            forIdSpan.textContent = foundValue;
-        });
-    }
-
+function manageLegendDisplayIfs(legend, returnToQuestion) {
     // If the legend contains displayifs, manage those first.
-    const displayIfSpans = Array.from(legend.querySelectorAll('span.displayif'));
+    // Toggle visibility and update values based on the user's previous responses.
+    const displayIfSpans = Array.from(legend.querySelectorAll("span.displayif"));
     if (displayIfSpans.length > 0) {
         displayIfSpans.forEach(span => {
-            const forIdSpans = span.querySelectorAll('[forid]');
-            manageForIdSpans(forIdSpans);
+
+            const displayIfAttribute = span.getAttribute('displayif');
+            let conditionBool = evaluateCondition(displayIfAttribute);
+            if (conditionBool) {
+                span.style.display = '';
+            } else {
+                span.style.display = 'none';
+            }
+
+            if (/^\d{9}$/.test(span?.textContent?.trim())) {
+                span.textContent = '';
+            }
         });
 
-        resolveDisplayIfLegendWhitespace(legend);
+        const forIdSpans = legend.querySelectorAll('[forid]');
+        if (forIdSpans.length > 0) {
+            handleForIDAttributes(forIdSpans, returnToQuestion);
+        }
+
+        resolveLegendDisplayIfWhitespace(legend);
         return;
     }
 
     // If no displayifs are found, check for raw forIds.
     const forIdSpans = Array.from(legend.querySelectorAll('[forid]'));
     if (forIdSpans.length > 0) {
-        manageForIdSpans(forIdSpans);
+        handleForIDAttributes(forIdSpans, returnToQuestion);
     }
 }
 
-/**
- * Resolve extra whitespace in the legend text when many falsey displayifs are present.
- * Targeted: only normalizes text nodes between displayif spans.
- * E.G. Module4: [HOMEADD4_1] -> "Here is the information you gave us for this location"
- * @param {HTMLElement} legend - The legend element containing the question text (and dynamic responses)
- */
-function resolveDisplayIfLegendWhitespace(legend) {
+function resolveLegendDisplayIfWhitespace(legend) {
+    if (!legend) return;
+
     const textNodes = [];
 
     // Collect text nodes. Only process text nodes between displayif spans.
@@ -325,8 +399,13 @@ function resolveDisplayIfLegendWhitespace(legend) {
         }
     }
 
-    // Normalize collected nodes: replace sequences of whitespace with a single space
-    textNodes.forEach(textNode => {
+    if (textNodes.length === 0) return;
+    normalizeCollectedTextNodes(textNodes);
+}
+
+// Normalize collected nodes: replace sequences of whitespace with a single space
+function normalizeCollectedTextNodes(textNodeArray) {
+    textNodeArray.forEach(textNode => {
         textNode.textContent = textNode.textContent.replace(/\s+/g, ' ');
 
         if (textNode.textContent.trim() === '') {
@@ -340,16 +419,69 @@ function resolveDisplayIfLegendWhitespace(legend) {
     });
 }
 
+// Remove <br> tags after the legend tag when multiple exist (too much whitespace between questions and responses).
 function removeBRAfterLegend(fieldsetEle) {
     const legendEle = fieldsetEle.querySelector('legend');
     if (!legendEle) return;
     let nextSibling = legendEle.nextSibling;
-    while (nextSibling?.tagName === 'BR' && nextSibling.nextSibling?.tagName === 'BR') {
+    while (nextSibling?.tagName === 'BR' && nextSibling.nextSibling?.tagName === 'BR' && nextSibling.style.display !== 'none' && nextSibling.getAttribute('hasupdate') !== 'true') {
         fieldsetEle.removeChild(nextSibling);
         nextSibling = legendEle.nextSibling;
     }
 }
 
+/**
+ * Traverse the question DOM and handle <br> elements.
+ * @param {HTMLElement} fieldset - The question's fieldset element.
+ * @param {number} maxBrs - The maximum number of <br> elements between HTMLElements.
+ */
+
+function handleQuestionBRElements(fieldset, maxBrs = 3) {
+    const questionElement = fieldset.closest('.question');
+
+    // Remove any <br> elements after the legend tag.
+    removeBRAfterLegend(fieldset);
+
+    //special handling for summary pages
+    const isSummaryPage = questionElement.id.includes('SUM');
+    if (isSummaryPage) {
+        maxBrs = 1;
+    }
+
+    let consecutiveBrs = [];
+
+    // Traverse the DOM tree to find all <br> elements
+    questionElement.querySelectorAll('br').forEach((br) => {
+        if (consecutiveBrs.length > 0 && consecutiveBrs[consecutiveBrs.length - 1].nextElementSibling === br) {
+            consecutiveBrs.push(br);
+        } else {
+            if (consecutiveBrs.length > maxBrs) {
+                // Remove all but the first two <br> elements
+                consecutiveBrs.slice(maxBrs).forEach((extraBr) => extraBr.remove());
+            }
+            // Reset the array to start tracking a new sequence
+            consecutiveBrs = [br];
+        }
+    });
+
+    // Final check in case the last sequence of <br>s is at the end of the document
+    if (consecutiveBrs.length > maxBrs) {
+        consecutiveBrs.slice(maxBrs).forEach((extraBr) => extraBr.remove());
+    }
+
+    //Set the brs after non-displays to not show as well
+    if (!isSummaryPage) {
+        [...questionElement.querySelectorAll(`[style*="display: none"]+br`)].forEach((e) => {
+            e.style = "display: none"
+        });
+    }
+
+    // Add aria-hidden to all remaining br elements. This keeps the screen reader from reading them as 'Empty Group'.
+    [...questionElement.querySelectorAll("br")].forEach((br) => {
+        br.setAttribute("aria-hidden", "true");
+    });
+}
+
 /**
  * Create a hidden, focusable element for screen reader focus management in each question.
  * @param {HTMLElement} fieldsetEle - The fieldset element containing the question text.

eventHandlers.js

@@ -276,7 +276,6 @@ function addSubmitSurveyListener() {
     try {
       const appState = getStateManager();  
       const submitSurveyResponse = await appState.submitSurvey();
-      console.log('submitSurveyResponse (in Quest)', submitSurveyResponse);
       if (submitSurveyResponse?.code !== 200) {
         throw new Error('Submit survey failed');
       }

questionProcessor.js

@@ -619,7 +619,7 @@ export class QuestionProcessor {
   /**
    * For some input elements, the input ID and the form ID are different.
    * This is a legacy case, where we need to continue supporting existing surveys.
-   * Process: Search questions for the elementID. If found, return the parent formID.
+   * Process: Search questions for the elementID. If found, evaluate the found element.
    * This supports 'forid' replacement and displayif conditionals.
    * @param {string} elementID - The ID of the input element to find.
    * @returns {string} - The ID of the input element's form, required for evaluating some conditionals, or null if not found.
@@ -632,13 +632,43 @@ export class QuestionProcessor {
       if (question) {
         const foundElement = question.querySelector(`#${elementID}`);
         if (foundElement) {
+          const displayIfAttribute = foundElement.getAttribute('displayif');
+          if (displayIfAttribute) {
+            if (!this.evaluateConditionInFormSearch(displayIfAttribute)) {
+              return '';
+            }
+          }
+          // If the found element is hidden, it is not a valid result.
+          if (foundElement.style.display === 'none') {
+            return '';
+          }
           return question.id;
+        // If the elementID matches the questionID, there's no new property to replace/return.
+        } else if (question.id === elementID) {
+          return '';
         }
       }
     }
 
     moduleParams.errorLogger(`Error, findRelatedFormID (formID not found): ${moduleParams.questName}, elementID: ${elementID}`);
-    return null;
+    return '';
+  }
+
+  // This can be extended to handle other speficic conditionals in the form search for complex cases.
+  // The doesNotExist case handles multi-page dependencies (e.g. address entry where the user is asked to enter missing values actoss multiple questions in Module 3).
+  evaluateConditionInFormSearch(displayIfAttribute) {
+    if (displayIfAttribute.includes('doesNotExist')) {
+      const idRegex = /"(D_\d+(?:_\d+)*)"/;
+      const match = displayIfAttribute.match(idRegex);
+      if (match && match[1]) {
+          const appState = getStateManager();
+          const foundValue = appState.findResponseValue(match[1]);
+          if (foundValue == null || foundValue === '') {
+            return false;
+          }
+      }
+    }
+    return true;
   }
 
   replaceDateTags(content) {