Feat/update icons for inspect plus oobee report

src/mergeAxeResults.ts

@@ -292,7 +292,11 @@ const compileHtmlWithEJS = async (
     filename: path.join(dirname, './static/ejs/report.ejs'),
   });
 
-  const html = template({ ...allIssues, storagePath: JSON.stringify(storagePath) });
+  const html = template({
+    ...allIssues,
+    storagePath: JSON.stringify(storagePath),
+    isInspectPlus: process.env.INSPECT_PLUS === 'true',
+  });
   await fs.writeFile(htmlFilePath, html);
 
   let htmlContent = await fs.readFile(htmlFilePath, { encoding: 'utf8' });
@@ -430,7 +434,10 @@ const writeSummaryHTML = async (
   const template = ejs.compile(ejsString, {
     filename: path.join(dirname, './static/ejs/summary.ejs'),
   });
-  const html = template(allIssues);
+  const html = template({
+    ...allIssues,
+    isInspectPlus: process.env.INSPECT_PLUS === 'true',
+  });
   fs.writeFileSync(`${storagePath}/${htmlFilename}.html`, html);
 };
 
@@ -1638,7 +1645,7 @@ const sendWcagBreakdownToSentry = async (
       tags['WCAG-MustFix-Occurrences'] = String(allIssues.items.mustFix.totalItems);
       tags['WCAG-GoodToFix-Occurrences'] = String(allIssues.items.goodToFix.totalItems);
       tags['WCAG-NeedsReview-Occurrences'] = String(allIssues.items.needsReview.totalItems);
-      
+
       // Add number of pages scanned tag
       tags['Pages-Scanned-Count'] = String(allIssues.totalPagesScanned);
     } else if (pagesScannedCount > 0) {
@@ -1667,7 +1674,7 @@ const sendWcagBreakdownToSentry = async (
         ...(userData && userData.userId ? { id: userData.userId } : {}),
       },
       extra: {
-        additionalScanMetadata: ruleIdJson != null ? JSON.stringify(ruleIdJson)  : "{}",
+        additionalScanMetadata: ruleIdJson != null ? JSON.stringify(ruleIdJson) : '{}',
         wcagBreakdown: wcagCriteriaBreakdown,
         reportCounts: allIssues
           ? {

src/static/ejs/partials/components/categorySelectorDropdown.ejs

@@ -14,8 +14,10 @@
         id="dropdownToggleContainer"
         class="category-selector d-flex flex-row align-items-center gap-2"
       >
-        <strong id="dropdownToggleCategoryTitle" class="category-name d-flex align-items-center"
-          >Category Title</strong
+        <strong
+          id="dropdownToggleCategoryTitle"
+          class="category-name d-flex align-items-center<%= isInspectPlus ? ' inspect-plus' : '' %>"
+        >Category Title</strong>
         >
         <span id="dropdownToggleCategoryInfo">(# issues)</span>
       </span>

src/static/ejs/partials/components/ruleOffcanvas.ejs

@@ -59,8 +59,10 @@
             id="expandedRuleDropdownToggleContainer"
             class="mustFix category-selector d-flex flex-row align-items-center gap-2"
           >
-            <strong id="expandedRuleDropdownToggleCategoryTitle" class="category-name d-flex align-items-center"
-              >Category Title</strong
+            <strong
+              id="expandedRuleDropdownToggleCategoryTitle"
+              class="category-name d-flex align-items-center<%= isInspectPlus ? ' inspect-plus' : '' %>"
+            >Category Title</strong>
             >
             <span id="expandedRuleDropdownToggleCategoryInfo">(# occurrences)</span>
           </span>

src/static/ejs/partials/components/summaryScanResults.ejs

@@ -10,7 +10,7 @@
   >
   <span><%= items[category].rules.length %></span>
 </li>
-<% if (category !== 'passed') { %> 
+<% if (category !== 'needsReview') { %>
   <hr/>
 <% } %>
 

src/static/ejs/partials/components/summaryTable.ejs

@@ -5,7 +5,7 @@
         <col style="width:20%">
         <col style="width:20%">
         <col style="width:20%">
-      <thead id="summary-table-header">
+      <thead id="<%= isInspectPlus ? 'summary-inspect-plus-table-header' : '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>

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

@@ -5,14 +5,24 @@
     <span aria-label="Pass percentage" class="ms-2" id="passPercentage"></span>
   </div>
   <div class="wcag-compliance-passes-bar">
-    <div class="wcag-compliance-passes-bar-progress" id="wcag-compliance-passes-bar-progress" style="width: 0%"></div>
+    <div
+      class="<%= isInspectPlus ? 'wcag-inspect-plus-compliance-passes-bar-progress' : 'wcag-compliance-passes-bar-progress' %>"
+      id="<%= isInspectPlus ? 'wcag-inspect-plus-compliance-passes-bar-progress' : 'wcag-compliance-passes-bar-progress' %>"
+      style="width: 0%"
+    ></div>
   </div>
   <button id="wcagModalToggle" type="button" data-bs-toggle="modal" data-bs-target="#wcagModal">
     More details
   </button>
 </div>
 <!-- START Modal Pop up -->
-<div id="wcagModal" class="modal fade" tabindex="-1" aria-labelledby="wcagModalLabel" aria-hidden="true">
+<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">
@@ -21,32 +31,50 @@
       </div>
       <div class="modal-body">
         <div>
-          Only <a href="https://go.gov.sg/oobee-details" target="_blank">20 WCAG 2.2</a> Success Criteria (A & AA) can be checked reasonably through automated testing:
+          Only <a href="https://go.gov.sg/oobee-details" target="_blank">20 WCAG 2.2</a> Success
+          Criteria (A & AA) 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">
+              <button
+                class="accordion-button collapsed"
+                type="button"
+                data-bs-toggle="collapse"
+                data-bs-target="#wcagLinksAccordionContent"
+                aria-expanded="false"
+                aria-controls="wcagLinksAccordionContent"
+              >
                 20 (A & AA) and 5 (AAA) WCAG Success Criteria
               </button>
             </div>
-            <div id="wcagLinksAccordionContent" class="accordion-collapse collapse"
-              aria-labelledby="wcagLinksAccordionTitle" data-bs-parent="#accordionExample">
+            <div
+              id="wcagLinksAccordionContent"
+              class="accordion-collapse collapse"
+              aria-labelledby="wcagLinksAccordionTitle"
+              data-bs-parent="#accordionExample"
+            >
               <div class="accordion-body">
                 <ul id="wcagLinksList"></ul>
               </div>
             </div>
           </div>
         </div>
         <div>
-          <strong><a aria-label="Manual testing guide" href="https://go.gov.sg/a11y-manual-testing" target="_blank">Manual
-            testing</a> is still recommended</strong> as they involve subjective judgements
-          and human interpretation, which cannot be fully automated.
+          <strong
+            ><a
+              aria-label="Manual testing guide"
+              href="https://go.gov.sg/a11y-manual-testing"
+              target="_blank"
+              >Manual testing</a
+            >
+            is still recommended</strong
+          >
+          as they involve subjective judgements and human interpretation, which cannot be fully
+          automated.
         </div>
       </div>
     </div>
   </div>
 </div>
-<!-- END Modal Pop up -->
+<!-- END Modal Pop up -->

src/static/ejs/partials/header.ejs

@@ -1,4 +1,5 @@
 <header>
+  <% if (!isInspectPlus) { %>
   <svg
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
@@ -204,6 +205,8 @@
       />
     </g>
   </svg>
+  <% } %>
+
   <h1 class="d-inline mb-0 ms-3">
     <span class="d-md-none">A11y</span><span class="d-none d-md-inline">Accessibility</span> Site
     Report

src/static/ejs/partials/main.ejs

@@ -6,7 +6,7 @@
     <!-- wcag compliance + top 5 -->
     <section class="w-100">
       <div class="compliance-summary">
-        <div class="col card rounded"><%- include("components/wcagCompliance") %></div>
+        <div class="col card rounded"><%- include("components/wcagCompliance", { isInspectPlus }) %></div>
         <div class="col card rounded"><%- include("components/topFive") %></div>
       </div>
       <hr class="my-4 mx-3" />
@@ -21,7 +21,7 @@
         <%- include("components/categorySelector") %>
 
         <!-- Dropdown Category Selector -->
-        <%- include("components/categorySelectorDropdown") %>
+        <%- include("components/categorySelectorDropdown", { isInspectPlus }) %>
         <ul id="categorySummary" class="unbulleted-list px-3 py-4 mb-3 flex-grow-1">
           <!-- dynamically generated section from scripts/categorySummary -->
           <%# dynamically generated section from scripts/categorySummary %>

src/static/ejs/partials/scripts/categorySummary.ejs

@@ -75,7 +75,7 @@
           >
 
           <div
-            class="rule-items-count ${category}">
+            class="rule-items-count ${category} ${isInspectPlus ? "inspect-plus" : ""}">
             ${formatItemsCount(rule.totalItems)}
           </div>
 

src/static/ejs/partials/scripts/ruleOffcanvas.ejs

@@ -125,7 +125,7 @@ category summary is clicked %>
             <button id="${category}OffCanvasButtonSelector" aria-label="${getFormattedCategoryTitle(category)}, ${
               ruleInCategory.totalItems
               } ${ruleInCategory.totalItems === 1 ? 'occurrence' : 'occurrences'}" class="${category} category-selector">
-              <span class="d-flex align-items-center category-name">${getFormattedCategoryTitle(
+              <span class="d-flex align-items-center category-name ${isInspectPlus ? "inspect-plus" : ""}">${getFormattedCategoryTitle(
                 category,
               )}</span>
               <span class="category-information">${ruleInCategory.totalItems} ${ruleInCategory.totalItems === 1 ? 'occurrence' : 'occurrences'}</span>
@@ -141,7 +141,7 @@ category summary is clicked %>
               >
               <span
                   id="${category}Title"
-                  class="d-flex align-items-center category-name fw-bold d-inline mb-0"
+                  class="d-flex align-items-center category-name fw-bold d-inline mb-0 ${isInspectPlus ? "inspect-plus" : ""}"
               >
               ${getFormattedCategoryTitle(category)}
               </span>
@@ -397,7 +397,7 @@ category summary is clicked %>
                   >
                     <span class="sr-only visually-hidden">${pageItemsCount} ${pageItemsCount === 1 ? 'occurrence' : 'occurrences'}</span>
                     <div class="me-3">${page.metadata ? page.metadata : page.pageTitle}</div>
-                    <div class="ms-auto counter">${pageItemsCount}</div>
+                    <div class="ms-auto counter ${isInspectPlus ? "inspect-plus" : ""}">${pageItemsCount}</div>
                   ${normalMode ? '</button>' : '</div>'}
                 </div>
                 <div id="${accordionId}-content" class="accordion-collapse collapse" aria-labelledby="${accordionId}-title">
@@ -412,7 +412,7 @@ category summary is clicked %>
                       `
                       : `<a href="${page.url}" target="_blank">${page.url}</a>`
                     }
-                    <div class="page-accordion-content-title">
+                    <div class="page-accordion-content-title ${isInspectPlus ? "inspect-plus" : ""}">
                       <span>${getFormattedCategoryTitle(category)} elements</span>
                       <span class="page-items-count">${pageItemsCount}</span>
                     </div>
@@ -553,7 +553,7 @@ category summary is clicked %>
           itemCard = createElementFromString(`
             <li>
               <div class="card mt-3">
-                ${item.displayNeedsReview ? `<div class="needsReview">This occurrence might be a false positive that needs to be verified by a human.</div>` : ``}
+                ${item.displayNeedsReview ? `<div class="needsReview ${isInspectPlus ? "inspect-plus" : ""}">This occurrence might be a false positive that needs to be verified by a human.</div>` : ``}
                 <div class="p-3">
                   ${item.screenshotPath
                     ?