@govtechsg/oobee 0.10.93 → 0.10.95

package/dist/logs.js

@@ -35,6 +35,10 @@ else {
 export const errorsTxtPath = path.join(basePath, `${uuid}.txt`);
 const consoleLogger = createLogger({
     silent: !(process.env.RUNNING_FROM_PH_GUI || process.env.OOBEE_VERBOSE),
+    // exitOnError: false — Winston logs uncaught exceptions but does not call process.exit().
+    // Process lifecycle is controlled by psTreeHandler in combine.ts, which suppresses known
+    // benign errors (e.g. Playwright post-close connection errors) and rethrows real ones.
+    exitOnError: false,
     format: combine(timestamp({ format: 'YYYY-MM-DD HH:mm:ss' }), logFormat),
     transports: [
         new transports.Console({ level: 'info' }),
@@ -49,6 +53,8 @@ const consoleLogger = createLogger({
 // Also used in common functions to not link internal information
 // if running from mass scanner, log out errors in console
 const silentLogger = createLogger({
+    // exitOnError: false — see consoleLogger comment above.
+    exitOnError: false,
     format: combine(timestamp({ format: 'YYYY-MM-DD HH:mm:ss' }), logFormat),
     transports: [
         new transports.File({

package/dist/mergeAxeResults/jsonArtifacts.js

@@ -227,7 +227,12 @@ const writeJsonFileAndCompressedJsonFile = async (data, storagePath, filename, i
 const writeJsonAndBase64Files = async (allIssues, storagePath, itemsStore) => {
     const { items, ...rest } = allIssues;
     const { jsonFilePath: scanDataJsonFilePath, base64FilePath: scanDataBase64FilePath } = await writeJsonFileAndCompressedJsonFile(rest, storagePath, 'scanData');
-    const { jsonFilePath: scanItemsJsonFilePath, base64FilePath: scanItemsBase64FilePath } = await writeJsonFileAndCompressedJsonFile({ oobeeAppVersion: allIssues.oobeeAppVersion, ...items }, storagePath, 'scanItems', itemsStore);
+    // Disk space: passed items excluded from scanItems.json to reduce disk usage.
+    // Passed counts are still in scanData.json and the embedded report payload (scanItems-light).
+    // To revert, remove the destructure line and restore the original argument:
+    // { oobeeAppVersion: allIssues.oobeeAppVersion, ...items }
+    const { passed: _passedItems, ...itemsWithoutPassed } = items;
+    const { jsonFilePath: scanItemsJsonFilePath, base64FilePath: scanItemsBase64FilePath } = await writeJsonFileAndCompressedJsonFile({ oobeeAppVersion: allIssues.oobeeAppVersion, ...itemsWithoutPassed }, storagePath, 'scanItems', itemsStore);
     ['mustFix', 'goodToFix', 'needsReview', 'passed'].forEach(category => {
         if (items[category].rules && Array.isArray(items[category].rules)) {
             items[category].rules.forEach(rule => {

package/dist/mergeAxeResults.js

@@ -256,6 +256,16 @@ const cleanUpJsonFiles = async (filesToDelete) => {
     });
 };
 const writeSummaryPdf = async (storagePath, pagesScanned, filename = 'summary', browser, _userDataDirectory) => {
+    // Flush stale browser temp files before launching PDF browser (Docker only,
+    // where TMPDIR is a per-scan subdirectory we control).
+    if (process.env.TMPDIR && fs.existsSync('/.dockerenv')) {
+        try {
+            fs.emptyDirSync(process.env.TMPDIR);
+        }
+        catch {
+            // Best-effort; locked files from prior browser sessions are non-fatal.
+        }
+    }
     const renderPdfWithBrowser = async (browserToUse) => {
         let browserInstance;
         let context;
@@ -390,14 +400,21 @@ const pushResults = async (pageResults, allIssues, isCustomFlow, itemsStore) =>
                     metadata,
                     itemsCount: items.length,
                 };
-                await itemsStore.appendPageItems(category, rule, {
-                    url,
-                    pageTitle,
-                    items,
-                    pageIndex,
-                    pageImagePath,
-                    metadata,
-                });
+                // Disk space: skip storing passed items in itemsStore.
+                // To revert, remove the `if` guard and use the original call directly:
+                // await itemsStore.appendPageItems(category, rule, {
+                //   url, pageTitle, items, pageIndex, pageImagePath, metadata,
+                // });
+                if (category !== 'passed') {
+                    await itemsStore.appendPageItems(category, rule, {
+                        url,
+                        pageTitle,
+                        items,
+                        pageIndex,
+                        pageImagePath,
+                        metadata,
+                    });
+                }
             }
             else if (!(url in currRuleFromAllIssues.pagesAffected)) {
                 currRuleFromAllIssues.pagesAffected[url] = {
@@ -405,12 +422,19 @@ const pushResults = async (pageResults, allIssues, isCustomFlow, itemsStore) =>
                     itemsCount: items.length,
                     ...(filePath && { filePath }),
                 };
-                await itemsStore.appendPageItems(category, rule, {
-                    url,
-                    pageTitle,
-                    items,
-                    ...(filePath && { filePath }),
-                });
+                // Disk space: skip storing passed items in itemsStore.
+                // To revert, remove the `if` guard and use the original call directly:
+                // await itemsStore.appendPageItems(category, rule, {
+                //   url, pageTitle, items, ...(filePath && { filePath }),
+                // });
+                if (category !== 'passed') {
+                    await itemsStore.appendPageItems(category, rule, {
+                        url,
+                        pageTitle,
+                        items,
+                        ...(filePath && { filePath }),
+                    });
+                }
             }
         }
     }
@@ -708,7 +732,9 @@ generateJsonFiles = false, preferredBrowser) => {
     }
     populateScanPagesDetail(allIssues);
     // Build htmlGroups in a second pass from disk-backed items
-    for (const category of ['mustFix', 'goodToFix', 'needsReview', 'passed']) {
+    // Disk space: 'passed' removed from this loop (no items stored in itemsStore for passed).
+    // To revert, restore: ['mustFix', 'goodToFix', 'needsReview', 'passed']
+    for (const category of ['mustFix', 'goodToFix', 'needsReview']) {
         for (const rule of allIssues.items[category].rules) {
             for await (const entry of itemsStore.readRuleItems(category, rule.rule)) {
                 buildHtmlGroups(rule, entry.items, entry.url);

package/dist/static/ejs/partials/components/allIssues/CategoryBadges.ejs

@@ -7,6 +7,7 @@
         <button
           type="button"
           class="category-tooltip-icon"
+          aria-label="About Must Fix category"
           aria-describedby="mustFixTooltip"
         >
           <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"
@@ -34,6 +35,7 @@
         <button
           type="button"
           class="category-tooltip-icon"
+          aria-label="About Good to Fix category"
           aria-describedby="goodToFixTooltip"
         >
           <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"
@@ -61,6 +63,7 @@
         <button
           type="button"
           class="category-tooltip-icon"
+          aria-label="About Manual Test category"
           aria-describedby="manualTestTooltip"
         >
           <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"

package/dist/static/ejs/partials/components/allIssues/IssuesTable.ejs

@@ -2,21 +2,21 @@
   <table class="issues-table" id="issuesTable">
     <thead>
       <tr>
-        <th class="sortable" role="button" tabindex="0" aria-sort="none" style="width: 15%;">
+        <th class="sortable" tabindex="0" aria-sort="none" style="width: 15%;">
           <span>Severity</span>
           <svg class="sort-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true">
             <path d="M7 9L12 4L17 9H7Z" fill="currentColor" opacity="1" />
             <path d="M7 15L12 20L17 15H7Z" fill="currentColor" opacity="0.3" />
           </svg>
         </th>
-        <th class="sortable" role="button" tabindex="0" aria-sort="none">
+        <th class="sortable" tabindex="0" aria-sort="none">
           <span>Issue Name</span>
           <svg class="sort-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true">
             <path d="M7 9L12 4L17 9H7Z" fill="currentColor" opacity="0.3" />
             <path d="M7 15L12 20L17 15H7Z" fill="currentColor" opacity="1" />
           </svg>
         </th>
-        <th class="sortable" role="button" tabindex="0" aria-sort="descending" style="width: 15%;">
+        <th class="sortable" tabindex="0" aria-sort="descending" style="width: 15%;">
           <span>Occurrence</span>
           <svg class="sort-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true">
             <path d="M7 9L12 4L17 9H7Z" fill="currentColor" opacity="0.3" />

package/dist/static/ejs/partials/components/header/aboutScanModal/AboutScanModal.ejs

@@ -1,4 +1,4 @@
-<div id="aboutScanModal" class="modal fade" tabindex="-1" aria-labelledby="aboutScanModalLabel" aria-hidden="true">
+<div id="aboutScanModal" class="modal fade" tabindex="-1" aria-label="About this scan" aria-hidden="true">
   <div class="modal-dialog modal-dialog-centered">
     <div class="modal-content">
       <div class="modal-header">

package/dist/static/ejs/partials/components/header/aboutScanModal/ScanConfiguration.ejs

@@ -5,17 +5,17 @@
     </h2>
     <%- include('../../scannedPagesSegmentedTabs') %>
     <div class="seg-panels">
-      <div id="pages-scanned" role="tabpanel">
+      <div id="pages-scanned" role="tabpanel" aria-labelledby="seg-scanned">
         <ul id="pagesScannedList" class="unbulleted-list">
           <!-- dynamically populated -->
         </ul>
       </div>
-      <div id="pages-not-scanned" role="tabpanel" hidden>
+      <div id="pages-not-scanned" role="tabpanel" aria-labelledby="seg-not-scanned" hidden>
         <ul id="pagesNotScannedList" class="unbulleted-list">
           <!-- dynamically populated -->
         </ul>
       </div>
-      <div id="pages-unsupported" role="tabpanel" hidden>
+      <div id="pages-unsupported" role="tabpanel" aria-labelledby="seg-unsupported" hidden>
         <ul id="unsupportedDocsList" class="unbulleted-list">
           <!-- dynamically populated -->
         </ul>

package/dist/static/ejs/partials/components/header/aboutScanModal/ScanDetails.ejs

@@ -1,5 +1,5 @@
 <aside id="scan-about" class="about-scan-details-left">
-  <h1>About this scan</h1>
+  <h1 id="aboutScanModalLabel">About this scan</h1>
   <ul>
     <li>
       <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -33,7 +33,9 @@
       </span>
     </li>
 
-    <hr class="about-scan-divider" />
+    <li class="about-scan-divider-item" aria-hidden="true">
+      <hr class="about-scan-divider" />
+    </li>
 
     <% if (viewport !== null) { %>
       <li>
@@ -64,7 +66,7 @@
         type="button"
         class="js-view-btn about-scan-toggle"
         aria-controls="view-crawl"
-        aria-selected="true"
+        aria-expanded="true"
       >
         <div class="d-flex">
           <div class="about-scan-link-row">
@@ -82,30 +84,33 @@
         <path d="M13.2346 8.78333C13.2668 8.53333 13.2828 8.275 13.2828 8C13.2828 7.73333 13.2668 7.46667 13.2266 7.21667L14.857 5.9C15.0016 5.78333 15.0418 5.55833 14.9534 5.39167L13.4113 2.625C13.315 2.44167 13.1142 2.38333 12.9375 2.44167L11.0179 3.24167C10.6163 2.925 10.1906 2.65833 9.71675 2.45833L9.42761 0.341667C9.39548 0.141667 9.23485 0 9.04209 0H5.95791C5.76515 0 5.61255 0.141667 5.58042 0.341667L5.29128 2.45833C4.81741 2.65833 4.3837 2.93333 3.99015 3.24167L2.07057 2.44167C1.89387 2.375 1.69308 2.44167 1.5967 2.625L0.0626475 5.39167C-0.0337329 5.56667 -0.00160615 5.78333 0.159028 5.9L1.78946 7.21667C1.7493 7.46667 1.71718 7.74167 1.71718 8C1.71718 8.25833 1.73324 8.53333 1.7734 8.78333L0.142964 10.1C-0.00160614 10.2167 -0.0417645 10.4417 0.0465841 10.6083L1.58867 13.375C1.68505 13.5583 1.88584 13.6167 2.06254 13.5583L3.98212 12.7583C4.3837 13.075 4.80938 13.3417 5.28325 13.5417L5.57239 15.6583C5.61255 15.8583 5.76515 16 5.95791 16H9.04209C9.23485 16 9.39548 15.8583 9.41958 15.6583L9.70872 13.5417C10.1826 13.3417 10.6163 13.075 11.0099 12.7583L12.9294 13.5583C13.1061 13.625 13.3069 13.5583 13.4033 13.375L14.9454 10.6083C15.0418 10.425 15.0016 10.2167 14.849 10.1L13.2346 8.78333ZM7.5 11C5.90972 11 4.60859 9.65 4.60859 8C4.60859 6.35 5.90972 5 7.5 5C9.09028 5 10.3914 6.35 10.3914 8C10.3914 9.65 9.09028 11 7.5 11Z" fill="#686868"/>
       </svg>
 
-      <div>
-        Advanced scan options enabled
+      <div class="advanced-group-content">
+        <div>
+          Advanced scan options enabled
+        </div>
+
+        <ul class="advanced-sublist">
+          <% if (advancedScanOptionsSummaryItems.showIncludeScreenshots) { %>
+            <li class="advanced-sublist-li">Include screenshots</li>
+          <% } %>
+          <% if (advancedScanOptionsSummaryItems.showAllowSubdomains) { %>
+            <li class="advanced-sublist-li">Allow subdomains for scans</li>
+          <% } %>
+          <% if (advancedScanOptionsSummaryItems.showEnableCustomChecks) { %>
+            <li class="advanced-sublist-li">Enable custom checks</li>
+          <% } %>
+          <% if (advancedScanOptionsSummaryItems.showEnableWcagAaa) { %>
+            <li class="advanced-sublist-li">Enable WCAG AAA checks</li>
+          <% } %>
+          <% if (advancedScanOptionsSummaryItems.showSlowScanMode) { %>
+            <li class="advanced-sublist-li">Slow scan mode</li>
+          <% } %>
+          <% if (advancedScanOptionsSummaryItems.showAdhereRobots) { %>
+            <li class="advanced-sublist-li">Adhere to robots.txt</li>
+          <% } %>
+        </ul>
       </div>
     </li>
-    <ul class="advanced-sublist">
-      <% if (advancedScanOptionsSummaryItems.showIncludeScreenshots) { %>
-        <li class="advanced-sublist-li">Include screenshots</li>
-      <% } %>
-      <% if (advancedScanOptionsSummaryItems.showAllowSubdomains) { %>
-        <li class="advanced-sublist-li">Allow subdomains for scans</li>
-      <% } %>
-      <% if (advancedScanOptionsSummaryItems.showEnableCustomChecks) { %>
-        <li class="advanced-sublist-li">Enable custom checks</li>
-      <% } %>
-      <% if (advancedScanOptionsSummaryItems.showEnableWcagAaa) { %>
-        <li class="advanced-sublist-li">Enable WCAG AAA checks</li>
-      <% } %>
-      <% if (advancedScanOptionsSummaryItems.showSlowScanMode) { %>
-        <li class="advanced-sublist-li">Slow scan mode</li>
-      <% } %>
-      <% if (advancedScanOptionsSummaryItems.showAdhereRobots) { %>
-        <li class="advanced-sublist-li">Adhere to robots.txt</li>
-      <% } %>
-    </ul>
 
     <li>
       <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -115,7 +120,7 @@
         type="button"
         class="js-view-btn about-scan-toggle"
         aria-controls="view-wcag"
-        aria-selected="false"
+        aria-expanded="false"
       >
         <span class="wcag-criteria-label">
           WCAG Automated Testing
@@ -131,7 +136,9 @@
       </button>
     </li>
 
-    <hr class="about-scan-divider" />
+    <li class="about-scan-divider-item" aria-hidden="true">
+      <hr class="about-scan-divider" />
+    </li>
 
     <li>
       <span id="oobeeAppVersion" class="oobee-version-text">N/A</span>

package/dist/static/ejs/partials/components/ruleModal/ruleOffcanvas.ejs

@@ -129,6 +129,7 @@
                     <div
                       id="pagesAccordionContent"
                       class="accordion-collapse collapse"
+                      role="region"
                       aria-labelledby="pagesAccordionHeader"
                       data-bs-parent="#pagesAccordion"
                     >

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

@@ -1,9 +1,12 @@
 <div class="segmented-tabs" role="tablist" aria-label="Crawl views">
   <button
     type="button"
+    id="seg-scanned"
     class="seg-pill"
+    role="tab"
     aria-controls="pages-scanned"
     aria-selected="true"
+    tabindex="0"
     data-tab-target="#pages-scanned"
   >
     <span id="totalPagesScannedLabel">
@@ -18,8 +21,10 @@
     type="button"
     id="seg-not-scanned"
     class="seg-pill"
+    role="tab"
     aria-controls="pages-not-scanned"
     aria-selected="false"
+    tabindex="-1"
     data-tab-target="#pages-not-scanned"
   >
     <span id="totalPagesNotScannedLabel">
@@ -34,8 +39,10 @@
     type="button"
     id="seg-unsupported"
     class="seg-pill"
+    role="tab"
     aria-controls="pages-unsupported"
     aria-selected="false"
+    tabindex="-1"
     data-tab-target="#pages-unsupported"
   >
     <span id="totalUnsupportedDocsLabel">

package/dist/static/ejs/partials/components/wcagCoverageDetails.ejs

@@ -1,15 +1,15 @@
 <div id="wcagCoverage" class="my-3">
-  <h5 class="fw-semibold mb-2">
-    <span id="wcagAALabelCount">20</span> (A &amp; AA) WCAG Success Criteria
-  </h5>
+  <h3 class="wcag-criteria-heading fw-semibold mb-2">
+    <span id="wcagAALabelCount">20</span> (A & AA) WCAG Success Criteria
+  </h3>
   <div class="wcag-box">
     <ul id="wcagLinksListAA" class="wcag-grid list-unstyled m-0">
       <!-- dynamically populated -->
     </ul>
   </div>
-  <h5 class="fw-semibold mt-4 mb-2">
+  <h3 class="wcag-criteria-heading fw-semibold mt-4 mb-2">
     <span id="wcagAAALabelCount">6</span> (AAA) WCAG Success Criteria
-  </h5>
+  </h3>
   <div class="wcag-box">
     <ul id="wcagLinksListAAA" class="wcag-grid list-unstyled m-0">
       <!-- dynamically populated -->

package/dist/static/ejs/partials/scripts/header/aboutScanModal/AboutScanModal.ejs

@@ -6,8 +6,8 @@
     function showPane(targetId) {
       // hide all panes
       panes.forEach(p => p.hidden = true);
-      // deselect all buttons
-      btns.forEach(b => b.setAttribute('aria-selected', 'false'));
+      // collapse all buttons
+      btns.forEach(b => b.setAttribute('aria-expanded', 'false'));
 
       // show the requested pane
       const pane = document.getElementById(targetId);
@@ -16,7 +16,7 @@
 
         // mark the controlling button active
         const btn = btns.find(b => b.getAttribute('aria-controls') === targetId);
-        if (btn) btn.setAttribute('aria-selected', 'true');
+        if (btn) btn.setAttribute('aria-expanded', 'true');
 
         // move focus to the pane heading for screen readers/keyboard users
         const h = pane.querySelector('h4, h3, h2, [role="heading"]');

package/dist/static/ejs/partials/scripts/prioritiseIssues/PrioritiseIssues.ejs

@@ -84,11 +84,13 @@
                 : '';
 
             return `
-              <li class="priority-issue-item d-flex g-one" data-rule-id="${issue.ruleId}" role="button" tabindex="0">
-                <div class="d-flex justify-content-between align-items-center w-90">
-                    <div class="priority-issue-title">${issue.description}</div>
-                    ${disabilityBadges}
-                </div>
+              <li class="priority-issue-item" data-rule-id="${issue.ruleId}">
+                <button type="button" class="priority-issue-action d-flex g-one" aria-pressed="false">
+                  <div class="d-flex justify-content-between align-items-center w-90">
+                      <div class="priority-issue-title">${issue.description}</div>
+                      ${disabilityBadges}
+                  </div>
+                </button>
               </li>
             `;
           })
@@ -122,7 +124,7 @@
               data-bs-parent="#prioritiseIssuesAccordion"
             >
               <div class="accordion-body">
-                <ul class="priority-issues-list">
+                <ul class="priority-issues-list" aria-label="Priority issues">
                   ${issuesListHTML}
                 </ul>
               </div>
@@ -135,19 +137,25 @@
     accordionContainer.innerHTML = accordionHTML;
 
     document.querySelectorAll('.priority-issue-item').forEach(item => {
+      const actionButton = item.querySelector('.priority-issue-action');
+      if (!actionButton) return;
+
       const selectIssue = function () {
         const ruleId = item.getAttribute('data-rule-id');
 
         document.querySelectorAll('.priority-issue-item').forEach(el => {
           el.classList.remove('active');
-          el.setAttribute('aria-selected', 'false');
+          const button = el.querySelector('.priority-issue-action');
+          if (button) {
+            button.setAttribute('aria-pressed', 'false');
+          }
         });
         document.querySelectorAll('.priority-issue-title').forEach(el => {
           el.classList.remove('active');
         });
 
         item.classList.add('active');
-        item.setAttribute('aria-selected', 'true');
+        actionButton.setAttribute('aria-pressed', 'true');
         const title = item.querySelector('.priority-issue-title');
         if (title) {
           title.classList.add('active');
@@ -167,16 +175,7 @@
         }
       };
 
-      // Click handler
-      item.addEventListener('click', selectIssue);
-
-      // Keyboard handler
-      item.addEventListener('keydown', function (event) {
-        if (event.key === 'Enter' || event.key === ' ') {
-          event.preventDefault();
-          selectIssue();
-        }
-      });
+      actionButton.addEventListener('click', selectIssue);
     });
 
     // Automatically open first accordion and select first issue
@@ -197,7 +196,10 @@
       const firstIssueItem = document.querySelector('.priority-issue-item');
       if (firstIssueItem) {
         firstIssueItem.classList.add('active');
-        firstIssueItem.setAttribute('aria-selected', 'true');
+        const firstIssueButton = firstIssueItem.querySelector('.priority-issue-action');
+        if (firstIssueButton) {
+          firstIssueButton.setAttribute('aria-pressed', 'true');
+        }
         const firstIssueTitle = firstIssueItem.querySelector('.priority-issue-title');
         if (firstIssueTitle) {
           firstIssueTitle.classList.add('active');

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

@@ -451,7 +451,7 @@
             <div id="${accordionId}-content" class="accordion-collapse collapse" aria-labelledby="${accordionId}-title">
               <div class="accordion-body p-3">
                 ${isCustomFlow
-                  ? createCustomFlowContent(page)
+                  ? createCustomFlowContent(page, ruleInCategory)
                   :
                   `<div class="d-flex align-items-center gap-1 accordion-link" style="    word-wrap: break-word; word-break: break-word;">
                     <a href="${page.url}" target="_blank">${page.url}
@@ -486,16 +486,46 @@
     return accordion;
   }
 
-  function createCustomFlowContent(page) {
+  function getCustomFlowPageScreenshot(page, ruleInCategory) {
+    if (page && page.pageImagePath) return page.pageImagePath;
+
+    // Use same source-of-truth as scanAboutModal.
+    const scannedPages =
+      typeof scanData !== 'undefined' &&
+      scanData &&
+      Array.isArray(scanData.pagesScanned)
+        ? scanData.pagesScanned
+        : [];
+
+    if (page) {
+      const matchByUrl = scannedPages.find((p) => p && p.url === page.url && p.pageImagePath);
+      if (matchByUrl) return matchByUrl.pageImagePath;
+
+      const matchByTitle = scannedPages.find(
+        (p) => p && p.pageTitle === page.pageTitle && p.pageImagePath,
+      );
+      if (matchByTitle) return matchByTitle.pageImagePath;
+    }
+
+    return '';
+  }
+
+  function createCustomFlowContent(page, ruleInCategory) {
+    const pageScreenshot = getCustomFlowPageScreenshot(page, ruleInCategory);
+
     return `
       <div class="custom-flow-screenshot-container">
           <div class="custom-flow-thumb">
-            <img
-              src="${page.pageImagePath}"
-              alt="Screenshot of ${page.url}"
-              class="custom-flow-screenshot"
-              onerror="this.onerror = null; this.remove();"
-            >
+            ${
+              pageScreenshot
+                ? `<img
+                    src="${pageScreenshot}"
+                    alt="Screenshot of ${page.url}"
+                    class="custom-flow-screenshot"
+                    onerror="this.onerror = null; this.remove();"
+                  >`
+                : ''
+            }
           </div>
           <div class="display-url-container">
             <div><a href="${page.url}" target="_blank">${page.url}</a></div>
@@ -538,6 +568,7 @@
 
   function setupCustomFlowScreenshot(accordion, page) {
     const customScreenshotElem = accordion.getElementsByClassName('custom-flow-screenshot')[0];
+    if (!customScreenshotElem) return;
 
     customScreenshotElem.onerror = function(event) {
       this.onerror = null;

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

@@ -1,21 +1,27 @@
 <script>
   document.addEventListener('click', function (e) {
-    const btn = e.target.closest('.seg-pill');
+    const btn = e.target.closest('.seg-pill[role="tab"]');
     if (!btn) return;
 
-    const container = btn.closest('.segmented-tabs');
+    const container = btn.closest('.segmented-tabs[role="tablist"]');
+    if (!container) return;
+
     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')
-    );
+    container.querySelectorAll('.seg-pill[role="tab"]').forEach((p) => {
+      p.setAttribute('aria-selected', 'false');
+      p.setAttribute('tabindex', '-1');
+    });
+
     btn.setAttribute('aria-selected', 'true');
+    btn.setAttribute('tabindex', '0');
 
     document
       .querySelectorAll('.seg-panels > [role="tabpanel"]')
       .forEach((p) => (p.hidden = true));
+
     panel.hidden = false;
   });