@govtechsg/oobee 0.10.36 → 0.10.42

package/src/npmIndex.ts

@@ -1,9 +1,10 @@
 import fs from 'fs';
 import path from 'path';
 import printMessage from 'print-message';
-import axe from 'axe-core';
+import axe, { ImpactValue } from 'axe-core';
 import { fileURLToPath } from 'url';
-import constants, { BrowserTypes } from './constants/constants.js';
+import { EnqueueStrategy } from 'crawlee';
+import constants, { BrowserTypes, RuleFlags, ScannerTypes } from './constants/constants.js';
 import {
   deleteClonedProfiles,
   getBrowserToRun,
@@ -17,21 +18,53 @@ import generateArtifacts from './mergeAxeResults.js';
 import { takeScreenshotForHTMLElements } from './screenshotFunc/htmlScreenshotFunc.js';
 import { silentLogger } from './logs.js';
 import { alertMessageOptions } from './constants/cliFunctions.js';
+import { evaluateAltText } from './crawlers/custom/evaluateAltText.js';
+import { escapeCssSelector } from './crawlers/custom/escapeCssSelector.js';
+import { framesCheck } from './crawlers/custom/framesCheck.js';
+import { findElementByCssSelector } from './crawlers/custom/findElementByCssSelector.js';
+import { getAxeConfiguration } from './crawlers/custom/getAxeConfiguration.js';
+import { flagUnlabelledClickableElements } from './crawlers/custom/flagUnlabelledClickableElements.js';
+import { xPathToCss } from './crawlers/custom/xPathToCss.js';
+import { extractText } from './crawlers/custom/extractText.js';
+import { gradeReadability } from './crawlers/custom/gradeReadability.js';
 
 const filename = fileURLToPath(import.meta.url);
 const dirname = path.dirname(filename);
 
-export const init = async (
+export const init = async ({
   entryUrl,
   testLabel,
-  name = 'Your Name',
-  email = 'email@domain.com',
+  name,
+  email,
   includeScreenshots = false,
   viewportSettings = { width: 1000, height: 660 }, // cypress' default viewport settings
   thresholds = { mustFix: undefined, goodToFix: undefined },
   scanAboutMetadata = undefined,
-  zip = undefined,
-) => {
+  zip = 'oobee-scan-results',
+  deviceChosen,
+  strategy = EnqueueStrategy.All,
+  ruleset = [RuleFlags.DEFAULT],
+  specifiedMaxConcurrency = 25,
+  followRobots = false,
+}: {
+  entryUrl: string;
+  testLabel: string;
+  name: string;
+  email: string;
+  includeScreenshots?: boolean;
+  viewportSettings?: { width: number; height: number };
+  thresholds?: { mustFix: number; goodToFix: number };
+  scanAboutMetadata?: {
+    browser?: string;
+    viewport?: { width: number; height: number };
+  };
+  zip?: string;
+  deviceChosen?: string;
+  strategy?: EnqueueStrategy;
+  ruleset?: RuleFlags[];
+  specifiedMaxConcurrency?: number;
+  followRobots?: boolean;
+}) => {
   console.log('Starting Oobee');
 
   const [date, time] = new Date().toLocaleString('sv').replaceAll(/-|:/g, '').split(' ');
@@ -39,6 +72,9 @@ export const init = async (
   const sanitisedLabel = testLabel ? `_${testLabel.replaceAll(' ', '_')}` : '';
   const randomToken = `${date}_${time}${sanitisedLabel}_${domain}`;
 
+  const disableOobee = ruleset.includes(RuleFlags.DISABLE_OOBEE);
+  const enableWcagAaa = ruleset.includes(RuleFlags.ENABLE_WCAG_AAA);
+
   // max numbers of mustFix/goodToFix occurrences before test returns a fail
   const { mustFix: mustFixThreshold, goodToFix: goodToFixThreshold } = thresholds;
 
@@ -47,9 +83,16 @@ export const init = async (
   const scanDetails = {
     startTime: new Date(),
     endTime: new Date(),
-    crawlType: 'Custom',
+    deviceChosen,
+    crawlType: ScannerTypes.CUSTOM,
     requestUrl: entryUrl,
     urlsCrawled: { ...constants.urlsCrawledObj },
+    isIncludeScreenshots: includeScreenshots,
+    isAllowSubdomains: strategy,
+    isEnableCustomChecks: ruleset,
+    isEnableWcagAaa: ruleset,
+    isSlowScanMode: specifiedMaxConcurrency,
+    isAdhereRobots: followRobots,
   };
 
   const urlsCrawled = { ...constants.urlsCrawledObj };
@@ -73,66 +116,85 @@ export const init = async (
       path.join(dirname, '../node_modules/axe-core/axe.min.js'),
       'utf-8',
     );
-    async function runA11yScan(elementsToScan = []) {
-      axe.configure({
-        branding: {
-          application: 'oobee',
-        },
-        // Add custom img alt text check
-        checks: [
-          {
-            id: 'oobee-confusing-alt-text',
-            evaluate(node: HTMLElement) {
-              const altText = node.getAttribute('alt');
-              const confusingTexts = ['img', 'image', 'picture', 'photo', 'graphic'];
-
-              if (altText) {
-                const trimmedAltText = altText.trim().toLowerCase();
-                // Check if the alt text exactly matches one of the confusingTexts
-                if (confusingTexts.some(text => text === trimmedAltText)) {
-                  return false; // Fail the check if the alt text is confusing or not useful
-                }
-              }
-
-              return true; // Pass the check if the alt text seems appropriate
-            },
-            metadata: {
-              impact: 'serious', // Set the severity to serious
-              messages: {
-                pass: 'The image alt text is probably useful',
-                fail: "The image alt text set as 'img', 'image', 'picture', 'photo', or 'graphic' is confusing or not useful",
-              },
-            },
-          },
-        ],
-        rules: [
-          { id: 'target-size', enabled: true },
-          {
-            id: 'oobee-confusing-alt-text',
-            selector: 'img[alt]',
-            enabled: true,
-            any: ['oobee-confusing-alt-text'],
-            all: [],
-            none: [],
-            tags: ['wcag2a', 'wcag111'],
-            metadata: {
-              description: 'Ensures image alt text is clear and useful',
-              help: 'Image alt text must not be vague or unhelpful',
-              helpUrl: 'https://www.deque.com/blog/great-alt-text-introduction/',
-            },
-          },
-        ],
-      });
+    async function runA11yScan(elementsToScan = [], gradingReadabilityFlag = '') {
+      const oobeeAccessibleLabelFlaggedXpaths = disableOobee
+        ? []
+        : (await flagUnlabelledClickableElements()).map(item => item.xpath);
+      const oobeeAccessibleLabelFlaggedCssSelectors = oobeeAccessibleLabelFlaggedXpaths
+        .map(xpath => {
+          try {
+            const cssSelector = xPathToCss(xpath);
+            return cssSelector;
+          } catch (e) {
+            console.error('Error converting XPath to CSS: ', xpath, e);
+            return '';
+          }
+        })
+        .filter(item => item !== '');
+
+      axe.configure(getAxeConfiguration({ disableOobee, enableWcagAaa, gradingReadabilityFlag }));
       const axeScanResults = await axe.run(elementsToScan, {
         resultTypes: ['violations', 'passes', 'incomplete'],
       });
+
+      // add custom Oobee violations
+      if (!disableOobee) {
+        // handle css id selectors that start with a digit
+        const escapedCssSelectors = oobeeAccessibleLabelFlaggedCssSelectors.map(escapeCssSelector);
+
+        // Add oobee violations to Axe's report
+        const oobeeAccessibleLabelViolations = {
+          id: 'oobee-accessible-label',
+          impact: 'serious' as ImpactValue,
+          tags: ['wcag2a', 'wcag211', 'wcag412'],
+          description: 'Ensures clickable elements have an accessible label.',
+          help: 'Clickable elements (i.e. elements with mouse-click interaction) must have accessible labels.',
+          helpUrl: 'https://www.deque.com/blog/accessible-aria-buttons',
+          nodes: escapedCssSelectors
+            .map(cssSelector => ({
+              html: findElementByCssSelector(cssSelector),
+              target: [cssSelector],
+              impact: 'serious' as ImpactValue,
+              failureSummary:
+                'Fix any of the following:\n  The clickable element does not have an accessible label.',
+              any: [
+                {
+                  id: 'oobee-accessible-label',
+                  data: null,
+                  relatedNodes: [],
+                  impact: 'serious',
+                  message: 'The clickable element does not have an accessible label.',
+                },
+              ],
+              all: [],
+              none: [],
+            }))
+            .filter(item => item.html),
+        };
+
+        axeScanResults.violations = [...axeScanResults.violations, oobeeAccessibleLabelViolations];
+      }
+
       return {
         pageUrl: window.location.href,
         pageTitle: document.title,
         axeScanResults,
       };
     }
-    return `${axeScript} ${runA11yScan.toString()}`;
+    return `
+      ${axeScript}
+      ${evaluateAltText.toString()}
+      ${escapeCssSelector.toString()}
+      ${framesCheck.toString()}
+      ${findElementByCssSelector.toString()}
+      ${flagUnlabelledClickableElements.toString()}
+      ${xPathToCss.toString()}
+      ${getAxeConfiguration.toString()}
+      ${runA11yScan.toString()}
+      ${extractText.toString()}
+      disableOobee=${disableOobee};
+      enableWcagAaa=${enableWcagAaa};
+    `;
   };
 
   const pushScanResults = async (res, metadata, elementsToClick) => {
@@ -142,7 +204,7 @@ export const init = async (
       const { browserToRun, clonedBrowserDataDir } = getBrowserToRun(BrowserTypes.CHROME);
       const browserContext = await constants.launcher.launchPersistentContext(
         clonedBrowserDataDir,
-        { viewport: scanAboutMetadata.viewport, ...getPlaywrightLaunchOptions(browserToRun) },
+        { viewport: viewportSettings, ...getPlaywrightLaunchOptions(browserToRun) },
       );
       const page = await browserContext.newPage();
       await page.goto(res.pageUrl);
@@ -210,16 +272,21 @@ export const init = async (
       const pagesNotScanned = [
         ...scanDetails.urlsCrawled.error,
         ...scanDetails.urlsCrawled.invalid,
+        ...scanDetails.urlsCrawled.forbidden,
+        ...scanDetails.urlsCrawled.userExcluded,
       ];
       const updatedScanAboutMetadata = {
-        viewport: `${viewportSettings.width} x ${viewportSettings.height}`,
+        viewport: {
+          width: viewportSettings.width,
+          height: viewportSettings.height,
+        },
         ...scanAboutMetadata,
       };
       const basicFormHTMLSnippet = await generateArtifacts(
         randomToken,
         scanDetails.requestUrl,
         scanDetails.crawlType,
-        updatedScanAboutMetadata.viewport,
+        deviceChosen,
         scanDetails.urlsCrawled.scanned,
         pagesNotScanned,
         testLabel,
@@ -273,6 +340,7 @@ export const init = async (
 
   return {
     getScripts,
+    gradeReadability,
     pushScanResults,
     terminate,
     scanDetails,

package/src/screenshotFunc/htmlScreenshotFunc.ts

@@ -14,7 +14,7 @@ export const takeScreenshotForHTMLElements = async (
   page: Page,
   randomToken: string,
   locatorTimeout = 2000,
-  maxScreenshots = 50,
+  maxScreenshots = 100,
 ): Promise<ResultWithScreenshot[]> => {
   const newViolations: ResultWithScreenshot[] = [];
   let screenshotCount = 0;

package/src/screenshotFunc/pdfScreenshotFunc.ts

@@ -1,3 +1,10 @@
+// Monkey patch Path2D to avoid PDF.js crashing
+(globalThis as any).Path2D = class {
+  constructor(_path?: string) {}
+  rect(_x: number, _y: number, _width: number, _height: number) {}
+  addPath(_path: any, _transform?: any) {}
+};
+
 import _ from 'lodash';
 import  { getDocument, PDFPageProxy } from 'pdfjs-dist';
 import fs from 'fs';
@@ -25,11 +32,36 @@ interface pathObject {
   annot?: number;
 }
 
+// Use safe canvas to avoid Path2D issues
+function createSafeCanvas(width: number, height: number) {
+  const canvas = createCanvas(width, height);
+  const ctx = canvas.getContext('2d');
+
+  // Patch clip/stroke/fill/etc. to skip if Path2D is passed
+  const wrapIgnorePath2D = (fn: Function) =>
+    function (...args: any[]) {
+      if (args.length > 0 && args[0] instanceof (globalThis as any).Path2D) {
+        // Skip the operation
+        return;
+      }
+      return fn.apply(this, args);
+    };
+
+  ctx.clip = wrapIgnorePath2D(ctx.clip);
+  ctx.fill = wrapIgnorePath2D(ctx.fill);
+  ctx.stroke = wrapIgnorePath2D(ctx.stroke);
+  ctx.isPointInPath = wrapIgnorePath2D(ctx.isPointInPath);
+  ctx.isPointInStroke = wrapIgnorePath2D(ctx.isPointInStroke);
+
+  return canvas;
+}
+
+// CanvasFactory for Node.js
 function NodeCanvasFactory() {}
 NodeCanvasFactory.prototype = {
   create: function NodeCanvasFactory_create(width: number, height: number) {
     assert(width > 0 && height > 0, 'Invalid canvas size');
-    const canvas = createCanvas(width, height);
+    const canvas = createSafeCanvas(width, height);
     const context = canvas.getContext('2d');
     return {
       canvas,
@@ -69,6 +101,7 @@ export async function getPdfScreenshots(
   const newItems = _.cloneDeep(items);
   const loadingTask = getDocument({
     url: pdfFilePath,
+    canvasFactory,
     standardFontDataUrl: path.join(dirname, '../node_modules/pdfjs-dist/standard_fonts/'),
     disableFontFace: true,
     verbosity: 0,

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

@@ -30,7 +30,7 @@
         const urlScannedField = '64d49b567c3c460011feb8b5'; 
         const encodedUrlScanned = encodeURIComponent(urlScanned);
         const versionNumberField = '64dae8bca2eb61001284298f';
-        const encodedVersionNumber = encodeURIComponent(phAppVersion);
+        const encodedVersionNumber = encodeURIComponent(oobeeAppVersion);
         const aiFeedbackForm = `https://form.gov.sg/64d4a74da3a1e10012fd16a3/?${urlScannedField}=${encodedUrlScanned}&${versionNumberField}=${encodedVersionNumber}`;
       %>
       <a target="_blank" href="<%=aiFeedbackForm%>">Let us know if it helps!</a>

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

@@ -301,7 +301,7 @@
       >
         <path d="M6.49971 0.570312C1.32598 0.570312 0.544922 2.8166 0.544922 6.35557V10.5272C0.544922 14.0662 1.32598 16.3125 6.49971 16.3125C11.6734 16.3125 12.4545 14.0662 12.4545 10.5272V6.35557C12.4545 2.8166 11.6734 0.570312 6.49971 0.570312ZM7.37764 4.33027V13.2761H5.62178V3.60674H8.43721L7.37764 4.33027Z" fill="#9021A6"/>
       </svg>
-      <span id="phAppVersion">N/A</span>
+      <span id="oobeeAppVersion">N/A</span>
     </li>
     <li id = "cypressScanAboutMetadata">
     </li>

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

@@ -3,12 +3,12 @@
     <div class="col-sm-6 text-sm-start">
       <%
         const encodedUrlScanned = encodeURIComponent(urlScanned);
-        const encodedVersionNumber = encodeURIComponent(phAppVersion);
+        const encodedVersionNumber = encodeURIComponent(oobeeAppVersion);
     
         // 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 mailtoSubject = encodeURIComponent(`Support Request - Oobee Version ${oobeeAppVersion}`);
+        const mailtoBody = encodeURIComponent(`URL Scanned: ${urlScanned}\nVersion: ${oobeeAppVersion}`);
         const feedbackEmail = `mailto:${mailtoAddress}?subject=${mailtoSubject}&body=${mailtoBody}`;
       %>
     

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

@@ -93,104 +93,139 @@
   }
 
   function searchIssueDescription(category, filteredItems, isExactSearch, normalizedSearchVal) {
-    filteredItems[category].rules = filteredItems[category].rules.filter(item => {
-      let normalizedDescription = item.description.toLowerCase();
-      return isExactSearch
-        ? normalizedDescription === normalizedSearchVal.slice(1, -1)
-        : normalizedDescription.includes(normalizedSearchVal);
-    });
+    if (Array.isArray(filteredItems[category]?.rules)) {
+      filteredItems[category].rules = filteredItems[category].rules.filter(item => {
+        let normalizedDescription = item.description ? item.description.toLowerCase() : '';
+        return isExactSearch
+          ? normalizedDescription === normalizedSearchVal.slice(1, -1)
+          : normalizedDescription.includes(normalizedSearchVal);
+      });
+    } else {
+      filteredItems[category].rules = [];
+    }
   }
 
   function searchPages(category, filteredItems, isExactSearch, normalizedSearchVal) {
-    // Filter pagesAffected array to only include pages with URLs that match the searchTerm
-    filteredItems[category].rules = filteredItems[category].rules
-      .map(item => {
+    normalizedSearchVal = normalizedSearchVal.trim().toLowerCase();
+    const exactSearchVal = normalizedSearchVal.slice(1, -1).trim();
+
+    // Split search terms into individual words for partial matching
+    const searchWords = normalizedSearchVal.split(/\s+/);
+
+    if (Array.isArray(filteredItems[category]?.rules)) {
+      filteredItems[category].rules = filteredItems[category].rules
+        .map(item => {
+          if (Array.isArray(item.pagesAffected)) {
+            item.pagesAffected = item.pagesAffected.filter(page => {
+              let normalizedPageUrl = page.url ? page.url.toLowerCase() : '';
+              let normalizedPageTitle = page.title ? page.title.toLowerCase() : '';
+
+              if (isExactSearch) {
+                return (
+                  normalizedPageUrl === exactSearchVal || 
+                  normalizedPageTitle === exactSearchVal
+                );
+              } else {
+                // Check each word separately for partial search
+                return searchWords.every(word => 
+                  normalizedPageUrl.includes(word) || normalizedPageTitle.includes(word)
+                );
+              }
+            });
+
+            item.totalItems = item.pagesAffected.reduce(
+              (sum, page) => sum + (Array.isArray(page.items) ? page.items.length : 0),
+              0,
+            );
+          } else {
+            item.pagesAffected = [];
+            item.totalItems = 0;
+          }
+          return item;
+        })
+        .filter(item => item.pagesAffected.length > 0);
+
+      filteredItems[category].totalItems = filteredItems[category].rules.reduce(
+        (sum, rule) => sum + rule.totalItems,
+        0,
+      );
+    } else {
+      filteredItems[category].rules = [];
+      filteredItems[category].totalItems = 0;
+    }
+  }
+
+  function searchHtml(category, filteredItems, isExactSearch, normalizedSearchVal) {
+    normalizedSearchVal = normalizedSearchVal.replace(/\s+/g, '');
+    if (Array.isArray(filteredItems[category]?.rules)) {
+      filteredItems[category].rules.forEach(item => {
         if (Array.isArray(item.pagesAffected)) {
-          item.pagesAffected = item.pagesAffected.filter(page => {
-            let normalizedPageUrl = page.url.toLowerCase();
-            return isExactSearch
-              ? normalizedPageUrl === normalizedSearchVal.slice(1, -1)
-              : normalizedPageUrl.includes(normalizedSearchVal);
+          item.pagesAffected.forEach(page => {
+            // Update items array to only include items with xpath or html starting with searchVal
+            page.items = Array.isArray(page.items)
+              ? page.items.filter(item => {
+                  let normalizedHtml = item.html ? item.html.replace(/\s+/g, '').toLowerCase() : '';
+                  let normalizedXpath = item.xpath ? item.xpath.replace(/\s+/g, '').toLowerCase() : '';
+                  let filterHtml;
+                  if (isExactSearch) {
+                    filterHtml =
+                      normalizedXpath === normalizedSearchVal.slice(1, -1) ||
+                      normalizedHtml === normalizedSearchVal.slice(1, -1);
+                  } else {
+                    filterHtml =
+                      normalizedXpath.includes(normalizedSearchVal) ||
+                      normalizedHtml.includes(normalizedSearchVal);
+                  }
+                  return filterHtml;
+                })
+              : [];
           });
+          // Update totalItems to be the sum of the number of elements in the items array
           item.totalItems = item.pagesAffected.reduce(
             (sum, page) => sum + (Array.isArray(page.items) ? page.items.length : 0),
             0,
           );
-        } else {
-          item.pagesAffected = [];
-          item.totalItems = 0;
         }
-        return item;
-      })
-      .filter(item => item.pagesAffected.length > 0);
-    // Update the totalItems value for the category
-    filteredItems[category].totalItems = filteredItems[category].rules.reduce(
-      (sum, rule) => sum + rule.totalItems,
-      0,
-    );
-  }
-
-  function searchHtml(category, filteredItems, isExactSearch, normalizedSearchVal) {
-    normalizedSearchVal = normalizedSearchVal.replace(/\s+/g, '');
-    filteredItems[category].rules.forEach(item => {
-      if (Array.isArray(item.pagesAffected)) {
-        item.pagesAffected.forEach(page => {
-          // Update items array to only include items with xpath or html starting with searchVal
-          page.items = Array.isArray(page.items)
-            ? page.items.filter(item => {
-                let normalizedHtml = item.html.replace(/\s+/g, '').toLowerCase();
-                let normalizedXpath = item.xpath.replace(/\s+/g, '').toLowerCase();
-                let filterHtml;
-                if (isExactSearch) {
-                  filterHtml =
-                    normalizedXpath === normalizedSearchVal.slice(1, -1) ||
-                    normalizedHtml === normalizedSearchVal.slice(1, -1);
-                } else {
-                  filterHtml =
-                    normalizedXpath.includes(normalizedSearchVal) ||
-                    normalizedHtml.includes(normalizedSearchVal);
-                }
-                return filterHtml;
-              })
-            : [];
-        });
-        // Update totalItems to be the sum of the number of elements in the items array
-        item.totalItems = item.pagesAffected.reduce(
-          (sum, page) => sum + (Array.isArray(page.items) ? page.items.length : 0),
-          0,
-        );
-      }
-    });
-    filteredItems[category].rules = filteredItems[category].rules.filter(
-      rule => rule.totalItems > 0,
-    );
-    // Update the totalItems value for the category
-    filteredItems[category].totalItems = filteredItems[category].rules.reduce(
-      (sum, rule) => sum + rule.totalItems,
-      0,
-    );
+        
+      });
+    
+      filteredItems[category].rules = filteredItems[category].rules.filter(
+        rule => rule.totalItems > 0,
+      );
+      // Update the totalItems value for the category
+      filteredItems[category].totalItems = filteredItems[category].rules.reduce(
+        (sum, rule) => sum + rule.totalItems,
+        0,
+      );
+    } else {
+      filteredItems[category].rules = [];
+      filteredItems[category].totalItems = 0;
+    }
   }
 
   function updateIssueOccurrence(category, filteredItems) {
     //update no. of issues/occurances for each category
-    let rules = filteredItems[category].rules;
+    let rules = Array.isArray(filteredItems[category]?.rules) ? filteredItems[category].rules : [];
     let totalItemsSum = rules.reduce((sum, rule) => sum + rule.totalItems, 0);
     filteredItems[category].totalItems = totalItemsSum;
     let updatedIssueOccurrence = '';
 
     // Determine the correct singular/plural form for 'issue' and 'occurrence'
-    const issueLabel = filteredItems[category].rules.length === 1 ? 'issue' : 'issues';
+    const issueLabel = Array.isArray(filteredItems[category].rules) && filteredItems[category].rules.length === 1 ? 'issue' : 'issues';
     const occurrenceLabel = filteredItems[category].totalItems === 1 ? 'occurrence' : 'occurrences';
 
     if (category !== 'passed' && filteredItems[category].totalItems !== 0) {
-      updatedIssueOccurrence = `<strong style="color: #006b8c;">${filteredItems[category].rules.length}</strong> ${issueLabel} / <strong style="color: #006b8c;">${filteredItems[category].totalItems}</strong> ${occurrenceLabel}`;
+      const rulesLength = filteredItems[category].rules ? filteredItems[category].rules.length : 0;
+      updatedIssueOccurrence = `<strong style="color: #006b8c;">${rulesLength}</strong> ${issueLabel} / <strong style="color: #006b8c;">${filteredItems[category].totalItems}</strong> ${occurrenceLabel}`;
     } else if (category !== 'passed' && filteredItems[category].totalItems === 0) {
       updatedIssueOccurrence = `<strong style="color: #006b8c;">0</strong> issues`;
     } else {
       updatedIssueOccurrence = `<strong style="color: #006b8c;">${filteredItems[category].totalItems}</strong> ${occurrenceLabel}`;
     }
-    if (category !== 'passed')
-      document.getElementById(`${category}ItemsInformation`).innerHTML = updatedIssueOccurrence;
+    if (category !== 'passed') {
+      const element = document.getElementById(`${category}ItemsInformation`);
+      if (element) element.innerHTML = updatedIssueOccurrence;
+    }
   }
 
   function resetIssueOccurrence(filteredItems) {
@@ -207,8 +242,11 @@
       } else {
         updatedIssueOccurrence = `${filteredItems[category].totalItems} ${occurrenceLabel}`;
       }
-      if (category !== 'passed')
-        document.getElementById(`${category}ItemsInformation`).innerHTML = updatedIssueOccurrence;
+
+      if (category !== 'passed') {
+        const elem = document.getElementById(`${category}ItemsInformation`);
+        if (elem) elem.innerHTML = updatedIssueOccurrence;
+      }
     }
   }
 
@@ -246,4 +284,4 @@
       document.getElementById('expandedRuleSearchWarning').appendChild(warningDiv);
     }
   }
-</script>
+</script>

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

@@ -113,8 +113,8 @@ category summary is clicked %>
       const comboboxCategorySelectors = [];
 
       Object.keys(filteredItems).forEach(category => {
-        const ruleInCategory = filteredItems[category].rules.find(r => r.rule === selectedRule.rule);
-
+        const ruleInCategory = filteredItems[category]?.rules?.find(r => r.rule === selectedRule.rule);
+        
         if (ruleInCategory !== undefined && category !== 'passed') {
           if (category !== 'passed') {
             availableFixCategories.push(category);

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

@@ -37,8 +37,8 @@
       <h2 class="mb-2">Summary of issues:</h2>
       <p>
         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 href="https://go.gov.sg/oobee-details" target="_blank">20 WCAG 2.2 Success Criteria (A & AA)</a>
+        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.
@@ -46,4 +46,4 @@
     </div>
     <%- include("components/summaryTable") %>
   </main>
-</div>
+</div>

package/src/static/ejs/report.ejs

@@ -249,8 +249,8 @@
         <a href="#" id="createPassedItemsFile">${passedItems} ${passedItems === 1 ? 'occurrence' : 'occurrences'} passed</a>`;
         itemsElement.innerHTML = itemsContent;
 
-        var phAppVersionElement = document.getElementById('phAppVersion');
-        var versionContent = 'Oobee Version ' + scanData.phAppVersion;
+        var phAppVersionElement = document.getElementById('oobeeAppVersion');
+        var versionContent = 'Oobee Version ' + scanData.oobeeAppVersion;
         phAppVersionElement.innerHTML = versionContent;
 
         var isCustomFlow = scanData.isCustomFlow;
@@ -298,7 +298,7 @@
 
           pagesNotScanned.forEach((page, index) => {
             var listItem = document.createElement('li');
-            listItem.innerHTML = `<a class="not-scanned-url" href="${page.url}" target="_blank">${page.url}</a>`;
+            listItem.innerHTML = `<a class="not-scanned-url" href="${page.url || page }" target="_blank">${page.url || page }</a>`;
             pagesNotScannedList.appendChild(listItem);
           });
         }