@govtechsg/oobee 0.10.92 → 0.10.94

package/src/mergeAxeResults/itemsStore.ts

@@ -1,6 +1,7 @@
 import fs from 'fs-extra';
 import path from 'path';
 import readline from 'readline';
+import { consoleLogger } from '../logs.js';
 import type { ItemsInfo } from './types.js';
 
 export interface ItemsStoreEntry {
@@ -16,6 +17,7 @@ export interface ItemsStoreEntry {
 export class ItemsStore {
   private basePath: string;
   private ensuredDirs = new Set<string>();
+  private fileWriteQueues = new Map<string, Promise<void>>();
 
   constructor(storagePath: string) {
     this.basePath = path.join(storagePath, 'tmp-items');
@@ -40,8 +42,29 @@ export class ItemsStore {
   async appendPageItems(category: string, ruleId: string, entry: ItemsStoreEntry): Promise<void> {
     await this.ensureDir(category);
     const filePath = this.getRuleFilePath(category, ruleId);
-    const line = JSON.stringify(entry) + '\n';
-    await fs.appendFile(filePath, line, 'utf8');
+    let line = JSON.stringify(entry);
+
+    // JSON.stringify should never produce literal newlines inside strings, but HTML content
+    // from page evaluation may contain edge-case characters (e.g. unescaped control chars in
+    // non-spec-compliant innerHTML). Strip any embedded \r or \n that would break JSONL format readline parsing.
+    line = line.replace(/[\n\r]/g, (match) => {
+      if (match === '\n') return '\\n';
+      if (match === '\r') return '\\r';
+      return match;
+    });
+    line += '\n';
+
+    // Serialize writes per rule file to avoid concurrent append interleaving/truncation.
+    const previous = this.fileWriteQueues.get(filePath) ?? Promise.resolve();
+    const next = previous.then(() => fs.appendFile(filePath, line, 'utf8'));
+    this.fileWriteQueues.set(
+      filePath,
+      next.catch(() => {
+        // Keep queue alive for subsequent writes.
+      }),
+    );
+
+    await next;
   }
 
   async *readRuleItems(category: string, ruleId: string): AsyncGenerator<ItemsStoreEntry> {
@@ -51,9 +74,19 @@ export class ItemsStore {
     const fileStream = fs.createReadStream(filePath, { encoding: 'utf8' });
     const rl = readline.createInterface({ input: fileStream, crlfDelay: Infinity });
 
+    let lineNumber = 0;
     for await (const line of rl) {
-      if (line.trim()) {
+      lineNumber += 1;
+      if (!line.trim()) continue;
+
+      try {
         yield JSON.parse(line) as ItemsStoreEntry;
+      } catch (error) {
+        // Tolerate malformed/truncated JSONL lines (e.g. interrupted append) so report generation can continue.
+        const preview = line.slice(0, 200);
+        consoleLogger.warn(
+          `Skipping malformed itemsStore JSONL line ${lineNumber} in ${filePath}: ${(error as Error).message}. Content preview: ${preview}`,
+        );
       }
     }
   }
@@ -68,6 +101,7 @@ export class ItemsStore {
   }
 
   async cleanup(): Promise<void> {
+    await Promise.all(this.fileWriteQueues.values());
     await fs.rm(this.basePath, { recursive: true, force: true });
   }
 }

package/src/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/src/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/src/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/src/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/src/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/src/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/src/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/src/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/src/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/src/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/src/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/src/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;
   });
 

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

@@ -6,18 +6,32 @@
   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);
-    };
+  // Handle dynamically inserted custom-flow screenshots (about scan modal content is rendered later)
+  document.addEventListener(
+    'error',
+    event => {
+      const target = event.target;
+      if (target && target.classList && target.classList.contains('custom-flow-screenshot')) {
+        target.onerror = null;
+        target.remove();
+      }
+    },
+    true,
+  );
+
+  document.addEventListener('click', event => {
+    const screenshot = event.target.closest('.custom-flow-screenshot');
+    if (!screenshot) return;
+
+    event.preventDefault();
+
+    const container = screenshot.closest('.custom-flow-screenshot-container');
+    const link = container ? container.querySelector('.display-url-container a') : null;
+
+    const pageTitle = link?.textContent?.trim() || screenshot.getAttribute('alt') || 'Screenshot';
+    const pageUrl = link?.href || '';
+
+    openLightbox(screenshot.src, pageTitle, pageUrl);
   });
 
   lightbox.addEventListener('click', event => {
@@ -31,8 +45,9 @@
   });
 
   const offcanvasElem = document.getElementsByClassName('offcanvas')[0];
+  let offcanvasItem = null;
   if (offcanvasElem) {
-    const offcanvasItem = new bootstrap.Offcanvas(offcanvasElem);
+    offcanvasItem = new bootstrap.Offcanvas(offcanvasElem);
     offcanvasItem._config.keyboard = false; // Disable default keyboard handling
   }
 
@@ -43,27 +58,30 @@
     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();
-        }
+  // Use capture phase so lightbox handles Escape before Bootstrap modal/offcanvas handlers.
+  document.addEventListener(
+    'keydown',
+    event => {
+      if (event.key !== 'Escape') return;
+
+      if (lightbox.style.display === 'block') {
+        event.preventDefault();
+        event.stopPropagation();
+        event.stopImmediatePropagation();
+        closeLightbox();
+        return;
       }
 
-      if (pagesScannedModalItem._isShown) {
-        if (lightbox.style.display === 'block') {
-          event.preventDefault(); // Prevent default bootstrap behaviour
-          closeLightbox();
-        } else {
-          pagesScannedModalItem.hide();
-        }
+      if (offcanvasItem && offcanvasItem._isShown) {
+        offcanvasItem.hide();
       }
-    }
-  });
+
+      if (pagesScannedModalItem && pagesScannedModalItem._isShown) {
+        pagesScannedModalItem.hide();
+      }
+    },
+    true,
+  );
 
   function openLightbox(imgSrc, pageTitle, pageUrl) {
     lightbox.style.display = 'block';

package/src/static/ejs/partials/styles/header/SiteInfo.ejs

@@ -112,7 +112,7 @@
 
   .link {
     color: var(--a11y-majorelle-blue);
-    text-decoration: none;
+    text-decoration: underline;
   }
 
   .link:hover {