@govtechsg/oobee 0.10.70 → 0.10.72

package/src/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/src/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>

package/src/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/src/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/src/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/src/static/ejs/partials/components/shared/InfoAlert.ejs

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

package/src/static/ejs/partials/components/{topFive.ejs → topTen.ejs}

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

package/src/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>

package/src/static/ejs/partials/components/wcagCompliance/WcagCompliance.ejs

@@ -0,0 +1,16 @@
+<div id="wcag-compliance-card" class="wcag-card">
+  <div class="wcag-row">
+    <div>
+      <h2 class="wcag-title">WCAG Score</h2>
+
+      <p class="wcag-sub">Based on Automated Checks</p>
+
+      <p id="wcagStatus" class="wcag-status" hidden>
+        This website does not meet the minimum accessibility standards.
+      </p>
+    </div>
+
+    <div><%- include('WcagGaugeBar') %></div>
+  </div>
+  <div><%- include('FailedCriteria') %></div>
+</div>

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

@@ -0,0 +1,16 @@
+<figure id="wcagGauge"
+				class="wcag-gauge"
+				role="img"
+				aria-label="WCAG A & AA automated checks passed">
+	<svg viewBox="0 0 100 60" aria-hidden="true" focusable="false">
+		<path class="gauge-track" d="M10,50 A40,40 0 0 1 90,50" />
+		<path class="gauge-fill" id="gaugeFill" d="M10,50 A40,40 0 0 1 90,50" />
+	</svg>
+
+	<figcaption class="gauge-center">
+		<span class="gauge-number">
+			<span id="gaugeValueNumber" class="gauge-value-number">0</span>/<span id="gaugeValueTotal">0</span>
+		</span>
+	</figcaption>
+	<div class="gauge-caption">Target to meet: <span id="gaugeTarget">20</span></div>
+</figure>

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

@@ -0,0 +1,18 @@
+<div id="wcagCoverage" class="my-3">
+  <h5 class="fw-semibold mb-2">
+    <span id="wcagAALabelCount">20</span> (A &amp; AA) WCAG Success Criteria
+  </h5>
+  <div class="wcag-box">
+    <ul id="wcagLinksListAA" class="wcag-grid list-unstyled m-0">
+      <!-- dynamically populated -->
+    </ul>
+  </div>
+  <h5 class="fw-semibold mt-4 mb-2">
+    <span id="wcagAAALabelCount">6</span> (AAA) WCAG Success Criteria
+  </h5>
+  <div class="wcag-box">
+    <ul id="wcagLinksListAAA" class="wcag-grid list-unstyled m-0">
+      <!-- dynamically populated -->
+    </ul>
+  </div>
+</div>

package/src/static/ejs/partials/footer.ejs

@@ -1,4 +1,4 @@
-<footer aria-label="Report footer" id="footer" class="card">
+<footer aria-label="Report footer" id="footer" class="card w-100">
   <div class="row mx-0">
     <div class="col-sm-6 text-sm-start">
       <%