@govtechsg/oobee 0.10.33 → 0.10.36

package/.vscode/settings.json

@@ -6,5 +6,5 @@
     "javascript",
     "typescript",
   ],
-  "editor.formatOnSave": true,
+  "editor.formatOnSave": false,
 }

package/DETAILS.md

@@ -14,37 +14,53 @@ Details of each issue and severity rating provided by the current scan engine.
 
 ## Conformance Covered
 
+#### Definitions of Conformance Level, Must Fix, Good To Fix, Manual Review Required Required
+
+In Oobee, issues are grouped into one of three categories:
+- **Must Fix** issues includes WCAG A & AA success criteria (excluding those requiring review). 
+- **Good To Fix** issues includes WCAG Level AAA success criteria issues and all best practice rules that do not necessarily conform to WCAG success criterion but are industry accepted practices that improve the user experience.
+- **Manual Review Required Required** occurrences could potentially be false positive, requiring human validation for accuracy.
+
 Note: Level AAA are disabled by default.  Please specify `enable-wcag-aaa` in ruleset flag to enable AAA rules.
 
-| Conformance | Level |
-|-------------|-------|
-| WCAG 1.1.1  | A     |
-| WCAG 1.2.2  | A     |
-| WCAG 1.3.1  | A     |
-| WCAG 1.3.5  | AA    |
-| WCAG 1.4.1  | A     |
-| WCAG 1.4.2  | A     |
-| WCAG 1.4.3  | AA    |
-| WCAG 1.4.4  | AA    |
-| WCAG 1.4.6  | AAA   |
-| WCAG 1.4.12 | AA    |
-| WCAG 2.1.1  | A     |
-| WCAG 2.2.1  | A     |
-| WCAG 2.2.2  | A     |
-| WCAG 2.2.4  | AAA   |
-| WCAG 2.4.1  | A     |
-| WCAG 2.4.2  | A     |
-| WCAG 2.4.4  | A     |
-| WCAG 2.4.9  | AAA   |
-| WCAG 2.5.8  | AA    |
-| WCAG 3.1.1  | A     |
-| WCAG 3.1.2  | AA    |
-| WCAG 3.1.5  | AAA   |
-| WCAG 3.2.5  | AAA   |
-| WCAG 3.3.2  | A     |
-| WCAG 4.1.2  | A     |
-
-### Summary
+#### WCAG Level of Conformance
+
+- **Level A**: The minimum level of accessibility, addressing the most critical issues.
+- **Level AA**: Builds on Level A, adding more accessibility features. This is the standard most organizations aim for, as it provides reasonable accessibility for most users.
+- **Level AAA**: The highest level of accessibility, encompassing all Level A and AA criteria plus additional stringent requirements. While ideal, it's often not practical or possible for all content. Examples include providing sign language interpretation for all pre-recorded videos.
+
+#### Breakdown of WCAG Clauses and Best Practice
+
+| Conformance | Level | Must Fix | Good to Fix | Exclusive to Manual Review Required |
+|-------------|-------|----------|-------------|--------------|
+| WCAG 1.1.1  | A     | Yes      |             |              |
+| WCAG 1.2.2  | A     | Yes      |             |              |
+| WCAG 1.3.1  | A     | Yes      |             |              |
+| WCAG 1.3.5  | AA    | Yes      |             |              |
+| WCAG 1.4.1  | A     | Yes      |             |              |
+| WCAG 1.4.2  | A     | Yes      |             |              |
+| WCAG 1.4.3  | AA    | Yes      |             |              |
+| WCAG 1.4.4  | AA    | Yes      |             |              |
+| WCAG 1.4.6  | AAA   | Yes      |             |              |
+| WCAG 1.4.12 | AA    | Yes      |             |              |
+| WCAG 2.1.1  | A     | Yes      |             |              |
+| WCAG 2.2.1  | A     | Yes      |             |              |
+| WCAG 2.2.2  | A     | Yes      |             |              |
+| WCAG 2.2.4  | AAA   |          | Yes         |              |
+| WCAG 2.4.1  | A     | Yes      |             |              |
+| WCAG 2.4.2  | A     | Yes      |             |              |
+| WCAG 2.4.4  | A     | Yes      |             |              |
+| WCAG 2.4.9  | AAA   |          | Yes         |              |
+| WCAG 2.5.8  | AA    | Yes      |             |              |
+| WCAG 3.1.1  | A     | Yes      |             |              |
+| WCAG 3.1.2  | AA    | Yes      |             |              |
+| WCAG 3.1.5  | AAA   |          |             | Yes          |
+| WCAG 3.2.5  | AAA   |          | Yes         |              |
+| WCAG 3.3.2  | A     | Yes      |             |              |
+| WCAG 4.1.2  | A     | Yes      |             |              |
+| Best Practice|      |          | Yes         |              |
+
+### Summary of WCAG Clauses Supported
 | Level | Count |
 |-------|-------|
 | A     | 15    |
@@ -61,7 +77,7 @@ Note: Level AAA are disabled by default.  Please specify `enable-wcag-aaa` in ru
 | aria-braille-equivalent     | Ensure aria-braillelabel and aria-brailleroledescription have a non-braille equivalent                                                                | Must Fix    | WCAG 4.1.2             |
 | aria-command-name           | Ensures every ARIA button, link and menuitem has an accessible name                                                                                   | Must Fix    | WCAG 4.1.2             |
 | aria-conditional-attr       | Ensures ARIA attributes are used as described in the specification of the element's role                                                              | Must Fix    | WCAG 4.1.2             |
-| aria-deprecated-role        | Ensures elements do not use deprecated roles                                                                                                          | Good To Fix | WCAG 4.1.2             |
+| aria-deprecated-role        | Ensures elements do not use deprecated roles                                                                                                          | Must Fix    | WCAG 4.1.2             |
 | aria-hidden-body            | Ensures aria-hidden="true" is not present on the document body.                                                                                       | Must Fix    | WCAG 4.1.2             |
 | aria-hidden-focus           | Ensures aria-hidden elements are not focusable nor contain focusable elements                                                                         | Must Fix    | WCAG 4.1.2             |
 | aria-input-field-name       | Ensures every ARIA input field has an accessible name                                                                                                 | Must Fix    | WCAG 4.1.2             |
@@ -89,7 +105,7 @@ Note: Level AAA are disabled by default.  Please specify `enable-wcag-aaa` in ru
 | frame-title                 | Ensures `<iframe>` and `<frame>` elements have an accessible name                                                                                     | Must Fix    | WCAG 4.1.2             |
 | html-has-lang               | Ensures every HTML document has a lang attribute                                                                                                      | Must Fix    | WCAG 3.1.1             |
 | html-lang-valid             | Ensures the lang attribute of the `<html>` element has a valid value                                                                                  | Must Fix    | WCAG 3.1.1             |
-| html-xml-lang-mismatch      | Ensure that HTML elements with both valid lang and xml:lang attributes agree on the base language of the page                                         | Good to Fix | WCAG 3.1.1             |
+| html-xml-lang-mismatch      | Ensure that HTML elements with both valid lang and xml:lang attributes agree on the base language of the page                                         | Must Fix    | WCAG 3.1.1             |
 | image-alt                   | Ensures `<img>` elements have alternate text or a role of none or presentation                                                                        | Must Fix    | WCAG 1.1.1             |
 | input-button-name           | Ensures input buttons have discernible text                                                                                                           | Must Fix    | WCAG 4.1.2             |
 | input-image-alt             | Ensures `<input type="image">` elements have alternate text                                                                                           | Must Fix    | WCAG 1.1.1, WCAG 4.1.2 |
@@ -101,12 +117,12 @@ Note: Level AAA are disabled by default.  Please specify `enable-wcag-aaa` in ru
 | marquee                     | Ensures `<marquee>` elements are not used                                                                                                             | Must Fix    | WCAG 2.2.2             |
 | meta-refresh                | Ensures `<meta http-equiv="refresh">` is not used for delayed refresh                                                                                 | Must Fix    | WCAG 2.2.1             |
 | nested-interactive          | Ensures interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies | Must Fix    | WCAG 4.1.2             |
-| no-autoplay-audio           | Ensures `<video>` or `<audio>` elements do not autoplay audio for more than 3 seconds without a control mechanism to stop or mute the audio           | Good to Fix | WCAG 1.4.2             |
+| no-autoplay-audio           | Ensures `<video>` or `<audio>` elements do not autoplay audio for more than 3 seconds without a control mechanism to stop or mute the audio           | Must Fix    | WCAG 1.4.2             |
 | object-alt                  | Ensures `<object>` elements have alternate text                                                                                                       | Must Fix    | WCAG 1.1.1             |
 | role-img-alt                | Ensures [role="img"] elements have alternate text                                                                                                     | Must Fix    | WCAG 1.1.1             |
 | scrollable-region-focusable | Ensure elements that have scrollable content are accessible by keyboard                                                                               | Must Fix    | WCAG 2.1.1             |
 | select-name                 | Ensures select element has an accessible name                                                                                                         | Must Fix    | WCAG 4.1.2             |
-| server-side-image-map       | Ensures that server-side image maps are not used                                                                                                      | Good to Fix | WCAG 2.1.1             |
+| server-side-image-map       | Ensures that server-side image maps are not used                                                                                                      | Must Fix    | WCAG 2.1.1             |
 | svg-img-alt                 | Ensures `<svg>` elements with an img, graphics-document or graphics-symbol role have an accessible text                                               | Must Fix    | WCAG 1.1.1             |
 | td-headers-attr             | Ensure that each cell in a table that uses the headers attribute refers only to other cells in that table                                             | Must Fix    | WCAG 1.3.1             |
 | th-has-data-cells           | Ensure that `<th>` elements and elements with role=columnheader/rowheader have data cells they describe                                               | Must Fix    | WCAG 1.3.1             |
@@ -139,26 +155,26 @@ Note: Level AAA are disabled by default.  Please specify `enable-wcag-aaa` in ru
 
 | Issue ID                     | Issue Description                                                                                                | Severity    | Conformance            |
 | ---------------------------- | ---------------------------------------------------------------------------------------------------------------- | ----------- | ---------------------- |
-| color-contrast-enhanced      | Ensure the contrast between foreground and background colors meets WCAG 2 AAA enhanced contrast ratio thresholds | Must Fix    | WCAG 1.4.6             |
+| color-contrast-enhanced      | Ensure the contrast between foreground and background colors meets WCAG 2 AAA enhanced contrast ratio thresholds | Good to Fix | WCAG 1.4.6             |
 | identical-links-same-purpose | Ensure that links with the same accessible name serve a similar purpose                                          | Good to Fix | WCAG 2.4.9             |
 | meta-refresh-no-exceptions   | Ensure <meta http-equiv="refresh"> is not used for delayed refresh                                               | Good to Fix | WCAG 2.2.4, WCAG 3.2.5 |
-| oobee-grading-text-contents               | Text content should be clear and plain to ensure that it is easily understood.                                                                                                              | Needs Review    | WCAG 3.1.5             |
+| oobee-grading-text-contents               | Text content should be clear and plain to ensure that it is easily understood.                                                                                                              | Manual Review Required Required    | WCAG 3.1.5             |
 
 ## Best Practice
 
 | Issue ID                            | Issue Description                                                                                                                              | Severity    |
 | ----------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
-| accesskeys                          | Ensures every accesskey attribute value is unique                                                                                              | Must Fix    |
+| accesskeys                          | Ensures every accesskey attribute value is unique                                                                                              | Good to Fix |
 | aria-allowed-role                   | Ensures role attribute has an appropriate value for the element                                                                                | Good to Fix |
-| aria-dialog-name                    | Ensures every ARIA dialog and alertdialog node has an accessible name                                                                          | Must Fix    |
-| aria-text                           | Ensures role="text" is used on elements with no focusable descendants                                                                          | Must Fix    |
-| aria-treeitem-name                  | Ensures every ARIA treeitem node has an accessible name                                                                                        | Must Fix    |
+| aria-dialog-name                    | Ensures every ARIA dialog and alertdialog node has an accessible name                                                                          | Good to Fix |
+| aria-text                           | Ensures role="text" is used on elements with no focusable descendants                                                                          | Good to Fix |
+| aria-treeitem-name                  | Ensures every ARIA treeitem node has an accessible name                                                                                        | Good to Fix |
 | empty-heading                       | Ensures headings have discernible text                                                                                                         | Good to Fix |
 | empty-table-header                  | Ensures table headers have discernible text                                                                                                    | Good to Fix |
-| frame-tested                        | Ensures `<iframe>` and `<frame>` elements contain the axe-core script                                                                          | Must Fix    |
+| frame-tested                        | Ensures `<iframe>` and `<frame>` elements contain the axe-core script                                                                          | Good to Fix |
 | heading-order                       | Ensures the order of headings is semantically correct                                                                                          | Good to Fix |
 | image-redundant-alt                 | Ensure image alternative is not repeated as text                                                                                               | Good to Fix |
-| label-title-only                    | Ensures that every form element has a visible label and is not solely labeled using hidden labels, or the title or aria-describedby attributes | Must Fix    |
+| label-title-only                    | Ensures that every form element has a visible label and is not solely labeled using hidden labels, or the title or aria-describedby attributes | Good to Fix |
 | landmark-banner-is-top-level        | Ensures the banner landmark is at top level                                                                                                    | Good to Fix |
 | landmark-complementary-is-top-level | Ensures the complementary landmark or aside is at top level                                                                                    | Good to Fix |
 | landmark-contentinfo-is-top-level   | Ensures the contentinfo landmark is at top level                                                                                               | Good to Fix |
@@ -174,5 +190,5 @@ Note: Level AAA are disabled by default.  Please specify `enable-wcag-aaa` in ru
 | region                              | Ensures all page content is contained by landmarks                                                                                             | Good to Fix |
 | scope-attr-valid                    | Ensures the scope attribute is used correctly on tables                                                                                        | Good to Fix |
 | skip-link                           | Ensure all skip links have a focusable target                                                                                                  | Good to Fix |
-| tabindex                            | Ensures tabindex attribute values are not greater than 0                                                                                       | Must Fix    |
+| tabindex                            | Ensures tabindex attribute values are not greater than 0                                                                                       | Good to Fix |
 | table-duplicate-name                | Ensure the `<caption>` element does not contain the same text as the summary attribute                                                         | Good to Fix |

package/Dockerfile

@@ -1,6 +1,6 @@
 # Use Microsoft Playwright image as base image
 # Node version is v22
-FROM mcr.microsoft.com/playwright:v1.50.0-noble
+FROM mcr.microsoft.com/playwright:v1.50.1-noble
 
 # Installation of packages for oobee and runner
 RUN apt-get update && apt-get install -y zip git

package/__mocks__/mock-report.html

@@ -1493,7 +1493,7 @@
     <div class="container-fluid">
       <div class="row text-center pt-2 pb-2">
         <div class="col-sm-6 text-sm-left">
-          <a href="mailto:enquiries_HATS@tech.gov.sg">Help us improve</a>
+          <a href="mailto:oobee@wogaa.gov.sg">Help us improve</a>
           <hr class="d-sm-none" />
         </div>
         <div class="col-sm-6 text-sm-right">

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@govtechsg/oobee",
   "main": "dist/npmIndex.js",
-  "version": "0.10.33",
+  "version": "0.10.36",
   "type": "module",
   "author": "Government Technology Agency <info@tech.gov.sg>",
   "dependencies": {

package/src/constants/constants.ts

@@ -178,14 +178,14 @@ export const axeScript = path.join(dirname, '../../node_modules/axe-core/axe.min
 export class UrlsCrawled {
   toScan: string[] = [];
   scanned: { url: string; actualUrl: string; pageTitle: string }[] = [];
-  invalid: string[] = [];
+  invalid: { url: string; actualUrl: string; pageTitle: string }[] = [];
   scannedRedirects: { fromUrl: string; toUrl: string }[] = [];
   notScannedRedirects: { fromUrl: string; toUrl: string }[] = [];
   outOfDomain: string[] = [];
-  blacklisted: string[] = [];
+  blacklisted: { url: string; actualUrl: string; pageTitle: string }[] = [];
   error: { url: string }[] = [];
   exceededRequests: string[] = [];
-  forbidden: string[] = [];
+  forbidden: { url: string; actualUrl: string; pageTitle: string }[] = [];
   userExcluded: { url: string; actualUrl: string; pageTitle: string }[] = [];
   everything: string[] = [];
 

package/src/constants/itemTypeDescription.ts

@@ -1,10 +1,10 @@
 const itemTypeDescription = {
   mustFix:
-    'Issues that need to be addressed promptly, as they create significant barriers for persons with disabilities and can prevent them from accessing essential content or features.',
+    'Must Fix issues includes WCAG A & AA success criteria (excluding those requiring review).',
   goodToFix:
-    'Issues that could pose certain challenges for persons with disabilities (PWDs), but are unlikely to completely hinder their access to essential content or features.',
+    'Good to Fix issues includes WCAG Level AAA success criteria issues and all best practice rules that do not necessarily conform to WCAG success criterion but are industry accepted practices that improve the user experience.',
   needsReview:
-    'Occurrences could potentially be false positives, requiring human validation for accuracy.',
+    'Manual Review Required occurrences could potentially be false positive, requiring human validation for accuracy.',
   passed: 'Occurrences that passed the automated checks.',
 };
 

package/src/crawlers/commonCrawlerFunc.ts

@@ -138,9 +138,15 @@ export const filterAxeResults = (
 
     nodes.forEach(node => {
       const { impact } = node;
+      const hasWcag2a = conformance.includes('wcag2a');
+      const hasWcag2aa = conformance.includes('wcag2aa');
+      const hasWcag2aaa = conformance.includes('wcag2aaa');
+
       if (displayNeedsReview) {
         addTo(needsReview, node);
-      } else if (impact === 'critical' || impact === 'serious') {
+      } else if (hasWcag2aaa) {
+        addTo(goodToFix, node);
+      } else if (hasWcag2a || hasWcag2aa) {
         addTo(mustFix, node);
       } else {
         addTo(goodToFix, node);

package/src/crawlers/crawlDomain.ts

@@ -638,7 +638,12 @@ const crawlDomain = async ({
               numScanned: urlsCrawled.scanned.length,
               urlScanned: request.url,
             });
-            urlsCrawled.blacklisted.push(request.url);
+            urlsCrawled.blacklisted.push({
+              url: request.url,
+              pageTitle: request.url,
+              actualUrl: actualUrl, // i.e. actualUrl
+            });
+
             return;
           }
           const { pdfFileName, url } = handlePdfDownload(
@@ -662,7 +667,12 @@ const crawlDomain = async ({
             numScanned: urlsCrawled.scanned.length,
             urlScanned: request.url,
           });
-          urlsCrawled.blacklisted.push(request.url);
+          urlsCrawled.blacklisted.push({
+            url: request.url,
+            pageTitle: request.url,
+            actualUrl: actualUrl, // i.e. actualUrl
+          });
+
           return;
         }
 
@@ -671,7 +681,12 @@ const crawlDomain = async ({
             numScanned: urlsCrawled.scanned.length,
             urlScanned: request.url,
           });
-          urlsCrawled.blacklisted.push(request.url);
+          urlsCrawled.blacklisted.push({
+            url: request.url,
+            pageTitle: request.url,
+            actualUrl: actualUrl, // i.e. actualUrl
+          });
+
           return;
         }
 
@@ -691,7 +706,12 @@ const crawlDomain = async ({
             numScanned: urlsCrawled.scanned.length,
             urlScanned: request.url,
           });
-          urlsCrawled.forbidden.push(request.url);
+          urlsCrawled.forbidden.push({
+            url: request.url,
+            pageTitle: request.url,
+            actualUrl: actualUrl, // i.e. actualUrl
+          });
+
           return;
         }
 
@@ -700,7 +720,12 @@ const crawlDomain = async ({
             numScanned: urlsCrawled.scanned.length,
             urlScanned: request.url,
           });
-          urlsCrawled.invalid.push(request.url);
+          urlsCrawled.invalid.push({
+            url: request.url,
+            pageTitle: request.url,
+            actualUrl: actualUrl, // i.e. actualUrl
+          });
+
           return;
         }
 
@@ -779,7 +804,12 @@ const crawlDomain = async ({
             numScanned: urlsCrawled.scanned.length,
             urlScanned: request.url,
           });
-          urlsCrawled.blacklisted.push(request.url);
+          urlsCrawled.blacklisted.push({
+            url: request.url,
+            pageTitle: request.url,
+            actualUrl: actualUrl, // i.e. actualUrl
+          });
+
         }
 
         if (followRobots) await getUrlsFromRobotsTxt(request.url, browser);

package/src/crawlers/crawlSitemap.ts

@@ -250,7 +250,12 @@ const crawlSitemap = async (
             numScanned: urlsCrawled.scanned.length,
             urlScanned: request.url,
           });
-          urlsCrawled.blacklisted.push(request.url);
+          urlsCrawled.blacklisted.push({
+            url: request.url,
+            pageTitle: request.url,
+            actualUrl: actualUrl, // i.e. actualUrl
+          });
+
           return;
         }
         // pushes download promise into pdfDownloads
@@ -297,7 +302,12 @@ const crawlSitemap = async (
           numScanned: urlsCrawled.scanned.length,
           urlScanned: request.url,
         });
-        urlsCrawled.invalid.push(request.url);
+        urlsCrawled.invalid.push({
+          url: request.url,
+          pageTitle: request.url,
+          actualUrl: actualUrl, // i.e. actualUrl
+        });
+
         return;
       }
 

package/src/crawlers/custom/flagUnlabelledClickableElements.ts

@@ -874,7 +874,6 @@ export const flagUnlabelledClickableElements = async (page: Page) => {
     }
 
     function flagElements() {
-      console.time('Accessibility Check Time');
 
       const currentFlaggedElementsByDocument: Record<string, HTMLElement[]> = {}; // Temporary object to hold current flagged elements
 
@@ -1014,7 +1013,6 @@ export const flagUnlabelledClickableElements = async (page: Page) => {
       previousFlaggedXPathsByDocument = { ...flaggedXPathsByDocument };
 
       cleanupFlaggedElements();
-      console.timeEnd('Accessibility Check Time');
       return previousAllFlaggedElementsXPaths;
     }
 

package/src/crawlers/pdfScanFunc.ts

@@ -295,7 +295,11 @@ export const handlePdfDownload = (
             numScanned: urlsCrawled.scanned.length,
             urlScanned: request.url,
           });
-          urlsCrawled.invalid.push(url);
+          urlsCrawled.invalid.push({
+            url: request.url,
+            pageTitle: url,
+            actualUrl: url, // i.e. actualUrl
+          });
         }
         resolve();
       });

package/src/mergeAxeResults.ts

@@ -725,6 +725,8 @@ const writeJsonAndBase64Files = async (
   scanItemsBase64FilePath: string;
   scanItemsSummaryJsonFilePath: string;
   scanItemsSummaryBase64FilePath: string;
+  scanItemsMiniReportJsonFilePath: string;
+  scanItemsMiniReportBase64FilePath: string;
   scanDataJsonFileSize: number;
   scanItemsJsonFileSize: number;
 }> => {
@@ -777,7 +779,7 @@ const writeJsonAndBase64Files = async (
     topTenIssues,
   } = rest;
 
-  const summaryItems = {
+  const summaryItemsMini = {
     ...items,
     pagesScanned,
     topTenPagesWithMostIssues,
@@ -789,6 +791,32 @@ const writeJsonAndBase64Files = async (
     topTenIssues,
   };
 
+  const {
+    jsonFilePath: scanItemsMiniReportJsonFilePath,
+    base64FilePath: scanItemsMiniReportBase64FilePath,
+  } = await writeJsonFileAndCompressedJsonFile(summaryItemsMini, storagePath, 'scanItemsSummaryMiniReport');
+
+  const summaryItems = {
+    mustFix: {
+      totalItems: items.mustFix?.totalItems || 0,
+      totalRuleIssues: items.mustFix?.totalRuleIssues || 0,
+    },
+    goodToFix: {
+      totalItems: items.goodToFix?.totalItems || 0,
+      totalRuleIssues: items.goodToFix?.totalRuleIssues || 0,
+    },
+    needsReview: {
+      totalItems: items.needsReview?.totalItems || 0,
+      totalRuleIssues: items.needsReview?.totalRuleIssues || 0,
+    },
+    topTenPagesWithMostIssues,
+    wcagLinks,
+    wcagPassPercentage,
+    totalPagesScanned,
+    totalPagesNotScanned,
+    topTenIssues,
+  };
+
   const {
     jsonFilePath: scanItemsSummaryJsonFilePath,
     base64FilePath: scanItemsSummaryBase64FilePath,
@@ -801,6 +829,8 @@ const writeJsonAndBase64Files = async (
     scanItemsBase64FilePath,
     scanItemsSummaryJsonFilePath,
     scanItemsSummaryBase64FilePath,
+    scanItemsMiniReportJsonFilePath,
+    scanItemsMiniReportBase64FilePath,
     scanDataJsonFileSize: fs.statSync(scanDataJsonFilePath).size,
     scanItemsJsonFileSize: fs.statSync(scanItemsJsonFilePath).size,
   };
@@ -1052,8 +1082,8 @@ const flattenAndSortResults = (allIssues: AllIssues, isCustomFlow: boolean) => {
   };
 
   allIssues.topFiveMostIssues.sort((page1, page2) => page2.totalIssues - page1.totalIssues);
-  allIssues.topFiveMostIssues = allIssues.topFiveMostIssues.slice(0, 5);
   allIssues.topTenPagesWithMostIssues = allIssues.topFiveMostIssues.slice(0, 10);
+  allIssues.topFiveMostIssues = allIssues.topFiveMostIssues.slice(0, 5);
   updateIssuesWithOccurrences(allIssues.topTenPagesWithMostIssues);
   const topTenIssues = getTopTenIssues(allIssues);
   allIssues.topTenIssues = topTenIssues;
@@ -1234,7 +1264,7 @@ const generateArtifacts = async (
     '',
     `Must Fix: ${allIssues.items.mustFix.rules.length} ${Object.keys(allIssues.items.mustFix.rules).length === 1 ? 'issue' : 'issues'} / ${allIssues.items.mustFix.totalItems} ${allIssues.items.mustFix.totalItems === 1 ? 'occurrence' : 'occurrences'}`,
     `Good to Fix: ${allIssues.items.goodToFix.rules.length} ${Object.keys(allIssues.items.goodToFix.rules).length === 1 ? 'issue' : 'issues'} / ${allIssues.items.goodToFix.totalItems} ${allIssues.items.goodToFix.totalItems === 1 ? 'occurrence' : 'occurrences'}`,
-    `Needs Review: ${allIssues.items.needsReview.rules.length} ${Object.keys(allIssues.items.needsReview.rules).length === 1 ? 'issue' : 'issues'} / ${allIssues.items.needsReview.totalItems} ${allIssues.items.needsReview.totalItems === 1 ? 'occurrence' : 'occurrences'}`,
+    `Manual Review Required: ${allIssues.items.needsReview.rules.length} ${Object.keys(allIssues.items.needsReview.rules).length === 1 ? 'issue' : 'issues'} / ${allIssues.items.needsReview.totalItems} ${allIssues.items.needsReview.totalItems === 1 ? 'occurrence' : 'occurrences'}`,
     `Passed: ${allIssues.items.passed.totalItems} ${allIssues.items.passed.totalItems === 1 ? 'occurrence' : 'occurrences'}`,
   ]);
 
@@ -1244,7 +1274,7 @@ const generateArtifacts = async (
     createScreenshotsFolder(randomToken);
   }
 
-  allIssues.wcagPassPercentage = getWcagPassPercentage(allIssues.wcagViolations);
+  allIssues.wcagPassPercentage = getWcagPassPercentage(allIssues.wcagViolations, allIssues.advancedScanOptionsSummaryItems.showEnableWcagAaa);
   consoleLogger.info(
     `advancedScanOptionsSummaryItems is ${allIssues.advancedScanOptionsSummaryItems}`,
   );
@@ -1293,6 +1323,8 @@ const generateArtifacts = async (
     scanItemsBase64FilePath,
     scanItemsSummaryJsonFilePath,
     scanItemsSummaryBase64FilePath,
+    scanItemsMiniReportJsonFilePath,
+    scanItemsMiniReportBase64FilePath,
     scanDataJsonFileSize,
     scanItemsJsonFileSize,
   } = await writeJsonAndBase64Files(allIssues, storagePath);
@@ -1306,12 +1338,13 @@ const generateArtifacts = async (
     storagePath,
   );
   await writeSummaryHTML(allIssues, storagePath);
+
   await writeHTML(
     allIssues,
     storagePath,
     'report',
     scanDataBase64FilePath,
-    resultsTooBig ? scanItemsSummaryBase64FilePath : scanItemsBase64FilePath,
+    resultsTooBig ? scanItemsMiniReportBase64FilePath : scanItemsBase64FilePath,
   );
 
   if (!generateJsonFiles) {

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

@@ -1,7 +1,7 @@
 <% const formattedCategoryTitles = { 
   mustFix: "Must Fix",
   goodToFix: "Good to Fix",
-  needsReview: "Needs Review",
+  needsReview: "Manual Review Required",
   passed: "Passed"
 } %>
 <li class="d-flex align-items-center mb-3 justify-content-between">

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

@@ -21,7 +21,7 @@
       </div>
       <div class="modal-body">
         <div>
-          Only 20 WCAG 2.2 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">
@@ -41,7 +41,8 @@
           </div>
         </div>
         <div>
-          <strong>Manual testing is still recommended</strong> as they involve subjective judgements
+          <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>

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

@@ -1,17 +1,23 @@
 <footer aria-label="Report footer" id="footer" class="card">
   <div class="row mx-0">
     <div class="col-sm-6 text-sm-start">
-      <% const urlScannedField='64d49b567c3c460011feb8b5' ; const encodedUrlScanned=encodeURIComponent(urlScanned);
-        const versionNumberField='64db1f79141a46001243b77a' ; const
-        encodedVersionNumber=encodeURIComponent(phAppVersion); const
-        feedbackForm=`https://form.gov.sg/64d1fcde4d0bb70012010995/?${urlScannedField}=${encodedUrlScanned}&${versionNumberField}=${encodedVersionNumber}`;
-        %>
-        <a href="<%=feedbackForm%>" target="_blank">Help us improve</a>
+      <%
+        const encodedUrlScanned = encodeURIComponent(urlScanned);
+        const encodedVersionNumber = encodeURIComponent(phAppVersion);
+    
+        // Use %0A for line breaks in the body
+        const mailtoAddress = `oobee@wogaa.gov.sg`;
+        const mailtoSubject = encodeURIComponent(`Support Request - Oobee Version ${phAppVersion}`);
+        const mailtoBody = encodeURIComponent(`URL Scanned: ${urlScanned}\nVersion: ${phAppVersion}`);
+        const feedbackEmail = `mailto:${mailtoAddress}?subject=${mailtoSubject}&body=${mailtoBody}`;
+      %>
+    
+        <a href="<%=feedbackEmail%>" aria-label="Send feedback to <%=mailtoAddress%>" target="_blank">Help us improve</a>
         <hr class="d-sm-none" />
     </div>
     <div class="col-sm-6 text-sm-end">
       Created by
-      <a href="https://form.gov.sg/64d1fcde4d0bb70012010995" target="_blank">GovTech Accessibility Enabling Team</a> |
+      <a href="https://go.gov.sg/a11y" target="_blank">GovTech Accessibility Enabling Team</a> |
       <a href="https://go.gov.sg/oobee-report-third-party-licenses" target="_blank">Third-Party Licenses</a>
     </div>
   </div>

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

@@ -414,7 +414,7 @@
     const titles = {
       mustFix: 'Must Fix',
       goodToFix: 'Good to Fix',
-      needsReview: 'Needs Review',
+      needsReview: 'Manual Review Required',
       passed: 'Passed',
     };
 

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

@@ -13,14 +13,15 @@
             <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
+                <%= wcagPassPercentage.totalWcagChecksAA - wcagPassPercentage.totalWcagViolationsAA  %> /  <%= wcagPassPercentage.totalWcagChecksAA %> 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>
+                <rect width="<%= wcagPassPercentage.passPercentageAA %>%" height="6" rx="3" fill="#9021a6" style="">
+                </rect>
               </svg>
             </div>
             <ul class="unbulleted-list">
@@ -35,10 +36,10 @@
     <div class="mx-3">
       <h2 class="mb-2">Summary of issues:</h2>
       <p>
-        Only a subset of
-        <a href="https://www.w3.org/WAI/WCAG22/quickref/?versions=2.2" target=" _blank">WCAG 2.2</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
+        Only 
+        <a href="https://go.gov.sg/oobee-details" target=" _blank">20 WCAG 2.2</a>
+        Success Criteria (A & AA) can be automatically checked so
+        <a aria-label="Manual testing guide" href="https://go.gov.sg/a11y-manual-testing" target="_blank">manual
           testing</a>
         is still required. For more details, please refer to the HTML report.
       </p>

package/src/static/ejs/report.ejs

@@ -47,9 +47,9 @@
       // Scan DATA FUNCTION TO REPLACE NA
       const scanDataWCAGCompliance = () => {
         const passPecentage = document.getElementById('passPercentage');
-        passPecentage.innerHTML = scanData.wcagPassPercentage + '% of automated checks';
+        passPecentage.innerHTML = (scanData.wcagPassPercentage.totalWcagChecksAA - scanData.wcagPassPercentage.totalWcagViolationsAA) + ' / ' + scanData.wcagPassPercentage.totalWcagChecksAA + ' of automated checks';
         const wcagBarProgess = document.getElementById('wcag-compliance-passes-bar-progress');
-        wcagBarProgess.style.width = `${scanData.wcagPassPercentage}%`; // Set this to your desired width
+        wcagBarProgess.style.width = `${scanData.wcagPassPercentage.passPercentageAA}%`; // Set this to your desired width
 
         const wcagLinksList = document.getElementById('wcagLinksList');
 
@@ -94,7 +94,7 @@
         const formattedCategoryTitles = {
           mustFix: 'Must Fix',
           goodToFix: 'Good to Fix',
-          needsReview: 'Needs Review',
+          needsReview: 'Manual Review Required',
           passed: 'Passed',
         };
 

package/src/utils.ts

@@ -190,19 +190,42 @@ export const cleanUp = async pathToDelete => {
 //     timeZoneName: "longGeneric",
 //   });
 
-export const getWcagPassPercentage = (wcagViolations: string[]): string => {
+export const getWcagPassPercentage = (
+  wcagViolations: string[],
+  showEnableWcagAaa: boolean
+): {
+  passPercentageAA: string;
+  totalWcagChecksAA: number;
+  totalWcagViolationsAA: number;
+  passPercentageAAandAAA: string;
+  totalWcagChecksAAandAAA: number;
+  totalWcagViolationsAAandAAA: number;
+} => {
 
   // These AAA rules should not be counted as WCAG Pass Percentage only contains A and AA
-  const wcagAAA = ['WCAG 1.4.6', 'WCAG 2.2.4', 'WCAG 2.4.9', 'WCAG 3.1.5', 'WCAG 3.2.5'];
-
-  const filteredWcagLinks = Object.keys(constants.wcagLinks).filter(key => !wcagAAA.includes(key));
-  const filteredWcagViolations = wcagViolations.filter(violation => !wcagAAA.includes(violation));
-  const totalChecks = filteredWcagLinks.length;
-
-  const passedChecks = totalChecks - filteredWcagViolations.length;
-  const passPercentage = (passedChecks / totalChecks) * 100;
-
-  return passPercentage.toFixed(2); // toFixed returns a string, which is correct here
+  const wcagAAALinks = ['WCAG 1.4.6', 'WCAG 2.2.4', 'WCAG 2.4.9', 'WCAG 3.1.5', 'WCAG 3.2.5'];
+  const wcagAAA = ['wcag146', 'wcag224', 'wcag249', 'wcag315', 'wcag325'];
+  
+  const wcagLinksAAandAAA = constants.wcagLinks;
+  
+  const wcagViolationsAAandAAA = showEnableWcagAaa ? wcagViolations.length : null;
+  const totalChecksAAandAAA = showEnableWcagAaa ? Object.keys(wcagLinksAAandAAA).length : null;
+  const passedChecksAAandAAA = showEnableWcagAaa ? totalChecksAAandAAA - wcagViolationsAAandAAA : null;
+  const passPercentageAAandAAA = showEnableWcagAaa ? (totalChecksAAandAAA === 0 ? 0 : (passedChecksAAandAAA / totalChecksAAandAAA) * 100) : null;
+
+  const wcagViolationsAA = wcagViolations.filter(violation => !wcagAAA.includes(violation)).length;
+  const totalChecksAA = Object.keys(wcagLinksAAandAAA).filter(key => !wcagAAALinks.includes(key)).length;
+  const passedChecksAA = totalChecksAA - wcagViolationsAA;
+  const passPercentageAA = totalChecksAA === 0 ? 0 : (passedChecksAA / totalChecksAA) * 100;
+
+  return {
+    passPercentageAA: passPercentageAA.toFixed(2), // toFixed returns a string, which is correct here
+    totalWcagChecksAA: totalChecksAA,
+    totalWcagViolationsAA: wcagViolationsAA,
+    passPercentageAAandAAA: passPercentageAAandAAA ? passPercentageAAandAAA.toFixed(2) : null, // toFixed returns a string, which is correct here
+    totalWcagChecksAAandAAA: totalChecksAAandAAA,
+    totalWcagViolationsAAandAAA: wcagViolationsAAandAAA,
+  };
 };
 
 export const getFormattedTime = inputDate => {