@govtechsg/oobee 0.10.76 → 0.10.78-alpha1

package/dist/services/s3Uploader.js

@@ -0,0 +1,127 @@
+import { S3Client, PutObjectCommand } from '@aws-sdk/client-s3';
+import fs from 'fs';
+import path from 'path';
+import mime from 'mime-types';
+import { consoleLogger } from '../logs.js';
+const REGION = process.env.AWS_REGION || 'ap-southeast-1';
+const s3Client = new S3Client({ region: REGION });
+export const uploadFileToS3 = async (localFilePath, s3Key, metadata) => {
+    const fileStream = fs.readFileSync(localFilePath);
+    const contentType = mime.lookup(localFilePath) || 'application/octet-stream';
+    const uploadParams = {
+        Bucket: process.env.S3_BUCKET_NAME,
+        Key: s3Key,
+        Body: fileStream,
+        ContentType: contentType,
+        ...(metadata && { Metadata: metadata }),
+    };
+    const command = new PutObjectCommand(uploadParams);
+    await s3Client.send(command);
+    const uploadedUrl = process.env.CLOUDFRONT_BASE_URL
+        ? `${process.env.CLOUDFRONT_BASE_URL}/${s3Key}`
+        : `https://${process.env.S3_BUCKET_NAME}.s3.${REGION}.amazonaws.com/${s3Key}`;
+    return uploadedUrl;
+};
+function getAllFiles(dir, rootDir) {
+    const entries = fs.readdirSync(dir, { withFileTypes: true });
+    return entries.reduce((files, entry) => {
+        const fullPath = path.join(dir, entry.name);
+        if (entry.isDirectory()) {
+            return files.concat(getAllFiles(fullPath, rootDir));
+        }
+        const relativePath = path.relative(rootDir, fullPath);
+        return files.concat(relativePath);
+    }, []);
+}
+export const uploadFolderToS3 = async (localFolderPath, s3Prefix, scanMetadata) => {
+    const uploadedFiles = [];
+    const files = getAllFiles(localFolderPath, localFolderPath);
+    const allowedFileExtRegex = /\.(html|csv|pdf|zip)$/;
+    const metadata = {
+        scanid: scanMetadata.scanId,
+        userid: scanMetadata.userId,
+        useremail: scanMetadata.email,
+    };
+    // Add optional metadata fields if present
+    if (scanMetadata.messageId) {
+        metadata.messageid = scanMetadata.messageId;
+    }
+    if (scanMetadata.amplitudeUserId) {
+        metadata.amplitudeuserid = scanMetadata.amplitudeUserId;
+    }
+    if (scanMetadata.deviceId) {
+        metadata.deviceid = scanMetadata.deviceId;
+    }
+    if (scanMetadata.orgId) {
+        metadata.orgid = scanMetadata.orgId;
+    }
+    if (scanMetadata.userRole) {
+        metadata.userrole = scanMetadata.userRole;
+    }
+    if (scanMetadata.siteName) {
+        metadata.sitename = scanMetadata.siteName;
+    }
+    if (scanMetadata.durationExceeded !== undefined) {
+        metadata.durationexceeded = scanMetadata.durationExceeded;
+    }
+    consoleLogger.info(`Uploading ${files.length} files to S3...`);
+    const uploadPromises = files.map(async (relativePath) => {
+        const fullPath = path.join(localFolderPath, relativePath);
+        const s3Path = `${s3Prefix}/${relativePath.replace(/\\/g, '/')}`;
+        try {
+            const uploadedUrl = await uploadFileToS3(fullPath, s3Path, metadata);
+            consoleLogger.info(`Uploaded: ${relativePath}`);
+            if (allowedFileExtRegex.test(relativePath)) {
+                return {
+                    filename: relativePath,
+                    s3Path,
+                    uploadedUrl,
+                };
+            }
+            return null;
+        }
+        catch (err) {
+            const e = err;
+            consoleLogger.error(`Failed to upload ${relativePath}: ${e.message}`);
+            throw new Error(`Failed to upload files to S3: ${e.message}`);
+        }
+    });
+    const results = await Promise.all(uploadPromises);
+    uploadedFiles.push(...results.filter((file) => file !== null));
+    consoleLogger.info(`Successfully uploaded ${uploadedFiles.length} files to S3 at ${s3Prefix}`);
+    return uploadedFiles;
+};
+export const isS3UploadEnabled = () => {
+    return !!(process.env.S3_BUCKET_NAME &&
+        process.env.OOBEE_SCAN_ID &&
+        process.env.OOBEE_USER_ID &&
+        process.env.OOBEE_USER_EMAIL);
+};
+export const getS3MetadataFromEnv = (siteName, durationExceeded) => {
+    const scanId = process.env.OOBEE_SCAN_ID;
+    const userId = process.env.OOBEE_USER_ID;
+    const email = process.env.OOBEE_USER_EMAIL;
+    if (!scanId || !userId || !email) {
+        return null;
+    }
+    return {
+        scanId,
+        userId,
+        email,
+        messageId: process.env.OOBEE_MESSAGE_ID,
+        amplitudeUserId: process.env.OOBEE_AMPLITUDE_USER_ID,
+        deviceId: process.env.OOBEE_DEVICE_ID,
+        orgId: process.env.OOBEE_ORG_ID,
+        userRole: process.env.OOBEE_USER_ROLE,
+        siteName,
+        durationExceeded: durationExceeded ? 'true' : undefined,
+    };
+};
+export const getS3UploadPrefix = () => {
+    const scanId = process.env.OOBEE_SCAN_ID;
+    const userId = process.env.OOBEE_USER_ID;
+    if (!scanId || !userId) {
+        return null;
+    }
+    return `users/${userId}/scans/${scanId}`;
+};

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

@@ -0,0 +1,9 @@
+<div id="allIssuesSection" class="card rounded mt-4">
+  <div class="card-body">
+    <div class="d-flex flex-row gap-5 mb-3">
+      <h2>All Issues</h2>
+      <%- include('./CategoryBadges') %>
+    </div>
+    <%- include('./FilterBar') %> <%- include('./IssuesTable') %>
+  </div>
+</div>

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

@@ -0,0 +1,82 @@
+<div class="category-badges-container">
+  <div class="category-item">
+    <div class="category-item-inner">
+      <span class="category-badge must-fix">Must Fix</span>
+
+      <span class="category-tooltip-wrapper">
+        <button
+          type="button"
+          class="category-tooltip-icon"
+          aria-describedby="mustFixTooltip"
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"
+               viewBox="0 0 14 14" fill="none" aria-hidden="true" focusable="false">
+            <path d="M6.3 11.2H7.7V9.8H6.3V11.2ZM7 0C3.136 0 0 3.136 0 7C0 10.864 3.136 14 7 14C10.864 14 14 10.864 14 7C14 3.136 10.864 0 7 0ZM7 12.6C3.913 12.6 1.4 10.087 1.4 7C1.4 3.913 3.913 1.4 7 1.4C10.087 1.4 12.6 3.913 12.6 7C12.6 10.087 10.087 12.6 7 12.6ZM7 2.8C5.453 2.8 4.2 4.053 4.2 5.6H5.6C5.6 4.83 6.23 4.2 7 4.2C7.77 4.2 8.4 4.83 8.4 5.6C8.4 7 6.3 6.825 6.3 9.1H7.7C7.7 7.525 9.8 7.35 9.8 5.6C9.8 4.053 8.547 2.8 7 2.8Z"
+                  fill="#38268B"/>
+          </svg>
+        </button>
+
+        <span class="category-tooltip-bubble" id="mustFixTooltip" role="tooltip">
+          Must Fix highlights issues based on the minimum accessibility standards
+          (Level A and AA). Fix them to achieve 20/20 WCAG Score.
+        </span>
+      </span>
+
+      <span><%= items.mustFix.rules.length %> issues</span>
+    </div>
+  </div>
+
+  <div class="category-item">
+    <div class="category-item-inner">
+      <span class="category-badge good-to-fix">Good to Fix</span>
+
+      <span class="category-tooltip-wrapper">
+        <button
+          type="button"
+          class="category-tooltip-icon"
+          aria-describedby="goodToFixTooltip"
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"
+               viewBox="0 0 14 14" fill="none" aria-hidden="true" focusable="false">
+            <path d="M6.3 11.2H7.7V9.8H6.3V11.2ZM7 0C3.136 0 0 3.136 0 7C0 10.864 3.136 14 7 14C10.864 14 14 10.864 14 7C14 3.136 10.864 0 7 0ZM7 12.6C3.913 12.6 1.4 10.087 1.4 7C1.4 3.913 3.913 1.4 7 1.4C10.087 1.4 12.6 3.913 12.6 7C12.6 10.087 10.087 12.6 7 12.6ZM7 2.8C5.453 2.8 4.2 4.053 4.2 5.6H5.6C5.6 4.83 6.23 4.2 7 4.2C7.77 4.2 8.4 4.83 8.4 5.6C8.4 7 6.3 6.825 6.3 9.1H7.7C7.7 7.525 9.8 7.35 9.8 5.6C9.8 4.053 8.547 2.8 7 2.8Z"
+                  fill="#38268B"/>
+          </svg>
+        </button>
+
+        <span class="category-tooltip-bubble" id="goodToFixTooltip" role="tooltip">
+          Good to Fix highlights issues based on WCAG Level AAA, and all industry
+          best practices.
+        </span>
+      </span>
+
+      <span><%= items.goodToFix.rules.length %> issues</span>
+    </div>
+  </div>
+
+  <div class="category-item">
+    <div class="category-item-inner">
+      <span class="category-badge needs-review">Manual Test</span>
+
+      <span class="category-tooltip-wrapper">
+        <button
+          type="button"
+          class="category-tooltip-icon"
+          aria-describedby="manualTestTooltip"
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14"
+               viewBox="0 0 14 14" fill="none" aria-hidden="true" focusable="false">
+            <path d="M6.3 11.2H7.7V9.8H6.3V11.2ZM7 0C3.136 0 0 3.136 0 7C0 10.864 3.136 14 7 14C10.864 14 14 10.864 14 7C14 3.136 10.864 0 7 0ZM7 12.6C3.913 12.6 1.4 10.087 1.4 7C1.4 3.913 3.913 1.4 7 1.4C10.087 1.4 12.6 3.913 12.6 7C12.6 10.087 10.087 12.6 7 12.6ZM7 2.8C5.453 2.8 4.2 4.053 4.2 5.6H5.6C5.6 4.83 6.23 4.2 7 4.2C7.77 4.2 8.4 4.83 8.4 5.6C8.4 7 6.3 6.825 6.3 9.1H7.7C7.7 7.525 9.8 7.35 9.8 5.6C9.8 4.053 8.547 2.8 7 2.8Z"
+                  fill="#38268B"/>
+          </svg>
+        </button>
+
+        <span class="category-tooltip-bubble" id="manualTestTooltip" role="tooltip">
+          Manual Test highlights issues that require human testing using screen
+          readers and keyboards.
+        </span>
+      </span>
+
+      <span><%= items.needsReview.rules.length %> issues</span>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,33 @@
+<div class="filter-bar">
+  <div class="filter-dropdowns">
+    <select id="severityFilter" class="filter-dropdown" aria-label="Filter by severity">
+      <option value="all">All Severity Groups</option>
+      <option value="mustFix">Must Fix</option>
+      <option value="goodToFix">Good to Fix</option>
+      <option value="needsReview">Manual Review</option>
+    </select>
+
+    <select id="criteriaFilter" class="filter-dropdown" aria-label="Filter by WCAG criteria">
+      <option value="all">All Failed Criteria</option>
+      <!-- Dynamically populated -->
+    </select>
+
+    <select id="disabilityFilter" class="filter-dropdown" aria-label="Filter by disability type">
+      <option value="all">All Disabilities</option>
+      <option value="Visual">Visual Disability</option>
+      <option value="Hearing">Hearing Disability</option>
+      <option value="Motor">Motor Disability</option>
+      <option value="Learning">Learning Disability</option>
+    </select>
+  </div>
+
+  <div class="search-container">
+    <input 
+      type="text" 
+      id="issuesSearchInput" 
+      class="search-input" 
+      placeholder="Search" 
+      aria-label="Search issues"
+    />
+  </div>
+</div>

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

@@ -0,0 +1,41 @@
+<div class="issues-table-container" tabindex="0">
+  <table class="issues-table" id="issuesTable">
+    <thead>
+      <tr>
+        <th class="sortable" role="button" 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">
+          <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%;">
+          <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" />
+            <path d="M7 15L12 20L17 15H7Z" fill="currentColor" opacity="1" />
+          </svg>
+        </th>
+        <th style="width: 30%;" aria-hidden="true"></th>
+      </tr>
+    </thead>
+    <tbody id="issuesTableBody">
+      <!-- Dynamically populated by script -->
+    </tbody>
+  </table>
+
+  <div id="emptyState" class="empty-state" style="display: none">
+    <p>No issues found matching your criteria.</p>
+  </div>
+
+  <div id="totalIssuesCount" class="total-issues-count">
+    <!-- Dynamically updated -->
+  </div>
+</div>

package/dist/static/ejs/partials/components/header/SiteInfo.ejs

@@ -0,0 +1,119 @@
+<div id="site-header">
+  <div class="d-flex flex-column">
+    <div id="site-container">
+      <!-- Site Name -->
+      <div class="d-flex align-items-center gap-2">
+        <svg
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M18.2222 4H5.77778C4.79111 4 4 4.8 4 5.77778V18.2222C4 19.2 4.79111 20 5.77778 20H18.2222C19.2 20 20 19.2 20 18.2222V5.77778C20 4.8 19.2089 4 18.2222 4ZM18.2222 18.2222H5.77778V7.55556H18.2222V18.2222ZM16.4444 12H7.55556V10.2222H16.4444V12ZM12.8889 15.5556H7.55556V13.7778H12.8889V15.5556Z"
+            fill="#686868"
+          />
+        </svg>
+        <div class="flex-grow-1">
+          <p class="label" id="siteName">N/A</p>
+        </div>
+      </div>
+
+      <!-- Site URL -->
+      <div class="d-flex align-items-center gap-2">
+        <svg
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <g clip-path="url(#clip0_343_424)">
+            <path
+              d="M5.52 12C5.52 10.632 6.632 9.52 8 9.52H11.2V8H8C5.792 8 4 9.792 4 12C4 14.208 5.792 16 8 16H11.2V14.48H8C6.632 14.48 5.52 13.368 5.52 12ZM8.8 12.8H15.2V11.2H8.8V12.8ZM16 8H12.8V9.52H16C17.368 9.52 18.48 10.632 18.48 12C18.48 13.368 17.368 14.48 16 14.48H12.8V16H16C18.208 16 20 14.208 20 12C20 9.792 18.208 8 16 8Z"
+              fill="#686868"
+            />
+          </g>
+          <defs>
+            <clipPath id="clip0_343_424">
+              <rect width="24" height="24" fill="white" />
+            </clipPath>
+          </defs>
+        </svg>
+        <a
+          id="siteUrl"
+          href="#"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="link d-flex align-items-center gap-1"
+          aria-label="Visit scanned page (opens in a new tab)"
+          ><span class="url-text link">N/A
+            <svg
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <g clip-path="url(#clip0_182_3910)">
+                <path
+                  d="M16.6667 16.6667H7.33333V7.33333H12V6H7.33333C6.59333 6 6 6.6 6 7.33333V16.6667C6 17.4 6.59333 18 7.33333 18H16.6667C17.4 18 18 17.4 18 16.6667V12H16.6667V16.6667ZM13.3333 6V7.33333H15.7267L9.17333 13.8867L10.1133 14.8267L16.6667 8.27333V10.6667H18V6H13.3333Z"
+                  fill="#5735DF"
+                />
+              </g>
+              <defs>
+                <clipPath id="clip0_182_3910">
+                  <rect width="24" height="24" fill="white" />
+                </clipPath>
+              </defs>
+            </svg>
+          </span>
+        </a>
+      </div>
+
+      <!-- Scanned On -->
+      <div class="d-flex align-items-center gap-2">
+        <svg
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <g clip-path="url(#clip0_343_419)">
+            <path
+              d="M11.992 4C7.576 4 4 7.584 4 12C4 16.416 7.576 20 11.992 20C16.416 20 20 16.416 20 12C20 7.584 16.416 4 11.992 4ZM12 18.4C8.464 18.4 5.6 15.536 5.6 12C5.6 8.464 8.464 5.6 12 5.6C15.536 5.6 18.4 8.464 18.4 12C18.4 15.536 15.536 18.4 12 18.4Z"
+              fill="#686868"
+            />
+            <path d="M12.25 8H11V12.5902L15.375 15L16 14.059L12.25 12.0164V8Z" fill="#4E4E4E" />
+          </g>
+          <defs>
+            <clipPath id="clip0_343_419">
+              <rect width="24" height="24" fill="white" />
+            </clipPath>
+          </defs>
+        </svg>
+        <p id="siteScannedOn" class="label">N/A</p>
+      </div>
+    </div>
+
+    <!-- More Details Link -->
+    <div class="d-flex justify-content-between">
+      <button
+        type="button"
+        class="wcag-link p-0 border-0 bg-transparent link"
+        data-bs-toggle="modal"
+        data-bs-target="#aboutScanModal"
+      >
+        <span class="link">More details about this scan</span>
+        <svg width="8" height="10" viewBox="0 0 6 10" aria-hidden="true" focusable="false">
+          <path
+            d="M0.726562 7.06L3.7799 4L0.726562 0.94L1.66656 0L5.66656 4L1.66656 8L0.726562 7.06Z"
+            fill="#5735DF"
+          />
+        </svg>
+      </button>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,15 @@
+<div id="aboutScanModal" class="modal fade" tabindex="-1" aria-labelledby="aboutScanModalLabel" aria-hidden="true">
+  <div class="modal-dialog modal-dialog-centered">
+    <div class="modal-content">
+      <div class="modal-header">
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <div class="modal-body">
+        <div class="about-scan-modal-grid">
+          <%- include("ScanDetails") %>
+          <%- include("ScanConfiguration") %>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,44 @@
+<section class="about-scan-details-right">
+  <section id="view-crawl" data-viewpane>
+    <h2 id="pagesScannedModalLabel" class="modal-title fw-bold">
+      NA
+    </h2>
+    <%- include('../../scannedPagesSegmentedTabs') %>
+    <div class="seg-panels">
+      <div id="pages-scanned" role="tabpanel">
+        <ul id="pagesScannedList" class="unbulleted-list">
+          <!-- dynamically populated -->
+        </ul>
+      </div>
+      <div id="pages-not-scanned" role="tabpanel" hidden>
+        <ul id="pagesNotScannedList" class="unbulleted-list">
+          <!-- dynamically populated -->
+        </ul>
+      </div>
+      <div id="pages-unsupported" role="tabpanel" hidden>
+        <ul id="unsupportedDocsList" class="unbulleted-list">
+          <!-- dynamically populated -->
+        </ul>
+      </div>
+    </div>
+  </section>
+
+  <section id="view-wcag" data-viewpane hidden>
+    <h2 class="modal-title fw-bold">
+      WCAG Automated Testing Coverage
+    </h2>
+    <p>
+      Only 20 WCAG 2.2 Success Criteria (A &amp; AA) can be checked reasonably through automated testing.
+    </p>
+    <p>
+      <a aria-label="Manual Testing" href="https://go.gov.sg/a11y-manual-testing" target="_blank" rel="noopener">
+        Manual Testing
+        <svg class="link-external-icon" width="16" height="12" viewBox="0 0 8 8" aria-hidden="true" focusable="false">
+          <path d="M7.11111 7.11111H0.888889V0.888889H4V0H0.888889C0.395556 0 0 0.4 0 0.888889V7.11111C0 7.6 0.395556 8 0.888889 8H7.11111C7.6 8 8 7.6 8 7.11111V4H7.11111V7.11111ZM4.88889 0V0.888889H6.48444L2.11556 5.25778L2.74222 5.88444L7.11111 1.51556V3.11111H8V0H4.88889Z" fill="#5735DF"/>
+        </svg>
+      </a> is still recommended as they involve subjective judgements and human interpretation, which cannot be fully automated.
+    </p>
+
+    <%- include('../../wcagCoverageDetails') %>
+  </section>
+</section>

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

@@ -0,0 +1,142 @@
+<aside id="scan-about" class="about-scan-details-left">
+  <h1>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">
+        <path d="M14.2222 0H1.77778C0.791111 0 0 0.8 0 1.77778V14.2222C0 15.2 0.791111 16 1.77778 16H14.2222C15.2 16 16 15.2 16 14.2222V1.77778C16 0.8 15.2089 0 14.2222 0ZM14.2222 14.2222H1.77778V3.55556H14.2222V14.2222ZM12.4444 8H3.55556V6.22222H12.4444V8ZM8.88889 11.5556H3.55556V9.77778H8.88889V11.5556Z" fill="#686868"/>
+      </svg>
+      <span id="websiteTitle" class="website-title">
+        N/A
+      </span>
+    </li>
+
+    <li>
+      <svg width="16" height="16" viewBox="0 0 16 8" aria-hidden="true" focusable="false">
+        <path d="M1.52 4C1.52 2.632 2.632 1.52 4 1.52H7.2V0H4C1.792 0 0 1.792 0 4C0 6.208 1.792 8 4 8H7.2V6.48H4C2.632 6.48 1.52 5.368 1.52 4ZM4.8 4.8H11.2V3.2H4.8V4.8ZM12 0H8.8V1.52H12C13.368 1.52 14.48 2.632 14.48 4C14.48 5.368 13.368 6.48 12 6.48H8.8V8H12C14.208 8 16 6.208 16 4C16 1.792 14.208 0 12 0Z" fill="#686868"/>
+      </svg>
+      <a id="urlScanned" href="#" target="_blank" rel="noopener noreferrer">
+        <span id="urlScannedText" class="url-scanned-text">
+          N/A
+        </span>
+        <svg class="link-external-icon" width="16" height="12" viewBox="0 0 8 8" aria-hidden="true" focusable="false">
+          <path d="M7.11111 7.11111H0.888889V0.888889H4V0H0.888889C0.395556 0 0 0.4 0 0.888889V7.11111C0 7.6 0.395556 8 0.888889 8H7.11111C7.6 8 8 7.6 8 7.11111V4H7.11111V7.11111ZM4.88889 0V0.888889H6.48444L2.11556 5.25778L2.74222 5.88444L7.11111 1.51556V3.11111H8V0H4.88889Z" fill="#5735DF"/>
+        </svg>
+      </a>
+    </li>
+    <li>
+      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M7.992 0C3.576 0 0 3.584 0 8C0 12.416 3.576 16 7.992 16C12.416 16 16 12.416 16 8C16 3.584 12.416 0 7.992 0ZM8 14.4C4.464 14.4 1.6 11.536 1.6 8C1.6 4.464 4.464 1.6 8 1.6C11.536 1.6 14.4 4.464 14.4 8C14.4 11.536 11.536 14.4 8 14.4Z" fill="#686868"/>
+        <path d="M8.25 4H7V8.59016L11.375 11L12 10.059L8.25 8.01639V4Z" fill="#4E4E4E"/>
+      </svg>
+      <span id="aboutStartTime">
+        N/A
+      </span>
+    </li>
+
+    <hr class="about-scan-divider" />
+
+    <% if (viewport !== null) { %>
+      <li>
+        <% if (viewport.startsWith('Desktop')) { %>
+          <svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M16.3636 0H1.63636C0.736364 0 0 0.72 0 1.6V11.2C0 12.08 0.736364 12.8 1.63636 12.8H7.36364V14.4H5.72727V16H12.2727V14.4H10.6364V12.8H16.3636C17.2636 12.8 18 12.08 18 11.2V1.6C18 0.72 17.2636 0 16.3636 0ZM16.3636 11.2H1.63636V1.6H16.3636V11.2Z" fill="#686868"/>
+          </svg>
+        <% } else if (viewport.startsWith('CustomWidth')) { %>
+          <svg width="16" height="14" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M14.5455 9.33333H16V10.8889H14.5455V9.33333ZM14.5455 6.22222H16V7.77778H14.5455V6.22222ZM16 12.4444H14.5455V14C15.2727 14 16 13.2222 16 12.4444ZM8.72727 0H10.1818V1.55556H8.72727V0ZM14.5455 3.11111H16V4.66667H14.5455V3.11111ZM14.5455 0V1.55556H16C16 0.777778 15.2727 0 14.5455 0ZM0 3.11111H1.45455V4.66667H0V3.11111ZM11.6364 0H13.0909V1.55556H11.6364V0ZM11.6364 12.4444H13.0909V14H11.6364V12.4444ZM1.45455 0C0.727273 0 0 0.777778 0 1.55556H1.45455V0ZM5.81818 0H7.27273V1.55556H5.81818V0ZM2.90909 0H4.36364V1.55556H2.90909V0ZM0 6.22222V12.4444C0 13.3 0.654545 14 1.45455 14H10.1818V6.22222H0ZM1.45455 12.4444L3.27273 9.94778L4.57455 11.62L6.39273 9.11556L8.72727 12.4444H1.45455Z" fill="#686868"/>
+          </svg>
+        <% } else { %>
+          <svg width="16" height="16" viewBox="0 0 16 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M2.66667 1.375H14.6667V0H2.66667C1.93333 0 1.33333 0.61875 1.33333 1.375V8.9375H0V11H9.33333V8.9375H2.66667V1.375ZM15.3333 2.75H11.3333C10.9667 2.75 10.6667 3.05938 10.6667 3.4375V10.3125C10.6667 10.6906 10.9667 11 11.3333 11H15.3333C15.7 11 16 10.6906 16 10.3125V3.4375C16 3.05938 15.7 2.75 15.3333 2.75ZM14.6667 8.9375H12V4.125H14.6667V8.9375Z" fill="#686868"/>
+          </svg>
+        <% } %>
+        <span id="viewport-text">
+          N/A
+        </span>
+      </li>
+    <% } %>
+
+    <li>
+      <svg width="16" height="16" viewBox="0 0 13 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M13 14.072V4.8L8.125 0H1.625C0.73125 0 0.00812519 0.72 0.00812519 1.6L0 14.4C0 15.28 0.723125 16 1.61687 16H11.375C11.7406 16 12.0656 15.88 12.3419 15.68L8.7425 12.136C8.0925 12.552 7.32875 12.8 6.5 12.8C4.2575 12.8 2.4375 11.008 2.4375 8.8C2.4375 6.592 4.2575 4.8 6.5 4.8C8.7425 4.8 10.5625 6.592 10.5625 8.8C10.5625 9.616 10.3106 10.368 9.88813 11L13 14.072ZM4.0625 8.8C4.0625 10.128 5.15125 11.2 6.5 11.2C7.84875 11.2 8.9375 10.128 8.9375 8.8C8.9375 7.472 7.84875 6.4 6.5 6.4C5.15125 6.4 4.0625 7.472 4.0625 8.8Z" fill="#686868"/>
+      </svg>
+      <button
+        type="button"
+        class="js-view-btn about-scan-toggle"
+        aria-controls="view-crawl"
+        aria-selected="true"
+      >
+        <div class="d-flex">
+          <div class="about-scan-link-row">
+            <span id="pagesScannedModalToggleTxt" class="about-us-type-of-scan-text">N/A</span>
+            <svg class="about-scan-link-chev" width="10" height="12" viewBox="0 0 6 10" aria-hidden="true" focusable="false">
+              <path d="M0.726562 7.06L3.7799 4L0.726562 0.94L1.66656 0L5.66656 4L1.66656 8L0.726562 7.06Z" fill="#5735DF"/>
+            </svg>
+          </div>
+        </div>
+      </button>
+    </li>
+
+    <li class="advanced-group">
+      <svg width="15" height="16" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <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>
+    </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">
+        <path d="M14.2222 1.77778V14.2222H1.77778V1.77778H14.2222ZM15.2 0H0.8C0.355556 0 0 0.355556 0 0.8V15.2C0 15.5556 0.355556 16 0.8 16H15.2C15.5556 16 16 15.5556 16 15.2V0.8C16 0.355556 15.5556 0 15.2 0ZM7.11111 3.55556H12.4444V5.33333H7.11111V3.55556ZM7.11111 7.11111H12.4444V8.88889H7.11111V7.11111ZM7.11111 10.6667H12.4444V12.4444H7.11111V10.6667ZM3.55556 3.55556H5.33333V5.33333H3.55556V3.55556ZM3.55556 7.11111H5.33333V8.88889H3.55556V7.11111ZM3.55556 10.6667H5.33333V12.4444H3.55556V10.6667Z" fill="#323232"/>
+      </svg>
+      <button
+        type="button"
+        class="js-view-btn about-scan-toggle"
+        aria-controls="view-wcag"
+        aria-selected="false"
+      >
+        <span class="wcag-criteria-label">
+          WCAG Automated Testing
+        </span>
+        <div class="about-scan-link-row">
+          <span class="about-scan-link-text">
+            20 (A &amp; AA) and 6 (AAA) Criteria
+          </span>
+          <svg class="about-scan-link-chev" width="10" height="12" viewBox="0 0 6 10" aria-hidden="true" focusable="false">
+            <path d="M0.726562 7.06L3.7799 4L0.726562 0.94L1.66656 0L5.66656 4L1.66656 8L0.726562 7.06Z" fill="#5735DF"/>
+          </svg>
+        </div>
+      </button>
+    </li>
+
+    <hr class="about-scan-divider" />
+
+    <li>
+      <span id="oobeeAppVersion" class="oobee-version-text">N/A</span>
+    </li>
+
+    <li id = "cypressScanAboutMetadata"></li>
+  </ul>
+</aside>

package/dist/static/ejs/partials/components/prioritiseIssues/IssueDetailCard.ejs

@@ -0,0 +1,36 @@
+<div id="a11yIssueDetailCard" class="issue-detail-card" style="display: none">
+  <div class="issue-detail-content">
+    <!-- Image placeholder -->
+    <div class="issue-detail-image-container">
+      <img id="issueDetailImage" src="" alt="Issue illustration" class="issue-detail-image" />
+    </div>
+
+    <!-- Issue title -->
+    <h1 id="issueDetailTitle" class="issue-detail-title"></h1>
+
+    <!-- Conformance badges -->
+    <div class="issue-detail-conformance">
+      <span class="mustfix-badge-label">Must Fix</span>
+      <div id="issueDetailConformance" class="issue-detail-conformance-badges"></div>
+    </div>
+
+    <!-- Long description -->
+    <p id="issueDetailLongDescription"></p>
+
+    <!-- Disability impact -->
+    <div id="issueDetailDisabilitySection" class="issue-detail-disability" style="display: none">
+      <div id="issueDetailDisabilityMessage" class="info-alert" role="alert"></div>
+    </div>
+
+    <!-- View issue details button -->
+    <button id="viewIssueDetailsBtn" class="btn-view-issue-details">
+      View issue details
+      <svg width="8" height="10" viewBox="0 0 6 10" aria-hidden="true" focusable="false">
+        <path
+          d="M0.726562 7.06L3.7799 4L0.726562 0.94L1.66656 0L5.66656 4L1.66656 8L0.726562 7.06Z"
+          fill="#5735DF"
+        />
+      </svg>
+    </button>
+  </div>
+</div>