@govtechsg/oobee 0.10.76 → 0.10.78-alpha1

package/dist/static/ejs/partials/scripts/ruleModal/utilities.ejs

@@ -0,0 +1,483 @@
+<script>
+  function generateWcagConformanceLinks(conformanceList) {
+    const wcagConformanceUrls = {
+      wcag111: 'https://www.w3.org/TR/WCAG22/#non-text-content',
+      wcag122: 'https://www.w3.org/TR/WCAG22/#captions-prerecorded',
+      wcag131: 'https://www.w3.org/TR/WCAG22/#info-and-relationships',
+      wcag135: 'https://www.w3.org/TR/WCAG22/#identify-input-purpose',
+      wcag141: 'https://www.w3.org/TR/WCAG22/#use-of-color',
+      wcag142: 'https://www.w3.org/TR/WCAG22/#audio-control',
+      wcag143: 'https://www.w3.org/TR/WCAG22/#contrast-minimum',
+      wcag144: 'https://www.w3.org/TR/WCAG22/#resize-text',
+      wcag146: 'https://www.w3.org/TR/WCAG22/#contrast-enhanced',
+      wcag1412: 'https://www.w3.org/TR/WCAG22/#text-spacing',
+      wcag211: 'https://www.w3.org/TR/WCAG22/#keyboard',
+      wcag213: 'https://www.w3.org/WAI/WCAG22/Understanding/keyboard-no-exception.html',
+      wcag221: 'https://www.w3.org/TR/WCAG22/#timing-adjustable',
+      wcag222: 'https://www.w3.org/TR/WCAG22/#pause-stop-hide',
+      wcag224: 'https://www.w3.org/TR/WCAG22/#interruptions',
+      wcag241: 'https://www.w3.org/TR/WCAG22/#bypass-blocks',
+      wcag242: 'https://www.w3.org/TR/WCAG22/#page-titled',
+      wcag244: 'https://www.w3.org/TR/WCAG22/#link-purpose-in-context',
+      wcag249: 'https://www.w3.org/TR/WCAG22/#link-purpose-link-only',
+      wcag258: 'https://www.w3.org/TR/WCAG22/#target-size-minimum',
+      wcag311: 'https://www.w3.org/TR/WCAG22/#language-of-page',
+      wcag312: 'https://www.w3.org/TR/WCAG22/#language-of-parts',
+      wcag315: 'https://www.w3.org/TR/WCAG22/#reading-level',
+      wcag325: 'https://www.w3.org/TR/WCAG22/#change-on-request',
+      wcag332: 'https://www.w3.org/TR/WCAG22/#labels-or-instructions',
+      wcag412: 'https://www.w3.org/TR/WCAG22/#name-role-value',
+    };
+
+    const links = [];
+    for (let i = 1; i < conformanceList.length; i++) {
+      const [wcagSection, subSection, ...sectionItem] = conformanceList[i].slice(4);
+      const formattedConformanceNumber = `${wcagSection}.${subSection}.${sectionItem.join('')}`;
+      links.push(
+        `<a href="${wcagConformanceUrls[conformanceList[i]]}" target="_blank">WCAG ${formattedConformanceNumber}</a>`,
+      );
+    }
+    return links.join('&nbsp&nbsp,&nbsp&nbsp&nbsp');
+  }
+
+  function generateItemMessageElement(displayNeedsReview, rawMessage) {
+    if (rawMessage.includes('\n\nFix')) {
+      rawMessage = rawMessage.replace('\n\nFix', '\n  Fix');
+    }
+
+    const htmlEscapedMessageArray = rawMessage.split('\n  ').map(m => htmlEscapeString(m));
+
+    if (displayNeedsReview) {
+      if (htmlEscapedMessageArray.length === 1) {
+        return `<p class="mb-0">${htmlEscapedMessageArray[0]}</p>`;
+      } else {
+        return `<ul>${htmlEscapedMessageArray.map(m => `<li>${m}</li>`).join('')}</ul>`;
+      }
+    } else {
+      let i = 0;
+      const elements = [];
+      while (i < htmlEscapedMessageArray.length) {
+        if (htmlEscapedMessageArray[i].startsWith('Fix ')) {
+          elements.push(`<p class="mb-0">${htmlEscapedMessageArray[i]}</p>`);
+          i++;
+        } else {
+          const fixesList = [];
+          while (
+            i < htmlEscapedMessageArray.length &&
+            !htmlEscapedMessageArray[i].startsWith('Fix a')
+          ) {
+            fixesList.push(`<li>${htmlEscapedMessageArray[i]}</li>`);
+            i++;
+          }
+          elements.push(`<ul>${fixesList.join('')}</ul>`);
+        }
+      }
+
+      return elements.join('');
+    }
+  }
+
+  // Generate AI-powered fix suggestions using wcag-eval API
+  const generateGenAiSuggestFix = async (ruleId, accordionDiv, html, buttonDiv, errorDiv) => {
+    console.log('Gen AI Suggest Fix called:', { ruleId, accordionDiv, html, buttonDiv, errorDiv });
+
+    const SUPPORTED_RULES = ['color-contrast', 'oobee-accessible-label', 'image-alt', 'listitem', 'link-in-text-block', 'target-size'];
+    if (!SUPPORTED_RULES.includes(ruleId)) {
+      console.warn(`Gen AI Suggest Fix not yet available for ${ruleId}`);
+      return;
+    }
+
+    // Update button state
+    const button = document.getElementById(buttonDiv);
+    if (!button) {
+      console.error('Gen AI button not found:', buttonDiv);
+      return;
+    }
+
+    button.disabled = true;
+    button.textContent = 'Generating Fix...';
+
+    // Clear previous errors
+    const errorContainer = document.getElementById(errorDiv);
+    if (errorContainer) {
+      errorContainer.innerHTML = '';
+    }
+
+    try {
+      let violationContext = null;
+      let elementContext = null;
+
+      // Attempt to get violation context from embedded JSON data
+      if (window.oobeeJsonContextParser && window.oobeeJsonContextParser.jsonData) {
+        violationContext = window.oobeeJsonContextParser.getViolationContextByHtml(html, ruleId);
+
+        if (violationContext) {
+          console.log('Found violation context from embedded JSON:', violationContext);
+        } else {
+          console.warn('No matching violation found in embedded JSON data, will extract context from DOM');
+        }
+      } else {
+        console.warn('Embedded JSON context parser not available, will extract context from DOM');
+      }
+
+      // Extract element context from DOM if embedded JSON data is not available
+      if (!violationContext || !violationContext.colorData) {
+        console.log('Extracting element context from DOM as fallback');
+        elementContext = extractElementContext(html);
+      } else {
+        console.log('Using embedded JSON violation context, skipping DOM extraction');
+      }
+
+      // Build scanner findings from embedded JSON data or fallback to extracted context
+      let scannerFindings;
+      if (violationContext && violationContext.colorData) {
+        const colorData = violationContext.colorData;
+        console.log('Using color data from embedded JSON:', {
+          foreground: colorData.foreground,
+          background: colorData.background,
+          currentRatio: colorData.currentRatio,
+          requiredRatio: colorData.requiredRatio,
+          fontSize: colorData.fontSize,
+          fontWeight: colorData.fontWeight
+        });
+
+        scannerFindings = {
+          foreground: colorData.foreground || '#000000',
+          background: colorData.background || '#ffffff',
+          font_size_px: colorData.fontSize || 16,
+          font_weight: colorData.fontWeight || '400',
+          contrast_ratio: colorData.currentRatio || 1.0,
+          required_ratio: colorData.requiredRatio || 4.5,
+          actual_html: violationContext.html,
+          xpath_selector: violationContext.xpath
+        };
+        console.log('Using embedded JSON-based scanner findings with contrast ratio:', scannerFindings.contrast_ratio);
+      } else {
+        scannerFindings = {
+          foreground: elementContext?.foreground || '#000000',
+          background: elementContext?.background || '#ffffff',
+          font_size_px: elementContext?.fontSize || 16,
+          font_weight: elementContext?.fontWeight || '400',
+          contrast_ratio: elementContext?.contrastRatio || 1.0,
+          required_ratio: 4.5
+        };
+        console.log('Using fallback scanner findings:', scannerFindings);
+      }
+
+      const violationTypeMap = {
+        'color-contrast': 'color-contrast',
+        'oobee-accessible-label': 'accessible-label',
+        'image-alt': 'image-alt',
+        'listitem': 'listitem',
+        'target-size': 'target-size'
+      };
+      let violationType = violationTypeMap[ruleId] || ruleId;
+
+      // Prepare payload for wcag-eval API
+      const apiPayload = {
+        violationType: violationType,
+        html: html,
+        css: elementContext?.css || '',
+        violationContext: violationContext ? {
+          severity: violationContext.severity,
+          issue_description: violationContext.issueDescription,
+          wcag_conformance: violationContext.wcagConformance,
+          page_title: violationContext.pageTitle,
+          page_url: violationContext.url,
+          how_to_fix: violationContext.howToFix,
+          axe_impact: violationContext.axeImpact,
+          learn_more: violationContext.learnMore
+        } : {},
+        context: {
+          rule_id: ruleId,
+          timestamp: new Date().toISOString(),
+          data_source: violationContext ? 'json_scan_results' : 'dom_extraction'
+        }
+      };
+
+      // Add scannerFindings for color-contrast violations
+      if (violationType === 'color-contrast') {
+        apiPayload.scannerFindings = scannerFindings;
+      }
+
+      console.log('Sending request to wcag-eval API:', apiPayload);
+
+      // Call wcag-eval API (now in oobee-web-proxy)
+      const wcagEvalApiUrl = `${proxyUrl}/api/ai/generate-fix` || 'http://localhost:3002/api/ai/generate-fix';
+      const response = await fetch(wcagEvalApiUrl, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Accept': 'application/json'
+        },
+        body: JSON.stringify(apiPayload)
+      });
+
+      if (!response.ok) {
+        throw new Error(`API request failed: ${response.status} ${response.statusText}`);
+      }
+
+      const apiResponse = await response.json();
+      console.log('Received response from wcag-eval API:', apiResponse);
+
+      if (!apiResponse.success) {
+        throw new Error(apiResponse.error || 'API returned unsuccessful response');
+      }
+
+      const fixSuggestion = apiResponse.fixSuggestion;
+      console.log('Fix suggestion data:', fixSuggestion);
+      console.log('Code fixes array:', fixSuggestion?.codeFixes);
+
+      // Format the AI response for display
+      const formattedResponse = formatFixSuggestionResponse(fixSuggestion);
+
+      // Display the generated fix
+      const responseContainer = document.getElementById(accordionDiv);
+      if (responseContainer) {
+        responseContainer.innerHTML = formattedResponse;
+
+        // Highlight code blocks
+        responseContainer.querySelectorAll('.codeForAiResponse').forEach(el => {
+          if (typeof hljs !== 'undefined') {
+            hljs.highlightElement(el);
+          }
+        });
+      }
+
+      // Reset button to regenerate state
+      button.disabled = false;
+      button.style = 'border: 1px solid var(--oobee-blue-100); color: var(--oobee-blue-100);';
+      button.textContent = 'Regenerate Fix';
+
+    } catch (error) {
+      console.error('Error in Gen AI fix generation:', error);
+
+      // Reset button to initial state
+      button.disabled = false;
+      button.style = 'border: 1px solid var(--oobee-blue-100); color: var(--oobee-blue-100);';
+      button.textContent = 'Gen AI Suggest Fix';
+
+      if (errorContainer) {
+        const isConnectionError = error.message.includes('fetch') || error.message.includes('Failed to fetch');
+        const errorMessage = isConnectionError
+          ? 'Unable to connect to AI service. Please ensure the wcag-eval API is running on port 5000.'
+          : `Failed to generate fix suggestion: ${error.message}`;
+
+        errorContainer.innerHTML = `<div class="generateAiError">${errorMessage}</div>`;
+      }
+    }
+  };
+
+  // Helper function to extract element context from HTML/CSS
+  function extractElementContext(html) {
+    const context = {
+      css: '',
+      foreground: '#000000',
+      background: '#ffffff',
+      fontSize: 16,
+      fontWeight: '400',
+      contrastRatio: 1.0
+    };
+
+    try {
+      const tempDiv = document.createElement('div');
+      tempDiv.innerHTML = html;
+      const element = tempDiv.querySelector('*') || tempDiv;
+
+      if (element && element.parentNode) {
+        document.body.appendChild(tempDiv);
+        const computedStyle = window.getComputedStyle(element);
+
+        context.foreground = rgbToHex(computedStyle.color) || context.foreground;
+        context.background = rgbToHex(computedStyle.backgroundColor) || context.background;
+        context.fontSize = parseFloat(computedStyle.fontSize) || context.fontSize;
+        context.fontWeight = computedStyle.fontWeight || context.fontWeight;
+
+        if (element.style && element.style.cssText) {
+          context.css = element.style.cssText;
+        }
+
+        document.body.removeChild(tempDiv);
+      }
+
+      if (context.foreground && context.background) {
+        context.contrastRatio = calculateContrastRatio(context.foreground, context.background);
+      }
+
+    } catch (error) {
+      console.warn('Could not extract element context:', error);
+    }
+
+    return context;
+  }
+
+  // Format fix suggestion response for display
+  function formatFixSuggestionResponse(fixSuggestion) {
+    // Support both snake_case (Python) and camelCase (TypeScript) responses
+    const contrastAnalysis = fixSuggestion.contrast_analysis || fixSuggestion.contrastAnalysis || {};
+    const targetSizeAnalysis = fixSuggestion.target_size_analysis || fixSuggestion.targetSizeAnalysis || {};
+    const plainExplanation = fixSuggestion.why_it_matters || fixSuggestion.explanation || 'This fix improves accessibility for users with visual impairments.';
+    const diagnosis = fixSuggestion.diagnosis || fixSuggestion.explanation || plainExplanation;
+
+    // Escape HTML for safe rendering
+    const escapeHtml = (text) => String(text)
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;')
+      .replace(/'/g, '&#039;');
+
+    // Build code fixes section
+    let codeFixesHtml = '';
+
+    // Handle TypeScript format (css/html directly in response)
+    if (fixSuggestion.css || fixSuggestion.html) {
+      const mainFix = [];
+      if (fixSuggestion.css) {
+        mainFix.push(`
+          <div style="margin-bottom: 16px;">
+            <p style="font-size: 13px; margin-bottom: 8px; color: #666; font-weight: 500;">Recommended CSS Fix:</p>
+            <code class="codeForAiResponse language-css hljs" style="display: block; padding: 16px; background: #f8f9fa; border-radius: 6px; font-size: 13px; border: 1px solid #e0e0e0; white-space: pre-wrap; word-break: break-all;">${escapeHtml(fixSuggestion.css)}</code>
+          </div>
+        `);
+      }
+      if (fixSuggestion.html) {
+        mainFix.push(`
+          <div style="margin-bottom: 16px;">
+            <p style="font-size: 13px; margin-bottom: 8px; color: #666; font-weight: 500;">Recommended HTML Fix:</p>
+            <code class="codeForAiResponse language-html hljs" style="display: block; padding: 16px; background: #f8f9fa; border-radius: 6px; font-size: 13px; border: 1px solid #e0e0e0; white-space: pre-wrap; word-break: break-all;">${escapeHtml(fixSuggestion.html)}</code>
+          </div>
+        `);
+      }
+
+      // Handle alternatives
+      if (fixSuggestion.alternatives && Array.isArray(fixSuggestion.alternatives) && fixSuggestion.alternatives.length > 0) {
+        const alternatives = fixSuggestion.alternatives.map((alt, index) => {
+          const altCode = alt.css || alt.html || '';
+          return `
+            <div style="margin-top: 16px; padding-top: 16px; border-top: 1px solid #e0e0e0;">
+              <p style="font-size: 13px; margin-bottom: 8px; color: #666; font-weight: 500;">Alternative ${index + 1}: ${escapeHtml(alt.explanation || '')}</p>
+              <code class="codeForAiResponse language-${alt.css ? 'css' : 'html'} hljs" style="display: block; padding: 16px; background: #f8f9fa; border-radius: 6px; font-size: 13px; border: 1px solid #e0e0e0; white-space: pre-wrap; word-break: break-all;">${escapeHtml(altCode)}</code>
+            </div>
+          `;
+        }).join('');
+        mainFix.push(alternatives);
+      }
+
+      codeFixesHtml = `
+        <div style="margin-bottom: 16px;">
+          <h4 style="font-size: 16px; font-weight: 600; margin-bottom: 12px; color: #1a1a1a;">Code Fix:</h4>
+          ${mainFix.join('')}
+        </div>
+      `;
+    }
+    // Handle Python format (code_fixes array)
+    else if (fixSuggestion.code_fixes && Array.isArray(fixSuggestion.code_fixes) && fixSuggestion.code_fixes.length > 0) {
+      const codeFixes = fixSuggestion.code_fixes.map((fix, index) => {
+        const language = fix.language || 'html';
+        const description = fix.description || `Option ${index + 1}`;
+        const code = fix.after || fix.before || '';
+        const marginBottom = index === fixSuggestion.code_fixes.length - 1 ? '0' : '20px';
+
+        return `
+        <div style="margin-bottom: ${marginBottom};">
+          <p style="font-size: 13px; margin-bottom: 8px; color: #666; font-weight: 500;">${escapeHtml(description)}</p>
+          <code class="codeForAiResponse language-${escapeHtml(language)} hljs" style="display: block; padding: 16px; background: #f8f9fa; border-radius: 6px; font-size: 13px; border: 1px solid #e0e0e0; white-space: pre-wrap; word-break: break-all;">${escapeHtml(code)}</code>
+        </div>`;
+      }).join('');
+
+      codeFixesHtml = `
+      <div style="margin-bottom: 16px;">
+        <h4 style="font-size: 16px; font-weight: 600; margin-bottom: 12px; color: #1a1a1a;">Code Fix${fixSuggestion.code_fixes.length > 1 ? 'es' : ''}:</h4>
+        ${codeFixes}
+      </div>
+    `;
+    }
+
+    return `
+      <div class="genai-response-card">
+        <div style="margin-bottom: 24px;">
+          <h4 style="font-size: 16px; font-weight: 600; margin-bottom: 12px; color: #1a1a1a;">What's the problem?</h4>
+          <p style="font-size: 14px; line-height: 1.6; margin-bottom: 16px; color: #333;">
+            ${escapeHtml(diagnosis)}
+          </p>
+
+          ${contrastAnalysis.current_ratio ? `
+          <div style="background: #FAF8FD; padding: 12px; border-radius: 6px; margin-bottom: 16px;">
+            <p style="margin: 0; font-size: 14px; line-height: 1.6; color: #333;">
+              The current text has a contrast ratio of <strong>${contrastAnalysis.current_ratio}:1</strong>,
+              but it needs at least <strong>${contrastAnalysis.required_ratio}:1</strong> to meet accessibility standards.
+              ${contrastAnalysis.passes_aa
+                ? `The suggested fix achieves <strong>${contrastAnalysis.proposed_ratio}:1</strong>, which passes WCAG AA requirements.`
+                : `The suggested fix improves it to <strong>${contrastAnalysis.proposed_ratio}:1</strong>.`}
+            </p>
+          </div>
+          ` : ''}
+
+          ${targetSizeAnalysis && (targetSizeAnalysis.estimated_width !== undefined || targetSizeAnalysis.estimated_height !== undefined || targetSizeAnalysis.notes) ? `
+          <div style="background: #F5FAFF; padding: 12px; border-radius: 6px; margin-bottom: 16px; border: 1px solid #e0efff;">
+            <p style="margin: 0; font-size: 14px; line-height: 1.6; color: #333;">
+              ${targetSizeAnalysis.meets_minimum === false
+                ? 'Estimated hit area is below the WCAG 2.5.8 minimum of 24x24 CSS pixels.'
+                : 'Target size analysis for this control:'}
+              ${targetSizeAnalysis.estimated_width !== undefined && targetSizeAnalysis.estimated_width !== null
+                ? ` Estimated width: <strong>${targetSizeAnalysis.estimated_width}${typeof targetSizeAnalysis.estimated_width === 'number' ? 'px' : ''}</strong>.`
+                : ''}
+              ${targetSizeAnalysis.estimated_height !== undefined && targetSizeAnalysis.estimated_height !== null
+                ? ` Estimated height: <strong>${targetSizeAnalysis.estimated_height}${typeof targetSizeAnalysis.estimated_height === 'number' ? 'px' : ''}</strong>.`
+                : ''}
+              ${targetSizeAnalysis.notes ? ` ${escapeHtml(targetSizeAnalysis.notes)}` : ''}
+            </p>
+          </div>
+          ` : ''}
+
+          ${fixSuggestion.fix_steps && fixSuggestion.fix_steps.length > 0 ? `
+          <div style="margin-top: 16px;">
+            <h5 style="font-size: 14px; font-weight: 600; margin-bottom: 12px; color: #1a1a1a;">How to fix it:</h5>
+            <ol style="margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.8; color: #333;">
+              ${fixSuggestion.fix_steps.map(step => `<li style="word-wrap: break-word; overflow-wrap: break-word;">${escapeHtml(step)}</li>`).join('')}
+            </ol>
+          </div>
+          ` : ''}
+        </div>
+
+        ${codeFixesHtml}
+      </div>
+    `;
+  }
+
+  // Convert RGB color to hex format
+  function rgbToHex(rgb) {
+    if (!rgb || rgb === 'transparent' || rgb === 'inherit') return null;
+
+    const result = rgb.match(/\d+/g);
+    if (!result || result.length < 3) return null;
+
+    const r = parseInt(result[0]);
+    const g = parseInt(result[1]);
+    const b = parseInt(result[2]);
+
+    return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
+  }
+
+  // Calculate WCAG contrast ratio between two colors
+  function calculateContrastRatio(color1, color2) {
+    try {
+      const getLuminance = (hex) => {
+        const rgb = hex.match(/\w\w/g).map(h => parseInt(h, 16) / 255);
+        const [r, g, b] = rgb.map(c => c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4));
+        return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+      };
+
+      const l1 = getLuminance(color1.replace('#', ''));
+      const l2 = getLuminance(color2.replace('#', ''));
+      const lightest = Math.max(l1, l2);
+      const darkest = Math.min(l1, l2);
+
+      return Math.round(((lightest + 0.05) / (darkest + 0.05)) * 100) / 100;
+    } catch (error) {
+      console.warn('Could not calculate contrast ratio:', error);
+      return 1.0;
+    }
+  }
+</script>

package/dist/static/ejs/partials/scripts/scannedPagesSegmentedTabs.ejs

@@ -0,0 +1,35 @@
+<script>
+  document.addEventListener('click', function (e) {
+    const btn = e.target.closest('.seg-pill');
+    if (!btn) return;
+
+    const container = btn.closest('.segmented-tabs');
+    const targetSel = btn.getAttribute('data-tab-target');
+    const panel = document.querySelector(targetSel);
+    if (!panel) return;
+
+    container.querySelectorAll('.seg-pill').forEach((p) =>
+      p.setAttribute('aria-selected', 'false')
+    );
+    btn.setAttribute('aria-selected', 'true');
+
+    document
+      .querySelectorAll('.seg-panels > [role="tabpanel"]')
+      .forEach((p) => (p.hidden = true));
+    panel.hidden = false;
+  });
+
+  window.addEventListener('DOMContentLoaded', () => {
+    const pairs = [
+      ['#seg-not-scanned', '#totalPagesNotScannedLabel'],
+      ['#seg-unsupported', '#totalUnsupportedDocsLabel']
+    ];
+    pairs.forEach(([btnSel, countSel]) => {
+      const btn = document.querySelector(btnSel);
+      const countEl = document.querySelector(countSel);
+      if (btn && countEl && countEl.textContent.trim() === '0') {
+        btn.style.display = 'none';
+      }
+    });
+  });
+</script>

package/dist/static/ejs/partials/scripts/screenshotLightbox.ejs

@@ -0,0 +1,75 @@
+<%# functions used to show lightbox of screenshot when thumbnail is clicked on %>
+<script>
+  const lightbox = document.getElementsByClassName('screenshot-lightbox')[0];
+  const lightboxHeader = document.getElementsByClassName('lightbox-header')[0];
+  const lightboxTitle = document.querySelector('.lightbox-header h5');
+  const lightboxContent = document.getElementsByClassName('lightbox-content')[0];
+  const lightboxImg = document.getElementById('lightbox-image');
+
+  var customFlowScreenshots = document.getElementsByClassName('custom-flow-screenshot');
+  Array.from(customFlowScreenshots).forEach(screenshot => {
+    screenshot.onerror = function (event) {
+      screenshot.onerror = null;
+      screenshot.remove();
+    };
+    screenshot.onclick = event => {
+      event.preventDefault();
+      const pageTitle = screenshot.parentNode.getElementsByTagName('a')[0].textContent;
+      const pageUrl = screenshot.parentNode.getElementsByTagName('a')[0].href;
+      openLightbox(screenshot.src, pageTitle, pageUrl);
+    };
+  });
+
+  lightbox.addEventListener('click', event => {
+    if (
+      event.target === lightbox ||
+      event.target === lightboxHeader ||
+      event.target === lightboxTitle
+    ) {
+      closeLightbox();
+    }
+  });
+
+  const offcanvasElem = document.getElementsByClassName('offcanvas')[0];
+  const offcanvasItem = new bootstrap.Offcanvas(offcanvasElem);
+  offcanvasItem._config.keyboard = false; // Disable default keyboard handling
+
+  const pagesScannedModalElem = document.getElementById('pagesScannedModal');
+  const pagesScannedModalItem = new bootstrap.Modal(pagesScannedModalElem);
+  pagesScannedModalItem._config.keyboard = false;
+
+  document.addEventListener('keydown', event => {
+    if (event.key === 'Escape') {
+      if (offcanvasItem._isShown) {
+        if (lightbox.style.display === 'block') {
+          event.preventDefault(); // Prevent default bootstrap behaviour
+          closeLightbox();
+        } else {
+          offcanvasItem.hide();
+        }
+      }
+
+      if (pagesScannedModalItem._isShown) {
+        if (lightbox.style.display === 'block') {
+          event.preventDefault(); // Prevent default bootstrap behaviour
+          closeLightbox();
+        } else {
+          pagesScannedModalItem.hide();
+        }
+      }
+    }
+  });
+
+  function openLightbox(imgSrc, pageTitle, pageUrl) {
+    lightbox.style.display = 'block';
+
+    lightboxImg.src = imgSrc;
+    lightboxImg.alt = `Screenshot of ${pageUrl}`;
+
+    lightboxTitle.textContent = pageTitle;
+  };
+
+  function closeLightbox() {
+    lightbox.style.display = 'none';
+  };
+</script>

package/dist/static/ejs/partials/scripts/summaryScanResults.ejs

@@ -0,0 +1,14 @@
+<script>
+  document.getElementById('summarymustFixIcon').src =
+    "data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.1429 0H2.85714C1.27919 0 0 1.27919 0 2.85714V17.1429C0 18.7208 1.27919 20 2.85714 20H17.1429C18.7208 20 20 18.7208 20 17.1429V2.85714C20 1.27919 18.7208 0 17.1429 0Z' fill='%23f26949'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.4292 9.99822V5.71251C11.4292 4.92353 10.7896 4.28394 10.0006 4.28394C9.21161 4.28394 8.57202 4.92353 8.57202 5.71251V9.99822C8.57202 10.7872 9.21161 11.4268 10.0006 11.4268C10.7896 11.4268 11.4292 10.7872 11.4292 9.99822ZM10.0006 12.8554C9.21202 12.8554 8.57202 13.4954 8.57202 14.2839C8.57202 15.0725 9.21202 15.7125 10.0006 15.7125C10.7892 15.7125 11.4292 15.0725 11.4292 14.2839C11.4292 13.4954 10.7892 12.8554 10.0006 12.8554Z' fill='white'/%3E%3C/svg%3E%0A";
+  document.getElementById('summarymustFixIcon').alt = 'must fix icon';
+  document.getElementById('summarygoodToFixIcon').src =
+    "data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.1429 0H2.85714C1.27919 0 0 1.27919 0 2.85714V17.1429C0 18.7208 1.27919 20 2.85714 20H17.1429C18.7208 20 20 18.7208 20 17.1429V2.85714C20 1.27919 18.7208 0 17.1429 0Z' fill='%23ffb200'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 6.5625C8.10131 6.5625 6.5625 8.10131 6.5625 10C6.5625 11.8987 8.10131 13.4375 10 13.4375C11.8987 13.4375 13.4375 11.8987 13.4375 10C13.4375 8.10131 11.8987 6.5625 10 6.5625ZM4.84375 10C4.84375 7.15207 7.15207 4.84375 10 4.84375C12.8479 4.84375 15.1562 7.15207 15.1562 10C15.1562 12.8479 12.8479 15.1562 10 15.1562C7.15207 15.1562 4.84375 12.8479 4.84375 10Z' fill='white'/%3E%3C/svg%3E%0A";
+  document.getElementById('summarygoodToFixIcon').alt = 'good to fix icon';
+  document.getElementById('summaryneedsReviewIcon').src =
+    "data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.1429 0H2.85714C1.27919 0 0 1.27919 0 2.85714V17.1429C0 18.7208 1.27919 20 2.85714 20H17.1429C18.7208 20 20 18.7208 20 17.1429V2.85714C20 1.27919 18.7208 0 17.1429 0Z' fill='%23c9c8c6'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.09759 7.26594C8.23445 6.67496 8.46462 6.23328 8.7881 5.9409C9.14891 5.65474 9.57815 5.51166 10.0758 5.51166C10.5984 5.51166 11.0152 5.64852 11.3262 5.92224C11.6372 6.19596 11.7928 6.53188 11.7928 6.93002C11.7928 7.22862 11.7057 7.48367 11.5315 7.69518C11.4195 7.84448 11.0712 8.15552 10.4864 8.6283C9.90785 9.11353 9.51594 9.54277 9.31065 9.91602C9.12403 10.3079 9.03072 10.7745 9.03072 11.3157V11.7449L9.04938 11.8569C9.04938 11.9316 9.06026 12 9.08204 12.0622C9.10381 12.1244 9.12558 12.1742 9.14736 12.2115C9.16913 12.2488 9.20645 12.2815 9.25933 12.3095C9.31221 12.3375 9.35264 12.3593 9.38064 12.3748C9.40863 12.3904 9.45995 12.4012 9.5346 12.4075C9.60925 12.4137 9.66058 12.4168 9.68857 12.4168H9.85187H10.0012C10.2065 12.4168 10.3589 12.409 10.4584 12.3935C10.5579 12.3779 10.6466 12.3313 10.7243 12.2535C10.8021 12.1757 10.841 12.056 10.841 11.8942C10.841 11.6827 10.8534 11.465 10.8783 11.2411C10.897 11.0109 10.9343 10.8305 10.9903 10.6998C11.0712 10.5008 11.3324 10.2208 11.7741 9.86003C12.6077 9.15707 13.1427 8.61587 13.3791 8.23639C13.6279 7.83204 13.7523 7.41524 13.7523 6.986C13.7523 6.17729 13.4102 5.48678 12.7259 4.91446C12.0603 4.30482 11.1458 4 9.9825 4C8.88763 4 8.00428 4.2986 7.33243 4.8958C6.71656 5.41835 6.36198 6.07154 6.26866 6.85537C6.25622 6.89269 6.25 6.9549 6.25 7.04199C6.25 7.29705 6.3402 7.51633 6.52061 7.69984C6.70101 7.88336 6.91563 7.97512 7.16446 7.97512C7.37597 7.97512 7.56571 7.90824 7.73367 7.77449C7.90163 7.64075 8.0105 7.47123 8.06026 7.26594H8.09759ZM10.0012 13.2939C9.62791 13.2939 9.30754 13.4246 9.04005 13.6858C8.77255 13.9471 8.6388 14.2644 8.6388 14.6376C8.6388 15.0047 8.77255 15.3235 9.04005 15.5941C9.30754 15.8647 9.62791 16 10.0012 16C10.3744 16 10.6948 15.8647 10.9623 15.5941C11.2298 15.3235 11.3635 15.0047 11.3635 14.6376C11.3635 14.2644 11.2298 13.9471 10.9623 13.6858C10.6948 13.4246 10.3744 13.2939 10.0012 13.2939Z' fill='white'/%3E%3C/svg%3E%0A";
+  document.getElementById('summaryneedsReviewIcon').alt = 'needs review icon';
+  document.getElementById('summarypassedIcon').src =
+    "data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.1429 0H2.85714C1.27919 0 0 1.27919 0 2.85714V17.1429C0 18.7208 1.27919 20 2.85714 20H17.1429C18.7208 20 20 18.7208 20 17.1429V2.85714C20 1.27919 18.7208 0 17.1429 0Z' fill='%233aa566'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.1781 5.3131C15.7942 5.80597 15.8941 6.70496 15.4012 7.32105L9.68694 14.4639C9.19407 15.08 8.29508 15.1799 7.67899 14.687C7.0629 14.1941 6.96301 13.2951 7.45589 12.6791L13.1702 5.5362C13.663 4.92011 14.562 4.82023 15.1781 5.3131Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4.70415 9.70455C5.26204 9.14666 6.16656 9.14666 6.72446 9.70455L9.5816 12.5617C10.1395 13.1196 10.1395 14.0241 9.5816 14.582C9.02371 15.1399 8.11919 15.1399 7.56129 14.582L4.70415 11.7249C4.14626 11.167 4.14626 10.2624 4.70415 9.70455Z' fill='white'/%3E%3C/svg%3E%0A";
+  document.getElementById('summarypassedIcon').alt = 'passed icon';
+</script>