@govtechsg/oobee 0.10.76 → 0.10.77

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

@@ -0,0 +1,47 @@
+<div id="prioritiseIssuesCard" class="card rounded mt-4">
+  <div class="card-body">
+    <div class="d-flex align-items-center gap-2 mb-3">
+      <svg
+        width="40"
+        height="40"
+        viewBox="0 0 40 40"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <g clip-path="url(#clip0_281_401)">
+          <path
+            d="M15.0002 34.9997C15.0002 35.9163 15.7502 36.6663 16.6668 36.6663H23.3335C24.2502 36.6663 25.0002 35.9163 25.0002 34.9997V33.333H15.0002V34.9997ZM20.0002 3.33301C13.5668 3.33301 8.3335 8.56634 8.3335 14.9997C8.3335 18.9663 10.3168 22.4497 13.3335 24.5663V28.333C13.3335 29.2497 14.0835 29.9997 15.0002 29.9997H25.0002C25.9168 29.9997 26.6668 29.2497 26.6668 28.333V24.5663C29.6835 22.4497 31.6668 18.9663 31.6668 14.9997C31.6668 8.56634 26.4335 3.33301 20.0002 3.33301ZM23.3335 22.833V26.6663H16.6668V22.833C14.1335 21.0497 11.6668 19.2163 11.6668 14.9997C11.6668 10.3997 15.4002 6.66634 20.0002 6.66634C24.6002 6.66634 28.3335 10.3997 28.3335 14.9997C28.3335 19.1497 25.8168 21.083 23.3335 22.833Z"
+            fill="#4D34BF"
+          />
+          <path
+            d="M19 10.5C19 10.2239 19.2239 10 19.5 10H20.5C20.7761 10 21 10.2239 21 10.5V17.5C21 17.7761 20.7761 18 20.5 18H19.5C19.2239 18 19 17.7761 19 17.5V10.5Z"
+            fill="#4D34BF"
+          />
+          <path
+            d="M19 20.5C19 20.2239 19.2239 20 19.5 20H20.5C20.7761 20 21 20.2239 21 20.5V21.5C21 21.7761 20.7761 22 20.5 22H19.5C19.2239 22 19 21.7761 19 21.5V20.5Z"
+            fill="#4D34BF"
+          />
+        </g>
+        <defs>
+          <clipPath id="clip0_281_401">
+            <rect width="40" height="40" fill="white" />
+          </clipPath>
+        </defs>
+      </svg>
+      <h2 class="mb-0">Prioritise these issues first</h2>
+    </div>
+    
+    <div class="prioritise-issues-container">
+      <div class="prioritise-issues-main">
+        <div class="fw-semibold mb-3">
+          <%- include('../shared/InfoAlert', { text: 'Resolving each Must Fix issue within a criteria increases your WCAG score by 1.' }) %>
+        </div>
+        <div id="prioritiseIssuesAccordion" class="prioritise-issues-accordion">
+          <!-- Dynamically populated by script -->
+        </div>
+      </div>
+      
+      <%- include('./IssueDetailCard') %>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,196 @@
+<%# this is a template; content will be populated using js %>
+<div
+  class="modal fade"
+  id="expandedRule"
+  tabindex="-1"
+  aria-labelledby="expandedRuleName"
+  aria-hidden="true"
+  data-bs-backdrop="true"
+  data-bs-keyboard="true"
+>
+  <div class="modal-dialog modal-dialog-centered rule-modal-dialog">
+    <div class="modal-content">
+      <div class="modal-body rule-modal-body p-0">
+        <div class="d-flex w-100 modal-view">
+          <!-- Left Side -->
+          <div class="w-70 left-side-modal">
+            <div class="d-flex justify-content-end pt-3 pe-3">
+              <button
+                type="button"
+                class="btn-close modal-button-right"
+                data-bs-dismiss="modal"
+                aria-label="Close this popup"
+              ></button>
+            </div>
+            <!-- SVG Image -->
+            <div id="expandedRuleImageContainer" class="rule-modal-image-container">
+              <img
+                id="expandedRuleImage"
+                src=""
+                alt="Issue illustration"
+                class="rule-modal-image"
+              />
+            </div>
+
+            <div class="d-flex flex-column gap-3 p-4">
+              <h1 id="expandedRuleName">Loading...</h1>
+
+              <!-- Conformance badges -->
+              <div class="rule-modal-conformance">
+                <span id="expandedRuleCategoryBadge" class="mustfix-badge-label">Must Fix</span>
+                <div id="expandedRuleConformance" class="rule-modal-conformance-badges"></div>
+              </div>
+
+              <!-- Long description (from a11yRuleLongDescriptionMap) -->
+              <p id="expandedRuleDescription" class="rule-modal-description"></p>
+
+              <div id="expandedRuleManualTestSection" style="display: none">
+                <div>
+                  This occurrence might be a false positive that needs to be verified by a human.
+                </div>
+              </div>
+
+              <!-- Disability impact -->
+              <div
+                id="expandedRuleDisabilitySection"
+                class="rule-modal-disability"
+                style="display: none"
+              >
+                <div id="expandedRuleDisabilityMessage" class="info-alert mb-0" role="alert"></div>
+              </div>
+
+              <!-- AI Feedback Section -->
+              <div id="expandedRuleAiFeedback" class="rule-modal-ai-feedback" style="display: none">
+                <svg
+                  width="14"
+                  height="16"
+                  viewBox="0 0 14 16"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M6.45906 3.34063C5.68875 2.57003 5.1615 1.22438 4.89984 0C4.63778 1.22462 4.11109 2.57056 3.3405 3.34116C2.57019 4.11122 1.22413 4.63847 0 4.90066C1.22462 5.16231 2.57044 5.68925 3.34075 6.45988C4.11106 7.23019 4.63831 8.57613 4.90038 9.8005C5.16203 8.57588 5.68913 7.22994 6.45931 6.45934C7.22962 5.68903 8.57569 5.16203 9.79981 4.89984C8.57547 4.63819 7.22966 4.11097 6.45906 3.34063Z"
+                    fill="#5735DF"
+                  />
+                  <path
+                    d="M11.4627 9.5104C11.0029 9.05037 10.6874 8.24602 10.5311 7.51465C10.3745 8.24602 10.0601 9.05034 9.59975 9.51065C9.13944 9.97046 8.33525 10.2857 7.604 10.4423C8.3355 10.5988 9.13944 10.9136 9.59975 11.3739C10.0601 11.8339 10.3751 12.6382 10.5316 13.3696C10.6879 12.638 11.0029 11.8339 11.4629 11.3736C11.923 10.9136 12.7273 10.5986 13.4584 10.4417C12.7273 10.2854 11.923 9.97046 11.4627 9.5104Z"
+                    fill="#5735DF"
+                  />
+                  <path
+                    d="M3.30271 11.084C3.17124 11.698 2.90724 12.3735 2.52087 12.7598C2.13455 13.1459 1.45937 13.4104 0.845459 13.5419C1.45937 13.6736 2.13455 13.9374 2.52087 14.324C2.90724 14.7103 3.17177 15.3852 3.30324 15.9995C3.43458 15.3852 3.69871 14.7103 4.08521 14.3237C4.47127 13.9374 5.14658 13.6731 5.76037 13.5414C5.14662 13.4101 4.47127 13.1459 4.08496 12.7595C3.69871 12.3735 3.43405 11.698 3.30271 11.084Z"
+                    fill="#5735DF"
+                  />
+                </svg>
+                <span>This issue might benefit from AI suggested fixes.</span>
+              </div>
+            </div>
+
+            <div class="d-flex flex-column rule-modal-pages-section">
+              <!-- Pages Affected Section -->
+              <div id="expandedRulePagesSection">
+                <div class="accordion" id="pagesAccordion">
+                  <div class="accordion-item">
+                    <h2 class="accordion-header" id="pagesAccordionHeader">
+                      <button
+                        class="accordion-button collapsed accordion-title"
+                        type="button"
+                        data-bs-toggle="collapse"
+                        data-bs-target="#pagesAccordionContent"
+                        aria-expanded="false"
+                        aria-controls="pagesAccordionContent"
+                      >
+                        <svg
+                          class="accordion-arrow"
+                          width="24"
+                          height="24"
+                          viewBox="0 0 24 24"
+                          fill="none"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M7.41 8.58984L12 13.1698L16.59 8.58984L18 9.99984L12 15.9998L6 9.99984L7.41 8.58984Z"
+                            fill="#5735DF"
+                          />
+                        </svg>
+                        <div class="d-flex justify-content-between align-items-center w-100">
+                          <h3 id="expandedRuleDropdownTitle" class="mb-0">
+                            Pages affected by this issue (#)
+                          </h3>
+                          <div class="d-flex align-items-center gap-3">
+                            <span
+                              id="expandedRuleDropdownToggleCategoryInfo"
+                              class="rule-occurrence-count"
+                              ># Total occ.</span
+                            >
+                          </div>
+                        </div>
+                      </button>
+                    </h2>
+                    <div
+                      id="pagesAccordionContent"
+                      class="accordion-collapse collapse"
+                      aria-labelledby="pagesAccordionHeader"
+                      data-bs-parent="#pagesAccordion"
+                    >
+                      <div class="accordion-body">
+                        <div class="group-by-toggle">
+                          <span class="group-by-label">Group by</span>
+                          <div class="group-by-options">
+                            <div class="form-check form-check-inline">
+                              <input
+                                type="radio"
+                                class="form-check-input"
+                                name="groupByOptions"
+                                id="groupByPage"
+                                value="page"
+                                checked
+                              />
+                              <label class="form-check-label" for="groupByPage">Page</label>
+                            </div>
+
+                            <div class="form-check form-check-inline">
+                              <input
+                                type="radio"
+                                class="form-check-input"
+                                name="groupByOptions"
+                                id="groupByHtmlElement"
+                                value="html"
+                              />
+                              <label class="form-check-label" for="groupByHtmlElement"
+                                >HTML Element</label
+                              >
+                            </div>
+                          </div>
+                        </div>
+                        <div id="expandedRuleCategoryContent"></div>
+                        <div id="expandedRulePageContent">Total # affected pages</div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Right Side -->
+          <div class="w-30 d-flex flex-column right-side-modal p-4">
+            <div class="d-flex align-self-end">
+              <button
+                type="button"
+                class="btn-close modal-button"
+                data-bs-dismiss="modal"
+                aria-label="Close"
+              ></button>
+            </div>
+            <h2 class="rule-modal-section-title">Step by step plan</h2>
+            <h3>How to Fix</h3>
+            <!-- How to Fix Section -->
+            <div id="stepByStepContainer" class="rule-modal-how-to-fix">
+              <!-- Steps will be populated dynamically -->
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,48 @@
+<div class="segmented-tabs" role="tablist" aria-label="Crawl views">
+  <button
+    type="button"
+    class="seg-pill"
+    aria-controls="pages-scanned"
+    aria-selected="true"
+    data-tab-target="#pages-scanned"
+  >
+    <span id="totalPagesScannedLabel">
+      N/A
+    </span>
+    <span>
+      &nbsp;Pages Scanned
+    </span>
+  </button>
+
+  <button
+    type="button"
+    id="seg-not-scanned"
+    class="seg-pill"
+    aria-controls="pages-not-scanned"
+    aria-selected="false"
+    data-tab-target="#pages-not-scanned"
+  >
+    <span id="totalPagesNotScannedLabel">
+      N/A
+    </span>
+    <span>
+      &nbsp;Pages Not Scanned
+    </span>
+  </button>
+
+  <button
+    type="button"
+    id="seg-unsupported"
+    class="seg-pill"
+    aria-controls="pages-unsupported"
+    aria-selected="false"
+    data-tab-target="#pages-unsupported"
+  >
+    <span id="totalUnsupportedDocsLabel">
+      N/A
+    </span>
+    <span>
+      &nbsp;Unsupported Documents
+    </span>
+  </button>
+</div>

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

@@ -0,0 +1,13 @@
+<div class="screenshot-lightbox">
+    <div class="lightbox-header">
+      <h5 class="mb-0"></h5>
+      <button onclick="closeLightbox()" aria-label="Close lightbox">
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+          <path fill-rule="evenodd" clip-rule="evenodd" d="M0.549622 0.549531C0.713716 0.385436 0.936276 0.293249 1.16834 0.293249C1.4004 0.293249 1.62296 0.385436 1.78706 0.549531L7.97424 6.73671L14.1614 0.549531C14.3255 0.385437 14.5481 0.293249 14.7801 0.293249C15.0122 0.293249 15.2348 0.385436 15.3989 0.549531C15.563 0.713625 15.6551 0.936185 15.6551 1.16825C15.6551 1.40031 15.563 1.62287 15.3989 1.78697L9.21168 7.97415L15.3989 14.1613C15.563 14.3254 15.6551 14.548 15.6551 14.7801C15.6551 15.0121 15.563 15.2347 15.3989 15.3988C15.2348 15.5629 15.0122 15.6551 14.7801 15.6551C14.5481 15.6551 14.3255 15.5629 14.1614 15.3988L7.97424 9.21159L1.78706 15.3988C1.62296 15.5629 1.4004 15.6551 1.16834 15.6551C0.936276 15.6551 0.713716 15.5629 0.549622 15.3988C0.385527 15.2347 0.29334 15.0121 0.29334 14.7801C0.29334 14.548 0.385527 14.3254 0.549622 14.1613L6.73681 7.97415L0.549622 1.78697C0.385527 1.62287 0.29334 1.40031 0.29334 1.16825C0.29334 0.936185 0.385527 0.713625 0.549622 0.549531Z" fill="white"/>
+        </svg>
+      </button>
+    </div>
+    <div class="lightbox-content">
+      <img id="lightbox-image"></img>
+    </div>
+</div>

package/dist/static/ejs/partials/components/shared/InfoAlert.ejs

@@ -0,0 +1,3 @@
+<div class="info-alert" role="alert">
+  <%= text %>
+</div>

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

@@ -0,0 +1,141 @@
+<h2>About this scan</h2>
+<ul class="p-0" style="list-style: none">
+  <li class="svg-container">
+    <svg
+      aria-label="Start time"
+      width="18px"
+      viewBox="0 0 18 17"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      class="svg-aboutscan"
+    >
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M3.69863 0.927936C3.69863 0.41626 4.11262 0.00146484 4.62329 0.00146484C5.13396 0.00146484 5.54795 0.41626 5.54795 0.927936V1.85441H9.24658V0.927936C9.24658 0.41626 9.66056 0.00146484 10.1712 0.00146484C10.6819 0.00146484 11.0959 0.41626 11.0959 0.927936V1.85441H12.0205C13.5526 1.85441 14.7945 3.09879 14.7945 4.63382V8.51434C14.6723 8.5058 14.549 8.50146 14.4247 8.50146C14.0768 8.50146 13.7367 8.53544 13.4075 8.60029V7.41323H1.38699V12.9721C1.38699 13.7396 2.00795 14.3618 2.77397 14.3618H9.1446C9.18737 14.8464 9.29359 15.3125 9.45476 15.7515H2.77397C1.24195 15.7515 0 14.5071 0 12.9721V4.63382C0 3.09879 1.24195 1.85441 2.77397 1.85441H3.69863V0.927936ZM9.24658 3.24411V3.70735C9.24658 4.21902 9.66056 4.63382 10.1712 4.63382C10.6819 4.63382 11.0959 4.21902 11.0959 3.70735V3.24411H12.0205C12.7866 3.24411 13.4075 3.8663 13.4075 4.63382V6.48676H1.38699V4.63382C1.38699 3.8663 2.00795 3.24411 2.77397 3.24411H3.69863V3.70735C3.69863 4.21902 4.11262 4.63382 4.62329 4.63382C5.13396 4.63382 5.54795 4.21902 5.54795 3.70735V3.24411H9.24658ZM17.0959 14.0015C17.0959 15.7043 15.7343 17.0848 14.0548 17.0848C12.3752 17.0848 11.0137 15.7043 11.0137 14.0015C11.0137 12.2986 12.3752 10.9181 14.0548 10.9181C15.7343 10.9181 17.0959 12.2986 17.0959 14.0015ZM18 14.0015C18 16.2106 16.2337 18.0015 14.0548 18.0015C11.8759 18.0015 10.1096 16.2106 10.1096 14.0015C10.1096 11.7923 11.8759 10.0015 14.0548 10.0015C16.2337 10.0015 18 11.7923 18 14.0015ZM14.0548 11.5015C13.8732 11.5015 13.726 11.6507 13.726 11.8348V13.9181C13.726 14.0241 13.7748 14.1185 13.8507 14.1795C13.8597 14.191 13.8696 14.2021 13.8803 14.2125L14.8486 15.161C14.9791 15.2889 15.1873 15.2853 15.3134 15.1529C15.4396 15.0205 15.436 14.8095 15.3054 14.6816L14.3836 13.7785V11.8348C14.3836 11.6507 14.2364 11.5015 14.0548 11.5015Z"
+        fill="#93928d"
+      />
+    </svg>
+    <span><%- unescape(formatAboutStartTime(startTime)) %></span>
+  </li>
+  <li class="svg-container" style="word-break: break-all;">
+    <svg
+      aria-label="URL scanned"
+      width="18px"
+      viewBox="0 0 18 17"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      class="svg-aboutscan"
+    >
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M16.5789 2.80146H1.42105V12.6015H16.5789V2.80146ZM18 0.934798V2.80146V13.0681C18 13.5836 17.5758 14.0015 17.0526 14.0015H0.947369C0.42415 14.0015 0 13.5836 0 13.0681V2.80146V0.934798C0 0.419332 0.42415 0.00146484 0.947369 0.00146484H17.0526C17.5758 0.00146484 18 0.419332 18 0.934798ZM3.07895 2.3348C2.68653 2.3348 2.36842 2.0214 2.36842 1.6348C2.36842 1.2482 2.68653 0.934798 3.07895 0.934798C3.47136 0.934798 3.78947 1.2482 3.78947 1.6348C3.78947 2.0214 3.47136 2.3348 3.07895 2.3348ZM4.26316 1.6348C4.26316 2.0214 4.58127 2.3348 4.97368 2.3348C5.3661 2.3348 5.68421 2.0214 5.68421 1.6348C5.68421 1.2482 5.3661 0.934798 4.97368 0.934798C4.58127 0.934798 4.26316 1.2482 4.26316 1.6348ZM6.86842 2.3348C6.47601 2.3348 6.15789 2.0214 6.15789 1.6348C6.15789 1.2482 6.47601 0.934798 6.86842 0.934798C7.26083 0.934798 7.57895 1.2482 7.57895 1.6348C7.57895 2.0214 7.26083 2.3348 6.86842 2.3348Z"
+        fill="#93928d"
+      />
+    </svg>
+    <a aria-label="URL scanned" href="<%= urlScanned %>" target="_blank"><%= urlScanned %></a>
+  </li>
+  <% if (viewport !== null) { %>
+  <li class="svg-container">
+    <% if (viewport.startsWith('Desktop')) { %>
+    <svg
+      aria-label="Viewport"
+      width="18px"
+      viewBox="0 0 18 17"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      class="svg-aboutscan"
+    >
+      <path
+        d="M16.56 0.19H1.44A1.26 1.26 0 0 0 0.18 1.452v10.092a1.26 1.26 0 0 0 1.26 1.262h5.67v1.242H5.85c-0.347 0 -0.63 0.282 -0.63 0.63 0 0.349 0.282 0.63 0.63 0.63h6.3c0.347 0 0.63 -0.282 0.63 -0.63 0 -0.349 -0.282 -0.63 -0.63 -0.63h-1.26v-1.242h5.67c0.697 0 1.26 -0.565 1.26 -1.262V1.452A1.26 1.26 0 0 0 16.56 0.19Zm0 10.98c0 0.218 -0.176 0.394 -0.394 0.394H1.834A0.394 0.394 0 0 1 1.44 11.17V1.866c0 -0.218 0.176 -0.394 0.394 -0.394H16.168c0.218 0 0.394 0.176 0.394 0.394L16.56 11.17Z"
+        fill="#93928d"
+      />
+    </svg>
+    <% } else if (viewport.startsWith('CustomWidth')) { %>
+    <svg
+      aria-label="Viewport"
+      width="18px"
+      viewBox="0 0 18 17"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      class="svg-aboutscan"
+    >
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M0 3.6a3.6 3.6 0 0 1 3.6 -3.6h10.8a3.6 3.6 0 0 1 3.6 3.6v10.8a3.6 3.6 0 0 1 -3.6 3.6H3.6a3.6 3.6 0 0 1 -3.6 -3.6V3.6Zm3.329 6.263a0.863 0.863 0 0 0 -0.863 0.863v3.945a0.863 0.863 0 0 0 0.986 0.854c0.041 0.006 0.081 0.009 0.123 0.009h3.945a0.863 0.863 0 1 0 0 -1.726H4.192v-3.083a0.863 0.863 0 0 0 -0.863 -0.863Zm12.452 -2.588a0.863 0.863 0 1 1 -1.726 0V4.192h-3.328a0.863 0.863 0 0 1 0 -1.726h3.945c0.042 0 0.083 0.004 0.123 0.009a0.863 0.863 0 0 1 0.986 0.854v3.946Z"
+        fill="#93928d"
+      />
+    </svg>
+    <% } else { %>
+    <svg
+      aria-label="Viewport"
+      width="18px"
+      viewBox="0 0 18 17"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      class="svg-aboutscan"
+    >
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M1.94595 0.00146484C0.87123 0.00146484 0 0.856193 0 1.91056V19.0924C0 20.1467 0.87123 21.0015 1.94595 21.0015H10.0541C11.1288 21.0015 12 20.1467 12 19.0924V1.91056C12 0.856194 11.1288 0.00146484 10.0541 0.00146484H1.94595ZM10.7027 2.54692H1.2973V17.8196H10.7027V2.54692ZM4.21622 1.1151C4.21622 1.02724 4.28882 0.95601 4.37838 0.95601H7.94595C8.03551 0.95601 8.10811 1.02724 8.10811 1.1151C8.10811 1.20296 8.03551 1.27419 7.94595 1.27419H4.37838C4.28882 1.27419 4.21622 1.20296 4.21622 1.1151ZM6.16216 20.3651C6.69952 20.3651 7.13514 19.9377 7.13514 19.4106C7.13514 18.8834 6.69952 18.456 6.16216 18.456C5.6248 18.456 5.18919 18.8834 5.18919 19.4106C5.18919 19.9377 5.6248 20.3651 6.16216 20.3651Z"
+        fill="#93928d"
+      />
+    </svg>
+    <% } %>
+    <span>
+      <%= viewport.startsWith("CustomWidth") ? `${viewport.split("_")[1]} width` : viewport %> viewport
+    </span>
+  </li>
+  <% } %>
+  <li class="svg-container">
+    <svg
+      aria-label="Pages scanned"
+      width="18px"
+      viewBox="0 0 18 17"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      class="svg-aboutscan"
+    >
+      <g clip-path="url(#clip0_1630_1547)">
+        <path
+          d="M14.0299 1.09229H2.97102C2.59546 1.09229 2.29102 1.39673 2.29102 1.77228V16.231C2.29102 16.6065 2.59546 16.911 2.97102 16.911H14.0299C14.4054 16.911 14.7099 16.6065 14.7099 16.231V1.77228C14.7099 1.39673 14.4054 1.09229 14.0299 1.09229Z"
+          stroke="#93928d"
+          stroke-width="1.7369"
+        />
+        <path
+          d="M5.03369 4.92139H11.9663"
+          stroke="#93928d"
+          stroke-width="1.189"
+          stroke-linecap="round"
+        />
+        <path
+          d="M5.03369 7.64136H11.9663"
+          stroke="#93928d"
+          stroke-width="1.189"
+          stroke-linecap="round"
+        />
+        <path
+          d="M5.03369 10.3613H11.9663"
+          stroke="#93928d"
+          stroke-width="1.189"
+          stroke-linecap="round"
+        />
+        <path
+          d="M5.03369 13.0813H11.9663"
+          stroke="#93928d"
+          stroke-width="1.189"
+          stroke-linecap="round"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_1630_1547">
+          <rect width="17" height="17" fill="white" transform="translate(0 0.501465)" />
+        </clipPath>
+      </defs>
+    </svg>
+    <span><%= isCustomFlow ? 'Custom Flow (' + totalPagesScanned + ' pages)' : totalPagesScanned + ' pages' %></span>
+  </li>
+</ul>

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

@@ -0,0 +1,16 @@
+<% const formattedCategoryTitles = { 
+  mustFix: "Must Fix",
+  goodToFix: "Good to Fix",
+  needsReview: "Manual Review Required",
+  passed: "Passed"
+} %>
+<li class="d-flex align-items-center mb-3 justify-content-between">
+  <span class="d-flex align-items-center d-inline mb-0"
+    ><img alt="<%= category %>Icon" id="summary<%= category %>Icon"><%= formattedCategoryTitles[category] %></span
+  >
+  <span><%= items[category].rules.length %></span>
+</li>
+<% if (category !== 'passed') { %> 
+  <hr/>
+<% } %>
+

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

@@ -0,0 +1,20 @@
+<div class="pb-4 mx-3">
+    <table id="summary-table" style="table-layout:fixed;width:100%;">
+        <col style="width:10%">
+        <col style="width:30%">
+        <col style="width:20%">
+        <col style="width:20%">
+        <col style="width:20%">
+      <thead id="summary-table-header">
+        <tr id="summary-table-row" style="font-weight: 600">
+          <td id="summary-table-icon">Icon</td>
+          <td id="summary-table-issue-description" class="py-4">Issue description</td>
+          <td id="summary-table-occurrences">Occurrences</td>
+          <td id="summary-table-pages">Pages</td>
+          <td id="summary-table-helpUrl">Help URL</td>
+        </tr>
+      </thead>
+      <tbody id="summary-table-contents">
+      </tbody>
+    </table>
+</div>

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

@@ -0,0 +1,94 @@
+<div id="wcag-compliance-card" class="card h-100 p-3">
+  <h2 class="mb-0">WCAG Compliance</h2>
+  <div class="wcag-compliance-passes-panel">
+    <div class="d-flex justify-content-between align-items-center">
+      <div class="d-flex align-items-center">
+        <span class="fw-bold">WCAG (A & AA) Passes</span>
+        <button
+          aria-label="More on automated testing WCAG coverage"
+          id="wcagModalToggle"
+          class="ms-2"
+          data-bs-toggle="modal"
+          data-bs-target="#wcagModal"
+        >
+          <svg
+            width="14"
+            height="14"
+            viewBox="0 0 14 14"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              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"
+              fill="#c9c8c6"
+            />
+          </svg>
+        </button>
+      </div>
+          <span aria-label="Pass percentage" class="ms-2"><%= wcagPassPercentage %>%</span>
+    </div>
+    <div class="wcag-compliance-passes-bar">
+      <div
+        class="wcag-compliance-passes-bar-progress"
+        style="width: <%= wcagPassPercentage %>%"
+      ></div>
+    </div>
+  </div>
+</div>
+<div
+  id="wcagModal"
+  class="modal fade"
+  tabindex="-1"
+  aria-labelledby="wcagModalLabel"
+  aria-hidden="true"
+>
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h3 class="modal-title fw-bold" id="wcagModalLabel">Automated Testing WCAG Coverage</h3>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <div class="modal-body">
+        <div>
+          Only 19 WCAG 2.2 Success Criteria can be checked reasonably through automated testing:
+        </div>
+        <div class="accordion my-3" id="wcagLinksAccordion">
+          <div class="accordion-item">
+            <div class="accordion-header" id="wcagLinksAccordionTitle">
+              <button
+                class="accordion-button collapsed"
+                type="button"
+                data-bs-toggle="collapse"
+                data-bs-target="#wcagLinksAccordionContent"
+                aria-expanded="false"
+                aria-controls="wcagLinksAccordionContent"
+              >
+                19 WCAG Success Criteria (A & AA)
+              </button>
+            </div>
+            <div
+              id="wcagLinksAccordionContent"
+              class="accordion-collapse collapse"
+              aria-labelledby="wcagLinksAccordionTitle"
+              data-bs-parent="#accordionExample"
+            >
+              <div class="accordion-body">
+                <ul id="wcagLinksList">
+                  <% Object.entries(wcagLinks).forEach(link => { %>
+                  <li>
+                    <a href="<%= link[1] %>" target="_blank"><%= link[0] %></a>
+                  </li>
+                  <% }) %>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div>
+          <strong>Manual testing is still recommended</strong> as they involve subjective judgements
+          and human interpretation, which cannot be fully automated.
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,6 @@
+<div id="top-ten-card" class="h-100">
+  <div class="card-body">
+    <h3>Pages with the most issues</h3>
+    <ul class="unbulleted-list" id="top-issues-list"></ul>
+  </div>
+</div>

package/dist/static/ejs/partials/components/wcagCompliance/FailedCriteria.ejs

@@ -0,0 +1,47 @@
+<div id="failedCriteriaCard" class="mt-3">
+  <div class="wcag-row-column">
+    <div>
+      <h3 class="wcag-title">Failed Criteria (<span id="failedCriteriaCount">0</span>)</h3>
+    </div>
+
+    <ul id="failedCriteriaList" class="unbulleted-list">
+      <!-- dynamically populated -->
+    </ul>
+
+    <button
+      id="viewAllFailedCriteria"
+      type="button"
+      class="view-all-link"
+      data-bs-toggle="modal"
+      data-bs-target="#failedCriteriaModal"
+      hidden
+    >
+      View all failed criteria
+      <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>
+
+<!-- Failed Criteria Modal -->
+<div id="failedCriteriaModal" class="modal fade" tabindex="-1" aria-labelledby="failedCriteriaModalLabel" aria-hidden="true">
+  <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
+    <div class="modal-content">
+      <div class="modal-header modal-title mt-2">
+        <h1 class="modal-title fw-bold" id="failedCriteriaModalLabel">
+          Failed Criteria (<span id="failedCriteriaModalCount">0</span>)
+        </h1>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <div class="modal-body">
+        <ul id="failedCriteriaModalList" class="unbulleted-list">
+          <!-- dynamically populated -->
+        </ul>
+      </div>
+    </div>
+  </div>
+</div>