@govtechsg/oobee 0.10.34 → 0.10.39

package/src/static/ejs/report.ejs

@@ -47,7 +47,7 @@
       // Scan DATA FUNCTION TO REPLACE NA
       const scanDataWCAGCompliance = () => {
         const passPecentage = document.getElementById('passPercentage');
-        passPecentage.innerHTML = scanData.wcagPassPercentage.passPercentageAA + '% 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.passPercentageAA}%`; // Set this to your desired width
 
@@ -94,7 +94,7 @@
         const formattedCategoryTitles = {
           mustFix: 'Must Fix',
           goodToFix: 'Good to Fix',
-          needsReview: 'Needs Review',
+          needsReview: 'Manual Review Required',
           passed: 'Passed',
         };
 
@@ -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);
           });
         }

package/src/utils.ts

@@ -190,22 +190,41 @@ export const cleanUp = async pathToDelete => {
 //     timeZoneName: "longGeneric",
 //   });
 
-export const getWcagPassPercentage = (wcagViolations: string[]): { passPercentageAA: string; totalWcagChecksAA: number; totalWcagViolationsAA: number } => {
+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 totalChecksAA = filteredWcagLinks.length;
-
-  const passedChecks = totalChecksAA - filteredWcagViolations.length;
-  const passPercentageAA = (passedChecks / totalChecksAA) * 100;
+  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: filteredWcagViolations.length,
+    totalWcagViolationsAA: wcagViolationsAA,
+    passPercentageAAandAAA: passPercentageAAandAAA ? passPercentageAAandAAA.toFixed(2) : null, // toFixed returns a string, which is correct here
+    totalWcagChecksAAandAAA: totalChecksAAandAAA,
+    totalWcagViolationsAAandAAA: wcagViolationsAAandAAA,
   };
 };
 

package/src/xPathToCssCypress.ts

@@ -0,0 +1,178 @@
+export function xPathToCss(expr: string) {
+    const isValidXPath = expr =>
+        typeof expr !== 'undefined' &&
+        expr.replace(/[\s-_=]/g, '') !== '' &&
+        expr.length ===
+        expr.replace(
+            /[-_\w:.]+\(\)\s*=|=\s*[-_\w:.]+\(\)|\sor\s|\sand\s|\[(?:[^\/\]]+[\/\[]\/?.+)+\]|starts-with\(|\[.*last\(\)\s*[-\+<>=].+\]|number\(\)|not\(|count\(|text\(|first\(|normalize-space|[^\/]following-sibling|concat\(|descendant::|parent::|self::|child::|/gi,
+            '',
+        ).length;
+
+    const getValidationRegex = () => {
+        let regex =
+            '(?P<node>' +
+            '(' +
+            '^id\\(["\\\']?(?P<idvalue>%(value)s)["\\\']?\\)' + // special case! `id(idValue)`
+            '|' +
+            '(?P<nav>//?(?:following-sibling::)?)(?P<tag>%(tag)s)' + //  `//div`
+            '(\\[(' +
+            '(?P<matched>(?P<mattr>@?%(attribute)s=["\\\'](?P<mvalue>%(value)s))["\\\']' + // `[@id="well"]` supported and `[text()="yes"]` is not
+            '|' +
+            '(?P<contained>contains\\((?P<cattr>@?%(attribute)s,\\s*["\\\'](?P<cvalue>%(value)s)["\\\']\\))' + // `[contains(@id, "bleh")]` supported and `[contains(text(), "some")]` is not
+            ')\\])?' +
+            '(\\[\\s*(?P<nth>\\d+|last\\(\\s*\\))\\s*\\])?' +
+            ')' +
+            ')';
+
+        const subRegexes = {
+            tag: '([a-zA-Z][a-zA-Z0-9:-]*|\\*)',
+            attribute: '[.a-zA-Z_:][-\\w:.]*(\\(\\))?)',
+            value: '\\s*[\\w/:][-/\\w\\s,:;.]*',
+        };
+
+        Object.keys(subRegexes).forEach(key => {
+            regex = regex.replace(new RegExp(`%\\(${key}\\)s`, 'gi'), subRegexes[key]);
+        });
+
+        regex = regex.replace(
+            /\?P<node>|\?P<idvalue>|\?P<nav>|\?P<tag>|\?P<matched>|\?P<mattr>|\?P<mvalue>|\?P<contained>|\?P<cattr>|\?P<cvalue>|\?P<nth>/gi,
+            '',
+        );
+
+        return new RegExp(regex, 'gi');
+    };
+
+    const preParseXpath = expr =>
+        expr.replace(
+            /contains\s*\(\s*concat\(["']\s+["']\s*,\s*@class\s*,\s*["']\s+["']\)\s*,\s*["']\s+([a-zA-Z0-9-_]+)\s+["']\)/gi,
+            '@class="$1"',
+        );
+
+    function escapeCssIdSelectors(cssSelector) {
+        return cssSelector.replace(/#([^ >]+)/g, (match, id) => {
+            // Escape special characters in the id part
+            return `#${id.replace(/[!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~]/g, '\\$&')}`;
+        });
+    }
+    if (!expr) {
+        throw new Error('Missing XPath expression');
+    }
+
+    expr = preParseXpath(expr);
+
+    if (!isValidXPath(expr)) {
+        console.error(`Invalid or unsupported XPath: ${expr}`);
+        // do not throw error so that this function proceeds to convert xpath that it does not support
+        // for example, //*[@id="google_ads_iframe_/4654/dweb/imu1/homepage/landingpage/na_0"]/html/body/div[1]/a
+        // becomes #google_ads_iframe_/4654/dweb/imu1/homepage/landingpage/na_0 > html > body > div:first-of-type > div > a
+        // which is invalid because the slashes in the id selector are not escaped
+        // throw new Error('Invalid or unsupported XPath: ' + expr);
+    }
+
+    const xPathArr = expr.split('|');
+    const prog = getValidationRegex();
+    const cssSelectors = [];
+    let xindex = 0;
+
+    while (xPathArr[xindex]) {
+        const css = [];
+        let position = 0;
+        let nodes;
+
+        while ((nodes = prog.exec(xPathArr[xindex]))) {
+            let attr;
+
+            if (!nodes && position === 0) {
+                throw new Error(`Invalid or unsupported XPath: ${expr}`);
+            }
+
+            const match = {
+                node: nodes[5],
+                idvalue: nodes[12] || nodes[3],
+                nav: nodes[4],
+                tag: nodes[5],
+                matched: nodes[7],
+                mattr: nodes[10] || nodes[14],
+                mvalue: nodes[12] || nodes[16],
+                contained: nodes[13],
+                cattr: nodes[14],
+                cvalue: nodes[16],
+                nth: nodes[18],
+            };
+
+            let nav = '';
+
+            if (position != 0 && match.nav) {
+                if (~match.nav.indexOf('following-sibling::')) {
+                    nav = ' + ';
+                } else {
+                    nav = match.nav == '//' ? ' ' : ' > ';
+                }
+            }
+
+            const tag = match.tag === '*' ? '' : match.tag || '';
+
+            if (match.contained) {
+                if (match.cattr.indexOf('@') === 0) {
+                    attr = `[${match.cattr.replace(/^@/, '')}*="${match.cvalue}"]`;
+                } else {
+                    throw new Error(`Invalid or unsupported XPath attribute: ${match.cattr}`);
+                }
+            } else if (match.matched) {
+                switch (match.mattr) {
+                    case '@id':
+                        attr = `#${match.mvalue.replace(/^\s+|\s+$/, '').replace(/\s/g, '#')}`;
+                        break;
+                    case '@class':
+                        attr = `.${match.mvalue.replace(/^\s+|\s+$/, '').replace(/\s/g, '.')}`;
+                        break;
+                    case 'text()':
+                    case '.':
+                        throw new Error(`Invalid or unsupported XPath attribute: ${match.mattr}`);
+                    default:
+                        if (match.mattr.indexOf('@') !== 0) {
+                            throw new Error(`Invalid or unsupported XPath attribute: ${match.mattr}`);
+                        }
+                        if (match.mvalue.indexOf(' ') !== -1) {
+                            match.mvalue = `\"${match.mvalue.replace(/^\s+|\s+$/, '')}\"`;
+                        }
+                        attr = `[${match.mattr.replace('@', '')}="${match.mvalue}"]`;
+                        break;
+                }
+            } else if (match.idvalue) {
+                attr = `#${match.idvalue.replace(/\s/, '#')}`;
+            } else {
+                attr = '';
+            }
+
+            let nth = '';
+
+            if (match.nth) {
+                if (match.nth.indexOf('last') === -1) {
+                    if (isNaN(parseInt(match.nth, 10))) {
+                        throw new Error(`Invalid or unsupported XPath attribute: ${match.nth}`);
+                    }
+                    nth = parseInt(match.nth, 10) !== 1 ? `:nth-of-type(${match.nth})` : ':first-of-type';
+                } else {
+                    nth = ':last-of-type';
+                }
+            }
+
+            css.push(nav + tag + attr + nth);
+            position++;
+        }
+
+        const result = css.join('');
+
+        if (result === '') {
+            throw new Error('Invalid or unsupported XPath');
+        }
+
+        cssSelectors.push(result);
+        xindex++;
+    }
+
+    // return cssSelectors.join(', ');
+    const originalResult = cssSelectors.join(', ');
+    return escapeCssIdSelectors(originalResult);
+}

package/src/crawlers/customAxeFunctions.ts

@@ -1,82 +0,0 @@
-import { Spec } from 'axe-core';
-
-// Custom Axe Functions for axe.config
-export const customAxeConfig: Spec = {
-  branding: {
-    application: 'oobee',
-  },
-  checks: [
-    {
-      id: 'oobee-confusing-alt-text',
-      metadata: {
-        impact: '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.",
-        },
-      },
-    },
-    {
-      id: 'oobee-accessible-label',
-      metadata: {
-        impact: 'serious',
-        messages: {
-          pass: 'The clickable element has an accessible label.',
-          fail: 'The clickable element does not have an accessible label.',
-        },
-      },
-    },
-    {
-      id: 'oobee-grading-text-contents',
-      metadata: {
-        impact: 'moderate',
-        messages: {
-          pass: 'The text content is easy to understand.',
-          fail: 'The text content is potentially difficult to undersatnd.',
-        },
-      },
-    },
-  ],
-  rules: [
-    { id: 'target-size', enabled: true },
-    {
-      id: 'oobee-confusing-alt-text',
-      selector: 'img[alt]',
-      enabled: true,
-      any: ['oobee-confusing-alt-text'],
-      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/',
-      },
-    },
-    {
-      id: 'oobee-accessible-label',
-      // selector: '*', // to be set with the checker function output xpaths converted to css selectors
-      enabled: true,
-      any: ['oobee-accessible-label'],
-      tags: ['wcag2a', 'wcag211', 'wcag412'],
-      metadata: {
-        description: 'Ensures clickable elements have an accessible label.',
-        help: 'Clickable elements must have accessible labels.',
-        helpUrl: 'https://www.deque.com/blog/accessible-aria-buttons',
-      },
-    },
-    {
-      id: 'oobee-grading-text-contents',
-      selector: 'html',
-      enabled: true,
-      any: ['oobee-grading-text-contents'],
-      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.',
-        help: 'Text content should be clear and plain to ensure that it is easily understood.',
-        helpUrl: 'https://www.wcag.com/uncategorized/3-1-5-reading-level/',
-      },
-    },
-  ],
-};
-
-export default customAxeConfig;