@govtechsg/oobee 0.10.28 → 0.10.29

package/Dockerfile

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

package/INSTALLATION.md

@@ -6,7 +6,7 @@ Oobee (CLI) is provided as a portable distribution which minimises installation
 
 Oobee is a customisable, automated accessibility testing tool that allows software development teams to find and fix accessibility problems to improve persons with disabilities (PWDs) access to digital services.
 
-Oobee (CLI) allows software engineers to run Oobee as part of their software development environment as the command line, as well as [integrate it into their CI/CD pipleline](https://github.com/GovTechSG/oobee/blob/master/INTEGRATION.md).
+Oobee (CLI) allows software engineers to run Oobee as part of their software development environment as the command line, as well as [integrate it into their CI/CD pipleline](INTEGRATION.md).
 
 ## System Requirements
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@govtechsg/oobee",
   "main": "dist/npmIndex.js",
-  "version": "0.10.28",
+  "version": "0.10.29",
   "type": "module",
   "author": "Government Technology Agency <info@tech.gov.sg>",
   "dependencies": {
@@ -23,7 +23,7 @@
     "mime-types": "^2.1.35",
     "minimatch": "^9.0.3",
     "pdfjs-dist": "github:veraPDF/pdfjs-dist#v4.4.168-taggedPdf-0.1.20",
-    "playwright": "1.49.1",
+    "playwright": "1.50.1",
     "prettier": "^3.1.0",
     "print-message": "^3.0.1",
     "safe-regex": "^2.1.1",

package/src/combine.ts

@@ -97,6 +97,7 @@ const combineRun = async (details: Data, deviceToScan: string) => {
     isEnableWcagAaa: envDetails.ruleset,
     isSlowScanMode: envDetails.specifiedMaxConcurrency,
     isAdhereRobots: envDetails.followRobots,
+    deviceChosen: deviceToScan,
   };
 
   const viewportSettings: ViewportSettingsClass = new ViewportSettingsClass(

package/src/constants/cliFunctions.ts

@@ -269,7 +269,7 @@ export const cliOptions: { [key: string]: Options } = {
     default: 'default',
     coerce: option => {
       const validChoices = Object.values(RuleFlags);
-      const userChoices: string[] = option.split(',');
+      const userChoices: string[] = String(option).split(',');
       const invalidUserChoices = userChoices.filter(
         choice => !validChoices.includes(choice as RuleFlags),
       );

package/src/crawlers/commonCrawlerFunc.ts

@@ -1,7 +1,7 @@
 import crawlee, { CrawlingContext, PlaywrightGotoOptions } from 'crawlee';
 import axe, { AxeResults, ImpactValue, NodeResult, Result, resultGroups, TagValue } from 'axe-core';
-import { xPathToCss } from '../xPathToCss.js';
 import { BrowserContext, Page } from 'playwright';
+import { xPathToCss } from '../xPathToCss.js';
 import {
   axeScript,
   guiInfoStatusTypes,
@@ -357,24 +357,28 @@ export const runAxeScript = async ({
                 return !node.dataset.flagged; // fail any element with a data-flagged attribute set to true
               },
             },
-            {
-              ...customAxeConfig.checks[2],
-              evaluate: (_node: HTMLElement) => {
-                if (gradingReadabilityFlag === '') {
-                  return true; // Pass if no readability issues
-                }
-                // Dynamically update the grading messages
-                const gradingCheck = customAxeConfig.checks.find(
-                  check => check.id === 'oobee-grading-text-contents',
-                );
-                if (gradingCheck) {
-                  gradingCheck.metadata.messages.incomplete = `The text content is potentially difficult to read, with a Flesch-Kincaid Reading Ease score of ${gradingReadabilityFlag
-                    }.\nThe target passing score is above 50, indicating content readable by university students and lower grade levels.\nA higher score reflects better readability.`;
-                }
-
-                // Fail if readability issues are detected
-              },
-            },
+            ...(enableWcagAaa
+              ? [
+                {
+                  ...customAxeConfig.checks[2],
+                  evaluate: (_node: HTMLElement) => {
+                    if (gradingReadabilityFlag === '') {
+                      return true; // Pass if no readability issues
+                    }
+                    // Dynamically update the grading messages
+                    const gradingCheck = customAxeConfig.checks.find(
+                      check => check.id === 'oobee-grading-text-contents',
+                    );
+                    if (gradingCheck) {
+                      gradingCheck.metadata.messages.incomplete = `The text content is potentially difficult to read, with a Flesch-Kincaid Reading Ease score of ${gradingReadabilityFlag
+                        }.\nThe target passing score is above 50, indicating content readable by university students and lower grade levels.\nA higher score reflects better readability.`;
+                    }
+
+                    // Fail if readability issues are detected
+                  },
+                },
+              ]
+              : []),
           ],
           rules: customAxeConfig.rules
             .filter(rule => (disableOobee ? !rule.id.startsWith('oobee') : true))
@@ -416,9 +420,12 @@ export const runAxeScript = async ({
             const escapedCssSelectors =
               oobeeAccessibleLabelFlaggedCssSelectors.map(escapeCSSSelector);
 
-            function framesCheck(cssSelector: string): { doc: Document; remainingSelector: string } {
+            function framesCheck(cssSelector: string): {
+              doc: Document;
+              remainingSelector: string;
+            } {
               let doc = document; // Start with the main document
-              let remainingSelector = ""; // To store the last part of the selector
+              let remainingSelector = ''; // To store the last part of the selector
               let targetIframe = null;
 
               // Split the selector into parts at "> html"
@@ -429,18 +436,18 @@ export const runAxeScript = async ({
 
                 // Add back '> html' to the current part
                 if (i > 0) {
-                  iframeSelector = "html > " + iframeSelector;
+                  iframeSelector = `html > ${iframeSelector}`;
                 }
 
                 let frameset = null;
                 // Find the iframe using the current document context
-                if (doc.querySelector("frameset")) {
-                  frameset = doc.querySelector("frameset");
+                if (doc.querySelector('frameset')) {
+                  frameset = doc.querySelector('frameset');
                 }
 
                 if (frameset) {
                   doc = frameset;
-                  iframeSelector = iframeSelector.split("body >")[1].trim();
+                  iframeSelector = iframeSelector.split('body >')[1].trim();
                 }
                 targetIframe = doc.querySelector(iframeSelector);
 
@@ -448,7 +455,9 @@ export const runAxeScript = async ({
                   // Update the document to the iframe's contentDocument
                   doc = targetIframe.contentDocument;
                 } else {
-                  console.warn(`Iframe not found or contentDocument inaccessible for selector: ${iframeSelector}`);
+                  console.warn(
+                    `Iframe not found or contentDocument inaccessible for selector: ${iframeSelector}`,
+                  );
                   return { doc, remainingSelector: cssSelector }; // Return original selector if iframe not found
                 }
               }
@@ -457,19 +466,18 @@ export const runAxeScript = async ({
               remainingSelector = diffParts[diffParts.length - 1].trim();
 
               // Remove any leading '>' combinators from remainingSelector
-              remainingSelector = "html" + remainingSelector;
+              remainingSelector = `html${remainingSelector}`;
 
               return { doc, remainingSelector };
             }
 
-
             function findElementByCssSelector(cssSelector: string): string | null {
               let doc = document;
 
               // Check if the selector includes 'frame' or 'iframe' and update doc and selector
 
               if (/\s*>\s*html\s*/.test(cssSelector)) {
-                let inFrames = framesCheck(cssSelector)
+                const inFrames = framesCheck(cssSelector);
                 doc = inFrames.doc;
                 cssSelector = inFrames.remainingSelector;
               }
@@ -515,24 +523,26 @@ export const runAxeScript = async ({
               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)
+              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),
             };
 
             results.violations = [...results.violations, oobeeAccessibleLabelViolations];

package/src/crawlers/crawlDomain.ts

@@ -40,8 +40,7 @@ import {
 import { silentLogger, guiInfoLog } from '../logs.js';
 import { ViewportSettingsClass } from '../combine.js';
 
-const isBlacklisted = (url: string) => {
-  const blacklistedPatterns = getBlackListedPatterns(null);
+const isBlacklisted = (url: string, blacklistedPatterns: string[]) => {
   if (!blacklistedPatterns) {
     return false;
   }
@@ -122,7 +121,7 @@ const crawlDomain = async ({
   const isScanPdfs = ['all', 'pdf-only'].includes(fileTypes);
   const { maxConcurrency } = constants;
   const { playwrightDeviceDetailsObject } = viewportSettings;
-  const isBlacklistedUrl = isBlacklisted(url);
+  const isBlacklistedUrl = isBlacklisted(url, blacklistedPatterns);
 
   const httpsAgent = new https.Agent({ rejectUnauthorized: false });
 
@@ -315,7 +314,7 @@ const crawlDomain = async ({
 
     const isExcluded = (newPageUrl: string): boolean => {
       const isAlreadyScanned: boolean = urlsCrawled.scanned.some(item => item.url === newPageUrl);
-      const isBlacklistedUrl: boolean = isBlacklisted(newPageUrl);
+      const isBlacklistedUrl: boolean = isBlacklisted(newPageUrl, blacklistedPatterns);
       const isNotFollowStrategy: boolean = !isFollowStrategy(newPageUrl, initialPageUrl, strategy);
       return isAlreadyScanned || isBlacklistedUrl || isNotFollowStrategy;
     };
@@ -615,7 +614,7 @@ const crawlDomain = async ({
           actualUrl = page.url();
         }
 
-        if (isBlacklisted(actualUrl) || (isUrlPdf(actualUrl) && !isScanPdfs)) {
+        if (isBlacklisted(actualUrl, blacklistedPatterns) || (isUrlPdf(actualUrl) && !isScanPdfs)) {
           guiInfoLog(guiInfoStatusTypes.SKIPPED, {
             numScanned: urlsCrawled.scanned.length,
             urlScanned: actualUrl,

package/src/crawlers/customAxeFunctions.ts

@@ -68,7 +68,7 @@ export const customAxeConfig: Spec = {
       selector: 'html',
       enabled: true,
       any: ['oobee-grading-text-contents'],
-      tags: ['wcag2a', 'wcag315'],
+      tags: ['wcag2aaa', 'wcag315'],
       metadata: {
         description:
           'Text content should be easy to understand for individuals with education levels up to university graduates. If the text content is difficult to understand, provide supplemental content or a version that is easy to understand.',

package/src/mergeAxeResults.ts

@@ -219,8 +219,46 @@ const writeCsv = async (allIssues, storagePath) => {
     includeEmptyRows: true,
   };
 
+  // Create the parse stream (it’s asynchronous)
   const parser = new AsyncParser(opts);
-  parser.parse(allIssues).pipe(csvOutput);
+  const parseStream = parser.parse(allIssues);
+
+  // Pipe JSON2CSV output into the file, but don't end automatically
+  parseStream.pipe(csvOutput, { end: false });
+
+  // Once JSON2CSV is done writing all normal rows, append any "pagesNotScanned"
+  parseStream.on('end', () => {
+    if (allIssues.pagesNotScanned && allIssues.pagesNotScanned.length > 0) {
+      csvOutput.write('\n');
+      allIssues.pagesNotScanned.forEach(page => {
+        const skippedPage = {
+          customFlowLabel: allIssues.customFlowLabel || '',
+          deviceChosen: allIssues.deviceChosen || '',
+          scanCompletedAt: allIssues.endTime ? allIssues.endTime.toISOString() : '',
+          severity: 'error',
+          issueId: 'error-pages-skipped',
+          issueDescription: 'Page was skipped during the scan',
+          wcagConformance: '',
+          url: page.url || '',
+          pageTitle: '',
+          context: '',
+          howToFix: '',
+          axeImpact: '',
+          xpath: '',
+          learnMore: '',
+        };
+        csvOutput.write(`${Object.values(skippedPage).join(',')}\n`);
+      });
+    }
+
+    // Now close the CSV file
+    csvOutput.end();
+  });
+
+  parseStream.on('error', err => {
+    console.error('Error parsing CSV:', err);
+    csvOutput.end();
+  });
 };
 
 const compileHtmlWithEJS = async (
@@ -234,7 +272,7 @@ 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) });
   await fs.writeFile(htmlFilePath, html);
 
   let htmlContent = await fs.readFile(htmlFilePath, { encoding: 'utf8' });