@govtechsg/oobee 0.10.20

package/src/static/ejs/partials/summaryHeader.ejs

@@ -0,0 +1,70 @@
+<header aria-label="Report header" id="header">
+  <div class="z-2 flex-row justify-content-between px-3 py-4">
+    <div class="d-flex align-items-center">
+      <svg
+        aria-hidden="true"
+        width="48"
+        height="48"
+        viewBox="0 0 48 48"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <circle cx="24" cy="24" r="24" fill="#9021a6" />
+        <path
+          d="M16.2528 24.9725V23.832C16.2528 21.5526 14.4057 19.7056 12.1264 19.7056C9.84708 19.7056 8 21.5526 8 23.832V27.0721C8 29.2906 9.74991 31.0986 11.9448 31.1939V29.2806C11.9448 26.905 13.8772 24.9725 16.2528 24.9725Z"
+          fill="white"
+        />
+        <path
+          d="M12.308 29.28V31.1979H16.2528V25.3352C14.0779 25.3352 12.308 27.1051 12.308 29.28Z"
+          fill="white"
+        />
+        <path d="M22.8201 25.3289H18.6937V31.1997H22.8201V25.3289Z" fill="white" />
+        <path
+          d="M22.8201 17.6016C20.5408 17.6016 18.6937 19.4486 18.6937 21.728V24.9672H22.8201V17.6016Z"
+          fill="white"
+        />
+        <path
+          d="M29.3876 17.6016C27.1082 17.6016 25.2612 19.4486 25.2612 21.728V24.9672H29.3876V17.6016Z"
+          fill="white"
+        />
+        <path d="M29.3876 25.3289H25.2612V31.1997H29.3876V25.3289Z" fill="white" />
+        <path
+          d="M36.3182 31.199C38.5976 31.199 40.4446 29.3519 40.4446 27.0726V25.3281H36.3182V31.199Z"
+          fill="white"
+        />
+        <path
+          d="M40.4446 19.7056C38.1653 19.7056 36.3182 21.5526 36.3182 23.832V24.9644H40.4446V19.7056Z"
+          fill="white"
+        />
+        <path
+          d="M35.955 23.832C35.955 21.5526 34.1079 19.7056 31.8286 19.7056V22.844C31.8286 23.6195 32.0429 24.3441 32.4143 24.9644H35.955V23.832Z"
+          fill="white"
+        />
+        <path
+          d="M35.955 26.9709V25.3281H32.6595C33.4123 26.3261 34.6083 26.9709 35.955 26.9709Z"
+          fill="white"
+        />
+      </svg>
+
+      <h1 class="d-inline mb-0 ms-3">Oobee Scan Summary</h1>
+    </div>
+    <%#
+    <div class="toggleWrapper">
+      <input tabindex="0" type="checkbox" class="dm" id="dm" />
+      <label for="dm" class="toggle">
+        <span class="toggle__handler">
+          <span class="crater crater--1"></span>
+          <span class="crater crater--2"></span>
+          <span class="crater crater--3"></span>
+        </span>
+        <span class="star star--1"></span>
+        <span class="star star--2"></span>
+        <span class="star star--3"></span>
+        <span class="star star--4"></span>
+        <span class="star star--5"></span>
+        <span class="star star--6"></span>
+      </label>
+    </div>
+    %>
+  </div>
+</header>

package/src/static/ejs/partials/summaryMain.ejs

@@ -0,0 +1,75 @@
+<div class="flex-grow-1 align-items-stretch">
+  <main aria-label="Report main content" class="d-flex flex-column flex-grow-1">
+    <div class="row m-0 py-4 px-3 d-flex" style="flex-wrap: nowrap">
+      <div id="aboutScanDiv" class="pe-md-2 d-flex" style="flex: 1; flex-basis: 300px">
+        <div
+          id="scanabout-compliance-card"
+          class="card h-100"
+          style="width: -webkit-fill-available"
+        >
+          <div class="card-body"><%- include("components/summaryScanAbout") %></div>
+        </div>
+      </div>
+      <div id="scanResultsDiv" class="ps-md-2" style="flex: 2; margin-left: 10px">
+        <div id="summary-scan-results-card" class="card h-100">
+          <div class="card-body">
+            <h2>Scan results</h2>
+            <div class="d-flex justify-content-between align-items-center">
+              <span class="fw-bold"> WCAG (A & AA) Passes </span>
+              <span aria-label="Pass percentage" class="ms-2"><%= wcagPassPercentage %>% of automated checks</span>
+            </div>
+            <div class="wcag-compliance-passes-bar mb-5 d-flex">
+              <svg
+                width="500"
+                role="none"
+                height="6"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+                style="display: flex; width: 100%; position: absolute"
+              >
+                <rect
+                  width="100%"
+                  height="10"
+                  rx="3"
+                  fill="#E7ECEE"
+                  style="justify-content: left"
+                ></rect>
+                <rect
+                  width="<%= wcagPassPercentage %>%"
+                  height="6"
+                  rx="3"
+                  fill="#9021a6"
+                  style=""
+                ></rect>
+              </svg>
+            </div>
+            <ul class="unbulleted-list">
+              <% Object.keys(items).forEach((category) => { %> <%-
+              include("components/summaryScanResults", { category: category }) %> <% }) %>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="mx-3">
+      <h2 class="mb-2">Summary of issues:</h2>
+      <p>
+        Only a subset of
+        <a
+          href="https://www.w3.org/WAI/WCAG21/quickref/?currentsidebar=%23col_customize&versions=2.1&levels=aaa"
+          target="_blank"
+          >WCAG 2.1</a
+        >
+        (Conformance Level A & AA) Success Criteria can be automatically checked so
+        <a
+          aria-label="Manual testing guide"
+          href="http://go.gov.sg/oobee-manual-testing"
+          target="_blank"
+          >manual testing</a
+        >
+        is still required. For more details, please refer to the HTML report.
+      </p>
+    </div>
+    <%- include("components/summaryTable") %>
+  </main>
+</div>

package/src/static/ejs/report.ejs

@@ -0,0 +1,420 @@
+<!doctype html>
+<html lang="en" id="accessibility-site-report">
+  <head lang="en">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Accessibility Site Report</title>
+    <!-- [TESTCODE] Font Awesome CDN -->
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
+      integrity="sha512-..."
+      crossorigin="anonymous"
+    />
+    <link
+      rel="icon"
+      type="image/svg+xml"
+      href="data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23.5 6C11.7707 6 10 11.1369 10 19.23V28.77C10 36.8631 11.7707 42 23.5 42C35.2293 42 37 36.8631 37 28.77V19.23C37 11.1369 35.2293 6 23.5 6ZM25.4903 14.5985V35.0562H21.5097V12.9438H27.8925L25.4903 14.5985Z' fill='%239021A6'/%3E%3C/svg%3E
+      "
+    />
+    <%- include('partials/styles/bootstrap') %> <%- include('partials/styles/highlightjs') %> <%-
+    include('partials/styles/styles') %>
+  </head>
+
+  <body class="d-flex flex-column">
+    <%- include('partials/header') %> <%- include('partials/main') %> <%-
+    include('partials/scripts/popper') %> <%- include('partials/scripts/bootstrap') %> <%-
+    include('partials/scripts/highlightjs') %> <%- include('partials/scripts/utils') %> <%-
+    include('partials/scripts/categorySelectorDropdownScript') %> <%-
+    include('partials/scripts/categorySummary') %> <%- include('partials/scripts/ruleOffcanvas') %>
+    <%- include('partials/scripts/screenshotLightbox')%>
+    <!-- search feat changes -->
+    <%- include('partials/scripts/reportSearch') %>
+    <script>
+      function initTooltips() {
+        const tooltipTriggerList = [].slice.call(
+          document.querySelectorAll('[data-bs-toggle="tooltip"]'),
+        );
+        tooltipTriggerList.map(tooltipTriggerEl => {
+          const tooltip = new bootstrap.Tooltip(tooltipTriggerEl);
+          tooltipTriggerEl.addEventListener('mouseleave', () => tooltip.hide());
+          return tooltip;
+        });
+      }
+
+      // Scan DATA FUNCTION TO REPLACE NA
+      const scanDataWCAGCompliance = () => {
+        const passPecentage = document.getElementById('passPercentage');
+        passPecentage.innerHTML = scanData.wcagPassPercentage + '% of automated checks';
+        const wcagBarProgess = document.getElementById('wcag-compliance-passes-bar-progress');
+        wcagBarProgess.style.width = `${scanData.wcagPassPercentage}%`; // Set this to your desired width
+
+        const wcagLinksList = document.getElementById('wcagLinksList');
+
+        Object.entries(scanData.wcagLinks).forEach(([key, value]) => {
+          const listItem = document.createElement('li');
+          const link = document.createElement('a');
+          link.href = value;
+          link.target = '_blank';
+          link.textContent = key;
+          listItem.appendChild(link);
+          wcagLinksList.appendChild(listItem);
+        });
+      };
+
+      const scanDataTop5Card = () => {
+        const topIssuesList = document.getElementById('top-issues-list');
+
+        scanData.topFiveMostIssues.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.textContent = page.pageTitle.length > 0 ? page.pageTitle : page.url;
+
+            const issuesSpan = document.createElement('span');
+            issuesSpan.setAttribute('aria-label', `${page.totalIssues} issues`);
+            issuesSpan.className = 'fw-bold ms-2';
+            issuesSpan.ariaLabel = page.totalIssues + 'issues';
+            issuesSpan.textContent = page.totalIssues;
+
+            listItem.appendChild(link);
+            listItem.appendChild(issuesSpan);
+            topIssuesList.appendChild(listItem);
+          }
+        });
+      };
+
+      const scanDataCategorySelector = () => {
+        const formattedCategoryTitles = {
+          mustFix: 'Must Fix',
+          goodToFix: 'Good to Fix',
+          needsReview: 'Needs Review',
+          passed: 'Passed',
+        };
+
+        const scategoryList = document.getElementById('categorySelector');
+
+        Object.keys(scanItems).forEach(category => {
+          if (category !== 'passed') {
+            const categoryData = scanItems[category];
+            const listItem = document.createElement('div');
+            listItem.className = 'col-md-4 px-2';
+
+            const button = document.createElement('button');
+            button.setAttribute('aria-labelledby', `${category}Title ${category}ItemsInformation`);
+            button.setAttribute('aria-describedby', `${category}AriaDescription`);
+            button.id = `${category}Selector`;
+            button.className = `h-100 category-selector ${category}`;
+            button.addEventListener('click', event => changeSelectedCategory(event, category));
+            button.addEventListener('focus', () =>
+              document
+                .getElementById(`${category}Description`)
+                .dispatchEvent(new MouseEvent('mouseover')),
+            );
+            button.addEventListener('blur', () =>
+              document
+                .getElementById(`${category}Description`)
+                .dispatchEvent(new MouseEvent('mouseout')),
+            );
+            button.addEventListener('mousedown', event => event.preventDefault());
+
+            const divFlex = document.createElement('div');
+            divFlex.className = 'd-flex align-items-center mb-3';
+
+            const spanTitle = document.createElement('span');
+            spanTitle.id = `${category}Title`;
+            spanTitle.className = 'd-flex align-items-center category-name fw-bold d-inline mb-0';
+            spanTitle.textContent = formattedCategoryTitles[category];
+
+            const svgIcon = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+            svgIcon.setAttribute('tabindex', '-1');
+            svgIcon.id = `${category}Description`;
+            svgIcon.setAttribute('class', 'ms-2');
+            svgIcon.setAttribute('data-bs-toggle', 'tooltip');
+            svgIcon.setAttribute('data-bs-placement', 'top');
+            svgIcon.setAttribute('title', categoryData.description);
+            svgIcon.setAttribute('width', '14');
+            svgIcon.setAttribute('height', '14');
+            svgIcon.setAttribute('viewBox', '0 0 14 14');
+            svgIcon.setAttribute('fill', 'none');
+
+            const clipPath = document.createElementNS('http://www.w3.org/2000/svg', 'clipPath');
+            clipPath.className = 'clip0_1630_1670';
+
+            const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+            rect.setAttribute('width', '14');
+            rect.setAttribute('height', '14');
+            rect.setAttribute('fill', 'white');
+
+            const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+            path.setAttribute(
+              'd',
+              'M11.9528 2.05329C9.22079 -0.68205 4.78867 -0.68477 2.0533 2.04718C-0.682042 4.7792 -0.684795 9.21135 2.04722 11.9467C4.77917 14.6821 9.21135 14.6848 11.9467 11.9528C14.682 9.22085 14.6848 4.78863 11.9528 2.05329ZM7.00216 11.2406C6.6319 11.2406 6.33174 10.9405 6.33174 10.5702C6.33174 10.1999 6.63187 9.89976 7.00216 9.89976C7.37243 9.89976 7.67259 10.1999 7.67259 10.5702C7.67255 10.9405 7.37243 11.2406 7.00216 11.2406ZM8.09214 7.20401C7.70918 7.42788 7.67645 7.7033 7.6748 8.49691C7.6747 8.54938 7.67453 8.60233 7.67423 8.65558C7.67185 9.03068 7.36712 9.33312 6.99253 9.33312C6.99105 9.33312 6.98957 9.33312 6.98813 9.33312C6.61159 9.33074 6.3083 9.02356 6.31066 8.64699C6.31099 8.59568 6.31109 8.54468 6.31119 8.49415C6.31287 7.67852 6.31492 6.66352 7.40395 6.02694C8.27777 5.51613 8.3879 5.18059 8.28543 4.74029C8.16503 4.2231 7.69273 4.08907 7.32418 4.1312C7.20042 4.14541 6.58322 4.24724 6.58322 4.85783C6.58322 5.23431 6.27795 5.5396 5.90141 5.5396C5.52487 5.5396 5.21964 5.23431 5.21964 4.85783C5.21964 3.76416 6.02107 2.90831 7.16859 2.77656C8.35043 2.64099 9.35515 3.32135 9.61338 4.4312C9.99939 6.08915 8.61379 6.89911 8.09214 7.20401Z',
+            );
+            path.setAttribute('fill', '#c9c8c6');
+
+            clipPath.appendChild(rect);
+            svgIcon.appendChild(clipPath);
+            svgIcon.appendChild(path);
+
+            divFlex.appendChild(spanTitle);
+            divFlex.appendChild(svgIcon);
+
+            const spanInfo = document.createElement('span');
+            spanInfo.id = `${category}ItemsInformation`;
+            spanInfo.className = 'category-information';
+
+            if (category !== 'passed' && categoryData.totalItems !== 0) {
+              spanInfo.textContent = `${categoryData.rules.length} ${categoryData.rules.length === 1 ? 'issue' : 'issues'} / ${categoryData.totalItems} ${categoryData.totalItems === 1 ? 'occurrence' : 'occurrences'}`;
+            } else if (category !== 'passed' && categoryData.totalItems === 0) {
+              spanInfo.textContent = `0 issues`;
+            } else {
+              spanInfo.textContent = `${categoryData.totalItems} ${categoryData.totalItems === 1 ? 'occurrence' : 'occurrences'}`;
+            }
+
+            button.appendChild(divFlex);
+            button.appendChild(spanInfo);
+            listItem.appendChild(button);
+            scategoryList.appendChild(listItem);
+          }
+        });
+
+        const categoryList = document.getElementById('issueTypeListbox');
+
+        Object.keys(scanItems).forEach(category => {
+          if (category !== 'passed') {
+            const categoryData = scanItems[category];
+            const rulesLength = categoryData.rules ? categoryData.rules.length : 0;
+
+            const listItem = document.createElement('li');
+            listItem.tabIndex = -1;
+            listItem.id = `${category}DropdownSelector`;
+            listItem.className = `${category} category-selector d-flex flex-row align-items-center gap-2 position-relative`;
+            listItem.role = 'option';
+
+            const spanTitle = document.createElement('span');
+            spanTitle.id = `${category}Title`;
+            spanTitle.className = 'd-flex align-items-center category-name fw-bold d-inline mb-0';
+            spanTitle.textContent = formattedCategoryTitles[category];
+
+            const spanInfo = document.createElement('span');
+            spanInfo.id = `${category}ItemsInformation`;
+            spanInfo.className = 'category-information';
+
+            if (category !== 'passed' && categoryData.totalItems !== 0) {
+              spanInfo.textContent = `(${categoryData.rules.length} ${categoryData.rules.length === 1 ? 'issue' : 'issues'})`;
+            } else if (category !== 'passed' && categoryData.totalItems === 0) {
+              spanInfo.textContent = `(0 issues)`;
+            } else {
+              spanInfo.textContent = `(${categoryData.totalItems} ${categoryData.totalItems === 1 ? 'occurrence' : 'occurrences'})`;
+            }
+
+            listItem.appendChild(spanTitle);
+            listItem.appendChild(spanInfo);
+            categoryList.appendChild(listItem);
+          }
+        });
+      };
+
+      const scanDataHTML = () => {
+        const formattedViewerLocalStartTime = formatAboutStartTime(scanData.startTime);
+        document.getElementById('aboutStartTime').innerHTML = formattedViewerLocalStartTime;
+        document.getElementById('urlScanned').innerHTML = scanData.urlScanned;
+        document.getElementById('urlScanned').href = scanData.urlScanned;
+        document.getElementById('viewport').innerHTML = scanData.viewport.startsWith('CustomWidth')
+          ? `${scanData.viewport.split('_')[1]} width viewport`
+          : scanData.viewport + ' viewport';
+        document.getElementById('pagesScannedModalToggleTxt').innerHTML = scanData.isCustomFlow
+          ? scanData.customFlowLabel +
+            ' (' +
+            scanData.totalPagesScanned +
+            ' ' +
+            (scanData.totalPagesScanned === 1 ? 'page' : 'pages') +
+            ')'
+          : scanData.scanType +
+            ' crawl' +
+            ' (' +
+            scanData.totalPagesScanned +
+            ' ' +
+            (scanData.totalPagesScanned === 1 ? 'page' : 'pages') +
+            ')';
+
+        var itemsElement = document.getElementById('items');
+        var failedItems = scanItems.mustFix.totalItems + scanItems.goodToFix.totalItems;
+        var passedItems = scanItems.passed.totalItems;
+        var itemsContent = `${failedItems} ${failedItems === 1 ? 'occurrence' : 'occurrences'} failed,<br>
+        <a href="#" id="createPassedItemsFile">${passedItems} ${passedItems === 1 ? 'occurrence' : 'occurrences'} passed</a>`;
+        itemsElement.innerHTML = itemsContent;
+
+        var phAppVersionElement = document.getElementById('phAppVersion');
+        var versionContent = 'Oobee Version ' + scanData.phAppVersion;
+        phAppVersionElement.innerHTML = versionContent;
+
+        var isCustomFlow = scanData.isCustomFlow;
+        var pagesScanned = scanData.pagesScanned;
+        var pagesScannedList = document.getElementById('pagesScannedList');
+
+        pagesScanned.forEach((page, index) => {
+          var listItem = document.createElement('li');
+
+          if (isCustomFlow) {
+            listItem.innerHTML = `
+              <div class="custom-flow-screenshot-container">
+                <img 
+                  src="${page.pageImagePath}" 
+                  alt="Screenshot of ${page.url}"
+                  class="custom-flow-screenshot"
+                  onerror="this.onerror = null; this.remove();"
+                >
+                <div class="display-url-container">
+                  <a href="${page.url}" target="_blank">${page.pageTitle.length > 0 ? page.pageTitle : page.url}</a>
+                  <p>${page.url}</p>
+                </div>
+              </div>
+            `;
+          } else {
+            listItem.innerHTML = `
+              <a href="${page.url}" target="_blank">${page.pageTitle.length > 0 ? page.pageTitle : page.url}</a>
+              <p>${page.url}</p>
+            `;
+          }
+
+          pagesScannedList.appendChild(listItem);
+        });
+
+        var totalPagesNotScanned = scanData.totalPagesNotScanned;
+        var pagesNotScanned = scanData.pagesNotScanned;
+
+        var pagesNotScannedList = document.getElementById('pagesNotScannedList');
+
+        // Only update if there are pages not scanned
+        if (totalPagesNotScanned > 0) {
+          document.getElementById('totalPagesScannedLabel').innerHTML = scanData.totalPagesScanned;
+          document.getElementById('totalPagesNotScannedLabel').innerHTML =
+            scanData.totalPagesNotScanned;
+
+          pagesNotScanned.forEach((page, index) => {
+            var listItem = document.createElement('li');
+            listItem.innerHTML = `<a class="not-scanned-url" href="${page.url}" target="_blank">${page.url}</a>`;
+            pagesNotScannedList.appendChild(listItem);
+          });
+        }
+
+        const cypressScanAboutMetadata = scanData.cypressScanAboutMetadata;
+        if (cypressScanAboutMetadata) {
+          const metadataItems = Object.keys(cypressScanAboutMetadata);
+          metadataItems.forEach(key => {
+            var metadataSpan = document.getElementById('cypressScanAboutMetadata');
+            if (metadataSpan) {
+              const metadataTitle = document.createElement('span');
+              metadataTitle.textContent =
+                key[0].toUpperCase() + key.slice(1) + ': ' + cypressScanAboutMetadata[key];
+            }
+          });
+        }
+
+        document.getElementById('pagesScannedModalLabel').innerHTML = scanData.isCustomFlow
+          ? scanData.customFlowLabel +
+            ' (' +
+            scanData.totalPagesScanned +
+            ' ' +
+            (scanData.totalPagesScanned === 1 ? 'page' : 'pages') +
+            ')'
+          : scanData.scanType +
+            ' crawl' +
+            ' (' +
+            scanData.totalPagesScanned +
+            ' ' +
+            (scanData.totalPagesScanned === 1 ? 'page' : 'pages') +
+            ')';
+
+        scanDataWCAGCompliance();
+        scanDataTop5Card();
+        scanDataCategorySelector();
+
+        const createPassedItemsFile = async () => {
+          const passedItemsJson = {};
+
+          scanItems.passed.rules.forEach(r => {
+            passedItemsJson[r.description] = {
+              totalOccurrencesInScan: r.totalItems,
+              totalPages: r.pagesAffected.length,
+              pages: r.pagesAffected.map(p => ({
+                pageTitle: p.pageTitle,
+                url: p.url,
+                totalOccurrencesInPage: p.items.length,
+                occurrences: p.items,
+                metadata: p.metadata,
+              })),
+            };
+          });
+
+          const jsonString = JSON.stringify(passedItemsJson, null, 4);
+
+          const blob = new Blob([jsonString], { type: 'application/json' });
+
+          const link = document.createElement('a');
+
+          link.href = URL.createObjectURL(blob);
+
+          storagePath = scanData.storagePath;
+
+          link.download = `passed_items.json`;
+
+          document.body.appendChild(link);
+
+          link.click();
+
+          document.body.removeChild(link);
+        };
+
+        document.getElementById('createPassedItemsFile').addEventListener('click', async e => {
+          e.preventDefault();
+          await createPassedItemsFile();
+          console.log('click');
+        });
+      };
+
+      const formatAboutStartTime = dateString => {
+        const utcStartTimeDate = new Date(dateString);
+        const formattedStartTime = utcStartTimeDate.toLocaleTimeString('en-GB', {
+          year: 'numeric',
+          month: 'short',
+          day: 'numeric',
+          hour12: false,
+          hour: 'numeric',
+          minute: '2-digit',
+          timeZoneName: 'shortGeneric',
+        });
+
+        const timezoneAbbreviation = new Intl.DateTimeFormat('en', {
+          timeZoneName: 'shortOffset',
+        })
+          .formatToParts(utcStartTimeDate)
+          .find(part => part.type === 'timeZoneName').value;
+
+        //adding a breakline between the time and timezone so it looks neater on report
+        const timeColonIndex = formattedStartTime.lastIndexOf(':');
+        const timePart = formattedStartTime.slice(0, timeColonIndex + 3);
+        const timeZonePart = formattedStartTime.slice(timeColonIndex + 4);
+        const htmlFormattedStartTime = `${timePart}<br>${timeZonePart} ${timezoneAbbreviation}`;
+
+        return htmlFormattedStartTime;
+      };
+
+      document.addEventListener('DOMContentLoaded', () => {
+        initTooltips();
+        scanDataHTML();
+      });
+    </script>
+    <!-- Checks if js runs -->
+    <script>
+      document.getElementById('jsOn').classList.remove('d-none');
+      document.getElementById('jsOffMessage').classList.add('d-none');
+    </script>
+  </body>
+</html>

package/src/static/ejs/summary.ejs

@@ -0,0 +1,47 @@
+<!doctype html>
+<html lang="en" id="accessibility-site-report">
+  <head lang="en">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Oobee Scan Summary</title>
+    <link
+      rel="icon"
+      type="image/svg+xml"
+      href="data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23.5 6C11.7707 6 10 11.1369 10 19.23V28.77C10 36.8631 11.7707 42 23.5 42C35.2293 42 37 36.8631 37 28.77V19.23C37 11.1369 35.2293 6 23.5 6ZM25.4903 14.5985V35.0562H21.5097V12.9438H27.8925L25.4903 14.5985Z' fill='%239021A6'/%3E%3C/svg%3E
+      "
+    />
+    <%- include('partials/styles/summaryBootstrap') %> <%- include('partials/styles/highlightjs') %>
+    <%- include('partials/styles/styles') %>
+  </head>
+  <body class="d-flex flex-column">
+    <%- include('partials/summaryHeader') %> <%- include('partials/summaryMain') %> <%-
+    include('partials/scripts/popper') %> <%- include('partials/scripts/bootstrap') %> <%-
+    include('partials/scripts/highlightjs') %> <%- include('partials/scripts/utils') %> <%-
+    include('partials/scripts/ruleOffcanvas') %> <%- include('partials/scripts/summaryScanResults')
+    %>
+    <script>
+      const scanItems = <%- JSON.stringify(
+        {
+          ...items,
+          passed: {
+            rules: items.passed.rules.map(r => delete r.pagesAffected),
+            ...items.passed
+          },
+        }
+      ) %>
+    </script>
+    <%- include('partials/scripts/summaryTable') %>
+    <script>
+      document.addEventListener('DOMContentLoaded', function () {
+        var tooltipTriggerList = [].slice.call(
+          document.querySelectorAll('[data-bs-toggle="tooltip"]'),
+        );
+        var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
+          const tooltip = new bootstrap.Tooltip(tooltipTriggerEl);
+          tooltipTriggerEl.addEventListener('mouseleave', () => tooltip.hide());
+          return tooltip;
+        });
+      });
+    </script>
+  </body>
+</html>

package/src/static/mustache/.prettierrc

@@ -0,0 +1,4 @@
+{
+  "tabWidth": 2,
+  "useTabs": false
+}

package/src/static/mustache/Attention Deficit.mustache

@@ -0,0 +1,11 @@
+<svg data-toggle="tooltip" title="Attention Deficit" width="9px" height="14px" viewBox="0 0 9 14">
+  <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+    <g class="{{impact}}-stroke-icon" transform="translate(-76.000000, -104.000000)">
+      <g transform="translate(80.400000, 111.100000) rotate(-90.000000) translate(-80.400000, -111.100000) translate(73.900000, 107.100000)">
+        <polyline points="11.6 2 12.4 2 12.4 6 11.6 6"></polyline>
+        <polyline points="2.4 4 5.2 5.2 5.2 2.8 8 4.4"></polyline>
+        <rect x="0.4" y="0.4" width="9.6" height="7.2"></rect>
+      </g>
+    </g>
+  </g>
+</svg>

package/src/static/mustache/Blind.mustache

@@ -0,0 +1,11 @@
+<svg data-toggle="tooltip" title="Blind" width="14px" height="12px" viewBox="0 0 14 12">
+  <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g class="{{impact}}-stroke-icon" transform="translate(-17.000000, -87.000000)">
+      <g transform="translate(18.000000, 87.600000)">
+        <path d="M0.4,5.6 C0.4,5.6 2.8,1.2 6.4,1.2 C10,1.2 12.4,5.6 12.4,5.6 C12.4,5.6 10,10 6.4,10 C2.8,10 0.4,5.6 0.4,5.6 Z" stroke-linecap="round" stroke-linejoin="round"></path>
+        <circle cx="6.4" cy="5.6" r="2.4"></circle>
+        <line x1="0.8" y1="11.2" x2="12" y2="0" id="Path" stroke-linecap="round" stroke-linejoin="round"></line>
+      </g>
+    </g>
+  </g>
+</svg>