@govtechsg/oobee 0.10.70 → 0.10.72

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

@@ -0,0 +1,61 @@
+<script>
+  function createExternalIcon() {
+    const ns = "http://www.w3.org/2000/svg";
+    const svg = document.createElementNS(ns, "svg");
+    svg.setAttribute("width", "16");
+    svg.setAttribute("height", "12");
+    svg.setAttribute("viewBox", "0 0 8 8");
+    svg.setAttribute("aria-hidden", "true");
+    svg.setAttribute("focusable", "false");
+
+    const path = document.createElementNS(ns, "path");
+    path.setAttribute(
+      "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"
+    );
+    path.setAttribute("fill", "#5735DF");
+    svg.appendChild(path);
+    return svg;
+  }
+
+  const scanDataTop10Card = () => {
+    const topIssuesList = document.getElementById('top-issues-list');
+
+    scanData.topTenPagesWithMostIssues.forEach(page => {
+      if (page.totalIssues !== 0) {
+        const listItem = document.createElement('li');
+        listItem.className = 'd-flex justify-content-between';
+
+        const link = document.createElement('a');
+        link.href = page.url;
+        link.target = '_blank';
+        link.rel = 'noopener';
+        link.className = 'page-links';
+
+        const text = page.pageTitle.length > 0 ? page.pageTitle : page.url;
+        const textSpan = document.createElement('span');
+        textSpan.className = 'link-text';
+        textSpan.textContent = text;
+
+        link.title = text;
+
+        link.appendChild(textSpan);
+        link.appendChild(createExternalIcon());
+
+        const issuesSpan = document.createElement('span');
+        issuesSpan.className = 'ms-4 issues-badge';
+        const issues = Number(page.totalIssues) || 0;
+        const occ = Number(page.totalOccurrences) || 0;
+        const issueWord = issues === 1 ? 'issue' : 'issues';
+        const occWord = occ === 1 ? 'occurrence' : 'occurrences';
+        issuesSpan.textContent = `${issues} ${issueWord} (${occ} occ.)`;
+
+        listItem.appendChild(link);
+        listItem.appendChild(issuesSpan);
+        topIssuesList.appendChild(listItem);
+      }
+    });
+  };
+
+  scanDataTop10Card();
+</script>

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

@@ -421,6 +421,7 @@
   function escapeHtmlStringForArg(string) {
     return htmlEscapeString(string)
       .replaceAll(''', "\\'")
+      .replace(/\r?\n/g, '\\n')
       .replace(/>\s+(.*?)\s+<\//g, '>$1</');
   }
 
@@ -435,4 +436,18 @@
       .replace(/"/g, '"')
       .replace(/'/g, ''');
   }
+
+  // Format string from wcag111 to WCAG 1.1.1
+  function formatWcagId(wcag) {
+    if (!wcag) return '';
+    const numbers = wcag.replace('wcag', '').split('');
+    if (numbers.length === 3) {
+      return `WCAG ${numbers[0]}.${numbers[1]}.${numbers[2]}`;
+    } else if (numbers.length === 4) {
+      return `WCAG ${numbers[0]}.${numbers[1]}.${numbers[2]}${numbers[3]}`;
+    } else if (numbers.length === 5) {
+      return `WCAG ${numbers[0]}.${numbers[1]}.${numbers.slice(2).join('')}`;
+    }
+    return wcag;
+  }
 </script>

package/src/static/ejs/partials/scripts/wcagCompliance/FailedCriteria.ejs

@@ -0,0 +1,103 @@
+<script>
+  (function populateFailedCriteria() {
+    const wcagLinks = scanData?.wcagLinks || {};
+    const wcagViolations = scanData?.wcagViolations || [];
+    const wcagClauses = scanData?.wcagClauses || {};
+    const wcagCriteriaLabels = scanData?.wcagCriteriaLabels || {};
+
+    const failedCriteria = [];
+
+    wcagViolations.forEach(violation => {
+      const formattedId = formatWcagId(violation);
+
+      const level = wcagCriteriaLabels[formattedId];
+
+      if (level === 'AAA') {
+        return;
+      }
+
+      const wcagInfo = wcagLinks[formattedId];
+
+      if (wcagInfo) {
+        const clauseKey = formattedId.replace('WCAG ', '');
+
+        failedCriteria.push({
+          id: formattedId,
+          name: wcagClauses[clauseKey] || formattedId,
+        });
+      }
+    });
+
+    console.log('wcagViolations 111', wcagViolations)
+
+    failedCriteria.sort((a, b) => {
+      const aNum = a.id.replace('WCAG ', '').split('.').map(Number);
+      const bNum = b.id.replace('WCAG ', '').split('.').map(Number);
+
+      for (let i = 0; i < Math.max(aNum.length, bNum.length); i++) {
+        if ((aNum[i] || 0) !== (bNum[i] || 0)) {
+          return (aNum[i] || 0) - (bNum[i] || 0);
+        }
+      }
+      return 0;
+    });
+
+    const countElement = document.getElementById('failedCriteriaCount');
+    if (countElement) {
+      countElement.textContent = failedCriteria.length;
+    }
+
+    const modalCountElement = document.getElementById('failedCriteriaModalCount');
+    if (modalCountElement) {
+      modalCountElement.textContent = failedCriteria.length;
+    }
+
+    const listElement = document.getElementById('failedCriteriaList');
+    const cardElement = document.getElementById('failedCriteriaCard');
+    
+    if (listElement && failedCriteria.length > 0) {
+      const maxDisplay = 5;
+      const displayCriteria = failedCriteria.slice(0, maxDisplay);
+
+      const listHTML = displayCriteria
+        .map(
+          criteria => `
+        <li class="d-flex justify-content-between">
+          <span>${criteria.id} – ${criteria.name}</span>
+        </li>
+      `,
+        )
+        .join('');
+
+      listElement.innerHTML = listHTML;
+
+      // Populate modal with all criteria
+      const modalListElement = document.getElementById('failedCriteriaModalList');
+      if (modalListElement) {
+        const allListHTML = failedCriteria
+          .map(
+            criteria => `
+            <li class="d-flex justify-content-between">
+              <span>${criteria.id} – ${criteria.name}</span>
+            </li>
+          `,
+          )
+          .join('');
+
+        modalListElement.innerHTML = allListHTML;
+      }
+
+      // Show "View all" button if there are more than maxDisplay criteria
+      if (failedCriteria.length > maxDisplay) {
+        const viewAllButton = document.getElementById('viewAllFailedCriteria');
+        if (viewAllButton) {
+          viewAllButton.hidden = false;
+        }
+      }
+    } else {
+      if (cardElement) {
+        cardElement.style.display = 'none';
+      }
+    }
+  })();
+</script>

package/src/static/ejs/partials/scripts/wcagCompliance/WcagGaugeBar.ejs

@@ -0,0 +1,47 @@
+<script>
+	function renderWcagGaugeFromScanData() {
+		const wcagTotals = scanData?.wcagPassPercentage ?? {};
+		const totalChecks = Number(wcagTotals.totalWcagChecksAA ?? 0);
+		const violations = Number(wcagTotals.totalWcagViolationsAA ?? 0);
+		const checksPassed = Math.max(0, totalChecks - violations);
+
+		const numEl    = document.getElementById('gaugeValueNumber');
+		const totalEl  = document.getElementById('gaugeValueTotal');
+		const targetEl = document.getElementById('gaugeTarget');
+
+		if (numEl)    numEl.textContent    = String(checksPassed);
+		if (totalEl)  totalEl.textContent  = String(totalChecks);
+		if (targetEl) targetEl.textContent = String(totalChecks);
+
+		const gaugeFillPath  = document.getElementById('gaugeFill');
+		const ratio = totalChecks > 0 ? checksPassed / totalChecks : 0;
+		const isPerfectWcagScore = totalChecks > 0 && violations === 0;
+
+		if (isPerfectWcagScore) {
+			numEl.classList.toggle('perfect-score', isPerfectWcagScore);
+		}
+
+		if (gaugeFillPath && typeof gaugeFillPath.getTotalLength === 'function') {
+			const len = gaugeFillPath.getTotalLength();
+			gaugeFillPath.style.strokeDasharray  = String(len);
+			gaugeFillPath.style.strokeDashoffset = String(len);
+
+			gaugeFillPath.classList.remove('bad', 'good');
+			gaugeFillPath.classList.add(isPerfectWcagScore ? 'good' : 'bad');
+
+			requestAnimationFrame(() => {
+				gaugeFillPath.style.strokeDashoffset = String(len * (1 - ratio));
+			});
+		}
+
+		const gauge = document.getElementById('wcagGauge');
+		if (gauge) {
+			gauge.setAttribute(
+				'aria-label',
+				`WCAG A & AA automated checks passed: ${checksPassed} out of ${totalChecks}`
+			);
+		}
+	}
+
+	renderWcagGaugeFromScanData();
+</script>

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

@@ -0,0 +1,15 @@
+<script>
+	function renderNotCompliantTextIfAny() {
+		const wcagTotals = scanData?.wcagPassPercentage ?? {};
+		const totalChecks = Number(wcagTotals.totalWcagChecksAA ?? 0);
+		const violations = Number(wcagTotals.totalWcagViolationsAA ?? 0);
+		const isPerfectWcagScore = totalChecks > 0 && violations === 0;
+		const statusEl = document.getElementById('wcagStatus');
+
+		if (statusEl) {
+			statusEl.hidden = isPerfectWcagScore;
+		}
+	}
+
+	renderNotCompliantTextIfAny();
+</script>

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

@@ -0,0 +1,75 @@
+<script>
+  const makeExternalIcon = () => {
+    const ns = "http://www.w3.org/2000/svg";
+    const svg = document.createElementNS(ns, "svg");
+    svg.setAttribute("width", "16");
+    svg.setAttribute("height", "12");
+    svg.setAttribute("viewBox", "0 0 8 8");
+    svg.setAttribute("aria-hidden", "true");
+    svg.setAttribute("focusable", "false");
+    svg.setAttribute("style", "margin-left: 0.3rem");
+    svg.setAttribute("class", "link-external-icon");
+
+    const path = document.createElementNS(ns, "path");
+    path.setAttribute(
+      "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"
+    );
+    path.setAttribute("fill", "#5735DF");
+    svg.appendChild(path);
+    return svg;
+  };
+
+  const scanDataWCAGList = () => {
+    const linksMap  = scanData.wcagLinks || {};
+    const labelMap  = scanData.wcagCriteriaLabels || {};
+    const norm = (s) => String(s||"").normalize("NFKC").replace(/\s+/g," ").trim().toUpperCase();
+
+    const labelLookup = new Map(
+      Object.entries(labelMap).map(([k,v]) => [norm(k), String(v).toUpperCase()])
+    );
+
+    const aaa = [];
+    const aaOrA = [];
+    Object.entries(linksMap).forEach(([code, url]) => {
+      const level = labelLookup.get(norm(code));
+      (level === "AAA" ? aaa : aaOrA).push([code, url]);
+    });
+
+    const wcagSort = ([a],[b]) => a.localeCompare(b, undefined, {numeric:true});
+    aaOrA.sort(wcagSort);
+    aaa.sort(wcagSort);
+
+    const listAA   = document.getElementById("wcagLinksListAA");
+    const listAAA  = document.getElementById("wcagLinksListAAA");
+    const countAA  = document.getElementById("wcagAALabelCount");
+    const countAAA = document.getElementById("wcagAAALabelCount");
+
+    const render = (ul, items) => {
+      if (!ul) return;
+      ul.innerHTML = "";
+      items.forEach(([code, url]) => {
+        const li = document.createElement("li");
+
+        const a  = document.createElement("a");
+        a.className = "wcag-link";
+        a.href = url;
+        a.target = "_blank";
+        a.rel = "noopener";
+
+        a.append(document.createTextNode(code), makeExternalIcon()); // text + icon both clickable
+
+        li.appendChild(a);
+        ul.appendChild(li);
+      });
+    };
+
+    render(listAA, aaOrA);
+    render(listAAA, aaa);
+
+    if (countAA)  countAA.textContent  = String(aaOrA.length);
+    if (countAAA) countAAA.textContent = String(aaa.length);
+  };
+
+  scanDataWCAGList();
+</script>

package/src/static/ejs/partials/styles/allIssues/AllIssues.ejs

@@ -0,0 +1,384 @@
+<style>
+  #allIssuesSection {
+    margin-bottom: 1.5rem;
+    border-color: var(--soft-blue);
+    box-shadow: 0 2px 4px 0 rgb(77, 52, 191, 10%);
+  }
+
+  #allIssuesSection .card-body {
+    padding: 1.5rem;
+  }
+
+  /* Category Badges */
+  .category-badges-container {
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+  }
+
+  .category-badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 5px;
+    font-size: 12px;
+    font-weight: 600;
+    padding: 0 4px;
+    width: fit-content;
+    min-height: 20px;
+    height: 20px;
+    margin-right: 0.5rem;
+  }
+
+  .category-badge.must-fix {
+    background: var(--light-carmine-pink);
+    color: var(--true-white);
+    border: 1px solid var(--light-carmine-pink);
+  }
+
+  .category-badge.good-to-fix {
+    background: var(--strong-orange);
+    color: var(--true-white);
+    border: 1px solid var(--strong-orange);
+  }
+
+  .category-badge.needs-review {
+    background: var(--very-dark-gray);
+    color: var(--true-white);
+    border: 1px solid var(--very-dark-gray);
+  }
+
+  .category-item {
+    border-right: 1px solid var(--chinese-silver);
+    padding-right: 1rem;
+    line-height: 1.375rem;
+  }
+
+  .category-item:last-child {
+    border-right: none;
+    padding-right: 0;
+  }
+
+  .category-item-inner {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .category-tooltip-wrapper {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    margin-right: 0.75rem;
+  }
+
+  .category-tooltip-icon {
+    border: none;
+    background: transparent;
+    padding: 0;
+    margin: 0;
+    display: inline-flex;
+    cursor: pointer;
+  }
+
+  .category-tooltip-icon svg {
+    display: block;
+  }
+
+  .category-tooltip-bubble {
+    position: absolute;
+    bottom: calc(100% + 6px);
+    left: 50%;
+    transform: translateX(-50%);
+    min-width: 220px;
+    max-width: 260px;
+    white-space: normal;
+    background: #222;
+    color: #fff;
+    padding: 0.4rem 0.6rem;
+    border-radius: 4px;
+    font-size: 0.75rem;
+    line-height: 1.3;
+    box-shadow: 0 2px 6px rgba(0,0,0,0.16);
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+    transition: opacity 0.15s ease;
+    z-index: 20;
+    font-size: 0.875rem;
+  }
+
+  /* Little arrow */
+  .category-tooltip-bubble::after {
+    content: "";
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    border-width: 5px;
+    border-style: solid;
+    border-color: #222 transparent transparent transparent;
+  }
+
+  .category-tooltip-wrapper:hover .category-tooltip-bubble,
+  .category-tooltip-wrapper:focus-within .category-tooltip-bubble {
+    opacity: 1;
+    visibility: visible;
+  }
+
+  /* Filter Bar */
+  .filter-bar {
+    display: flex;
+    gap: 1rem;
+    margin-bottom: 1.5rem;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+
+  .filter-dropdowns {
+    display: flex;
+    gap: 0.75rem;
+  }
+
+  .filter-dropdown {
+    padding: 0.5rem 1rem;
+    border: 1px solid var(--chinese-silver);
+    border-radius: 5px;
+    cursor: pointer;
+    min-width: 150px;
+  }
+
+  .filter-dropdown:focus {
+    outline: 2px solid var(--ocean-blue);
+    outline-offset: 2px;
+  }
+
+  .search-container {
+    position: relative;
+    min-width: 250px;
+    flex: 1;
+  }
+
+  .search-icon {
+    position: absolute;
+    left: 12px;
+    top: 50%;
+    transform: translateY(-50%);
+    pointer-events: none;
+  }
+
+  .search-input {
+    width: 100%;
+    padding: 0.5rem 1rem 0.5rem 1rem;
+    border: 1px solid var(--chinese-silver);
+    border-radius: 5px;
+    line-height: 1.5;
+  }
+
+  .search-input:focus {
+    outline: 2px solid var(--ocean-blue);
+    outline-offset: 2px;
+    border-color: var(--ocean-blue);
+  }
+
+  /* Issues Table */
+  .issues-table-container {
+    position: relative;
+    max-height: 67vh;
+    overflow-y: auto;
+    border-radius: 5px;
+    width: 100%;
+    max-width: 100%;
+  }
+
+  .issues-table {
+    width: 100%;
+    border-collapse: separate;
+    border-spacing: 0;
+    table-layout: fixed;
+  }
+
+  .issues-table thead th {
+    padding: 0.75rem 1rem;
+    text-align: left;
+    font-size: 1rem;
+    font-weight: 600;
+    background: var(--true-white);
+    position: sticky;
+    top: 0;
+    z-index: 10;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .issues-table th.sortable {
+    cursor: pointer;
+    user-select: none;
+  }
+
+  .issues-table th.sortable:hover {
+    background: #f0f0f0;
+  }
+
+  .issues-table th span {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .sort-icon {
+    display: inline-block;
+    vertical-align: middle;
+  }
+
+  .sort-icon.active {
+    opacity: 1;
+  }
+
+  .issues-table tbody tr {
+    cursor: pointer;
+    transition: background 0.2s;
+  }
+
+  .issues-table tbody tr:hover {
+    background: #f9f9f9;
+  }
+
+  .issues-table tbody td {
+    border-bottom: 1px solid var(--chinese-silver);
+    padding: 1rem;
+    font-size: 1rem;
+  }
+
+  .issues-table tbody td:last-child {
+    text-align: right;
+    padding-right: 1rem;
+  }
+
+  .issue-name-cell {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .issue-description {
+    color: #333;
+  }
+
+  .issue-conformance-badges {
+    display: flex;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+    margin-top: 0.25rem;
+  }
+
+  .conformance-badge {
+    background-color: white;
+    border-radius: 5px;
+    font-size: 0.75rem;
+    white-space: nowrap;
+    border: 1px solid var(--a11y-black-100);
+    line-height: 1.5;
+    font-weight: 700;
+  }
+
+  .occurrence-count {
+    font-weight: 600;
+    color: var(--light-carmine-pink);
+  }
+
+  .empty-state {
+    text-align: center;
+    padding: 3rem 1rem;
+    color: var(--a11y-black-300);
+  }
+
+  .total-issues-count {
+    padding: 0.75rem 1rem;
+    background: var(--true-white);
+    border-radius: 5px;
+    font-size: 1rem;
+    position: sticky;
+    bottom: 0;
+    z-index: 10;
+    margin-top: 0;
+  }
+
+  @media (max-width: 768px) {
+    .category-badges-container {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+
+    .category-badge {
+      width: 100%;
+      height: fit-content;
+    }
+
+    .filter-bar {
+      flex-direction: column;
+      align-items: stretch;
+    }
+
+    .filter-dropdowns {
+      flex-direction: column;
+    }
+
+    .filter-dropdown,
+    .search-container {
+      width: 100%;
+    }
+
+    .issues-table-container {
+      overflow-x: auto;
+    }
+
+    .issues-table {
+      font-size: 0.8rem;
+      min-width: 100%;
+      table-layout: auto;
+    }
+
+    .issues-table thead th {
+      padding: 0.5rem 0.25rem;
+      font-size: 0.75rem;
+      white-space: nowrap;
+    }
+
+    .issues-table thead th span {
+      gap: 0.25rem;
+      font-size: 0.75rem;
+    }
+
+    .issues-table thead th .sort-icon {
+      width: 16px;
+      height: 16px;
+    }
+
+    .issues-table tbody td {
+      padding: 0.5rem 0.25rem;
+      font-size: 0.8rem;
+    }
+
+    .issues-table tbody td:last-child {
+      padding-right: 0.5rem;
+    }
+
+    .issues-table thead th:last-child {
+      width: 10%;
+      min-width: 40px;
+    }
+
+    .category-item {
+      border-right: 0;
+    }
+
+    .issue-conformance-badges {
+      gap: 0.25rem;
+    }
+
+    .conformance-badge {
+      font-size: 0.65rem;
+      padding: 2px 4px;
+    }
+  }
+</style>