Feat/new report layout (#121)

* Implement new scan report * Bump version number * Added truncation for aria rule description to 3 lines and read more button. * Added checks to not display iframe when user is offline. * Omitted duplicates in previous merge conflict resolution commit. * Truncation based on height instead of line-clamp. Opacity border for read more divs. * Fix incorrect viewport being displayed * Fix incorrect passed items document hyperlink * Fix broken manuel testing guide link * Fix missing aria-label * Fix incorrect viewport metadata displayed for custom scans * Bump version number --------- Co-authored-by: khoodehui <[email protected]> Co-authored-by: Xuan Ming <[email protected]>
GovTechSG · May 4, 2023 · 5718e5b · 5718e5b
1 parent 5c5a0e7
commit 5718e5b
Show file tree

Hide file tree

Showing 11 changed files with 197 additions and 60 deletions.
diff --git a/mergeAxeResults.js b/mergeAxeResults.js
@@ -35,7 +35,7 @@ const writeResults = async (allissues, storagePath, jsonFilename = 'compiledResu
   const finalResultsInJson = JSON.stringify(allissues, null, 4);
 
   const passedItemsJson = {};
-  
+
   allissues.items.passed.rules.forEach(r => {
     passedItemsJson[r.description] = {
       totalOccurrencesInScan: r.totalItems,
@@ -45,13 +45,16 @@ const writeResults = async (allissues, storagePath, jsonFilename = 'compiledResu
         url: p.url,
         totalOccurrencesInPage: p.items.length,
         occurrences: p.items,
-      }))
-    } 
+      })),
+    };
   });
 
   try {
     await fs.writeFile(`${storagePath}/reports/${jsonFilename}.json`, finalResultsInJson);
-    await fs.writeFile(`${storagePath}/reports/passed_items.json`, JSON.stringify(passedItemsJson, null, 4));
+    await fs.writeFile(
+      `${storagePath}/reports/passed_items.json`,
+      JSON.stringify(passedItemsJson, null, 4),
+    );
   } catch (writeResultsError) {
     consoleLogger.info(
       'An error has occurred when compiling the results into the report, please try again.',

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "purple-hats",
   "main": "index.js",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "type": "module",
   "imports": {
     "#root/*.js": "./*.js"

diff --git a/playwrightAxeGenerator.js b/playwrightAxeGenerator.js
@@ -8,7 +8,6 @@ import { devices } from 'playwright';
 import { consoleLogger, silentLogger } from './logs.js';
 
 const playwrightAxeGenerator = async (domain, data) => {
-
   const blacklistedPatternsFilename = 'exclusions.txt';
   let blacklistedPatterns = null;
 
@@ -18,13 +17,17 @@ const playwrightAxeGenerator = async (domain, data) => {
     let unsafe = blacklistedPatterns.filter(function (pattern) {
       return !safe(pattern);
     });
-
-    if (unsafe.length > 0 ) {
-      let unsafeExpressionsError = "Unsafe expressions detected: '"+ unsafe +"' Please revise " + blacklistedPatternsFilename;
+
+    if (unsafe.length > 0) {
+      let unsafeExpressionsError =
+        "Unsafe expressions detected: '" +
+        unsafe +
+        "' Please revise " +
+        blacklistedPatternsFilename;
       consoleLogger.error(unsafeExpressionsError);
       silentLogger.error(unsafeExpressionsError);
       process.exit(1);
-    };
+    }
   }
 
   let { isHeadless, randomToken, deviceChosen, customDevice, viewportWidth } = data;
@@ -247,7 +250,15 @@ const processPage = async page => {
             await createDetailsAndLogs(scanDetails, '${randomToken}');
             await createAndUpdateResultsFolders('${randomToken}');
             createScreenshotsFolder('${randomToken}');
-            await generateArtifacts('${randomToken}', '${domain}', 'Customized', '${viewportWidth ? `CustomWidth_${viewportWidth}px` : customDevice ? customDevice : deviceChosen ? deviceChosen : 'Desktop' }');
+            await generateArtifacts('${randomToken}', '${domain}', 'Customized', '${
+    viewportWidth
+      ? `CustomWidth_${viewportWidth}px`
+      : customDevice
+      ? customDevice
+      : deviceChosen
+      ? deviceChosen
+      : 'Desktop'
+  }');
         });`;
 
   let tmpDir;
@@ -259,20 +270,25 @@ const processPage = async page => {
 
   const generatedScript = `./custom_flow_scripts/generatedScript-${randomToken}.js`;
 
-  console.log(` ℹ️  A new browser will be launched shortly.\n Navigate and record custom steps for ${domain} in the new browser.\n Close the browser when you are done recording your steps.`);
+  console.log(
+    ` ℹ️  A new browser will be launched shortly.\n Navigate and record custom steps for ${domain} in the new browser.\n Close the browser when you are done recording your steps.`,
+  );
 
   try {
     tmpDir = fs.mkdtempSync(path.join(os.tmpdir(), appPrefix));
 
-    let browser = "webkit";
+    let browser = 'webkit';
     let userAgentOpts = null;
-    
+
     // Performance workaround for macOS Big Sur and Windows to force Chromium browser instead of Webkit
-    if ((os.platform() ==='darwin' && os.release().startsWith("20.")) || os.platform() ==='win32' ) {
-      browser = "chromium";
+    if (
+      (os.platform() === 'darwin' && os.release().startsWith('20.')) ||
+      os.platform() === 'win32'
+    ) {
+      browser = 'chromium';
 
       if (deviceChosen === 'Mobile') {
-        customDevice = "iPhone 11";
+        customDevice = 'iPhone 11';
       }
 
       if (customDevice) {
@@ -304,9 +320,7 @@ const processPage = async page => {
     }
 
     if (codegenResult.toString()) {
-      console.error(
-        `Error running Codegen: ${codegenResult.toString()}`,
-      );
+      console.error(`Error running Codegen: ${codegenResult.toString()}`);
     }
 
     const fileStream = fs.createReadStream(`${tmpDir}/intermediateScript.js`);
@@ -373,7 +387,7 @@ const processPage = async page => {
         continue;
       }
 
-      let pageObj = "page";
+      let pageObj = 'page';
 
       if (line.trim().startsWith(`await page`)) {
         const regexPageObj = /(?<=await )(.*?)(?=\.)/;
@@ -386,8 +400,8 @@ const processPage = async page => {
           appendToGeneratedScript(
             `${line}
              await processPage(page);
-            `
-          ,);
+            `,
+          );
           continue;
         } else {
           const regexURL = /(?<=goto\(\')(.*?)(?=\'\))/;
@@ -400,11 +414,9 @@ const processPage = async page => {
         appendToGeneratedScript(`
           await ${pageObj}.waitForURL('${lastGoToUrl}**',{timeout: 60000});
           await processPage(page);
-        `,
-        );
+        `);
 
         lastGoToUrl = null;
-
       } else if (nextStepNeedsProcessPage) {
         appendToGeneratedScript(`await processPage(page);`);
         nextStepNeedsProcessPage = false;
@@ -424,7 +436,7 @@ const processPage = async page => {
       } else {
         nextStepNeedsProcessPage = false;
       }
-      
+
       if (line.trim() === `await browser.close();`) {
         appendToGeneratedScript(line);
         appendToGeneratedScript(block2);
@@ -437,7 +449,6 @@ const processPage = async page => {
     console.log(` Browser closed. Replaying steps and running accessibility scan...\n`);
 
     await import(generatedScript);
-
   } catch (e) {
     console.error(`Error: ${e}`);
     throw e;
@@ -453,9 +464,7 @@ const processPage = async page => {
     }
 
     console.log(`\n You may re-run the recorded steps by executing:\n\tnode ${generatedScript} \n`);
-
   }
-
 };
 
 export default playwrightAxeGenerator;
diff --git a/static/ejs/partials/components/ruleOffcanvas.ejs b/static/ejs/partials/components/ruleOffcanvas.ejs
@@ -15,11 +15,17 @@
         aria-label="Close"
       ></button>
     </div>
-    <p id="expandedRuleDescription">
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
-      labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
-      laboris nisi ut aliquip ex ea commodo consequat.
-    </p>
+    <div class="collapse" id="expandedRuleDescription" aria-expanded="false"></div>
+    <button
+      role="button"
+      id="expandedRuleCollapseButton"
+      class="collapsed"
+      data-bs-toggle="collapse"
+      href="#expandedRuleDescription"
+      aria-expanded="false"
+      data-bs-target="#expandedRuleDescription"
+      aria-controls="expandedRuleDescription"
+    ></button>
     <a id="expandedRuleHelpUrl" href="#" target="_blank">Learn more about this issue</a>
     <h4>Conformance:</h4>
     <div id="expandedRuleConformance"></div>

diff --git a/static/ejs/partials/components/scanAbout.ejs b/static/ejs/partials/components/scanAbout.ejs
@@ -34,7 +34,7 @@
         fill="#CED4DA"
       />
     </svg>
-    <a aria-label="URL Scanned" href="<%= urlScanned %>" target="_blank"><%= urlScanned %></a>
+    <a aria-label="URL scanned" href="<%= urlScanned %>" target="_blank"><%= urlScanned %></a>
   </div>
   <div>
     <% if (viewport.startsWith('Desktop')) { %>
@@ -140,11 +140,15 @@
   </div>
   <hr class="mt-3 mb-4" />
   <iframe
-    id="a11yBanner"
+    id="a11y-online-banner"
     title="GovTech Accessibility Enabling Team information banner"
     class="h-auto w-100"
     src="https://govtechsg.github.io/purple-banner-embeds/"
-    onerror="$(this).replaceWith('<p>You need to be online to view this content.</p>');"
     scrolling="no"
   ></iframe>
+  <script>
+    if (!navigator.onLine) {
+      document.getElementById('a11y-online-banner').style.display = 'none';
+    }
+  </script>
 </div>
diff --git a/static/ejs/partials/header.ejs b/static/ejs/partials/header.ejs
@@ -1,23 +1,54 @@
 <header aria-label="Report header" id="header">
   <div class="z-2 card flex-row justify-content-between px-3 py-4">
     <div class="d-flex align-items-center">
-      <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <circle cx="24" cy="24" r="24" fill="#785EF0"/>
-        <path d="M16.2528 24.9725V23.832C16.2528 21.5526 14.4057 19.7056 12.1264 19.7056C9.84708 19.7056 8 21.5526 8 23.832V27.0721C8 29.2906 9.74991 31.0986 11.9448 31.1939V29.2806C11.9448 26.905 13.8772 24.9725 16.2528 24.9725Z" fill="white"/>
-        <path d="M12.308 29.28V31.1979H16.2528V25.3352C14.0779 25.3352 12.308 27.1051 12.308 29.28Z" fill="white"/>
-        <path d="M22.8201 25.3289H18.6937V31.1997H22.8201V25.3289Z" fill="white"/>
-        <path d="M22.8201 17.6016C20.5408 17.6016 18.6937 19.4486 18.6937 21.728V24.9672H22.8201V17.6016Z" fill="white"/>
-        <path d="M29.3876 17.6016C27.1082 17.6016 25.2612 19.4486 25.2612 21.728V24.9672H29.3876V17.6016Z" fill="white"/>
-        <path d="M29.3876 25.3289H25.2612V31.1997H29.3876V25.3289Z" fill="white"/>
-        <path d="M36.3182 31.199C38.5976 31.199 40.4446 29.3519 40.4446 27.0726V25.3281H36.3182V31.199Z" fill="white"/>
-        <path d="M40.4446 19.7056C38.1653 19.7056 36.3182 21.5526 36.3182 23.832V24.9644H40.4446V19.7056Z" fill="white"/>
-        <path d="M35.955 23.832C35.955 21.5526 34.1079 19.7056 31.8286 19.7056V22.844C31.8286 23.6195 32.0429 24.3441 32.4143 24.9644H35.955V23.832Z" fill="white"/>
-        <path d="M35.955 26.9709V25.3281H32.6595C33.4123 26.3261 34.6083 26.9709 35.955 26.9709Z" fill="white"/>
-        </svg>
-
+      <svg
+        width="48"
+        height="48"
+        viewBox="0 0 48 48"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <circle cx="24" cy="24" r="24" fill="#785EF0" />
+        <path
+          d="M16.2528 24.9725V23.832C16.2528 21.5526 14.4057 19.7056 12.1264 19.7056C9.84708 19.7056 8 21.5526 8 23.832V27.0721C8 29.2906 9.74991 31.0986 11.9448 31.1939V29.2806C11.9448 26.905 13.8772 24.9725 16.2528 24.9725Z"
+          fill="white"
+        />
+        <path
+          d="M12.308 29.28V31.1979H16.2528V25.3352C14.0779 25.3352 12.308 27.1051 12.308 29.28Z"
+          fill="white"
+        />
+        <path d="M22.8201 25.3289H18.6937V31.1997H22.8201V25.3289Z" fill="white" />
+        <path
+          d="M22.8201 17.6016C20.5408 17.6016 18.6937 19.4486 18.6937 21.728V24.9672H22.8201V17.6016Z"
+          fill="white"
+        />
+        <path
+          d="M29.3876 17.6016C27.1082 17.6016 25.2612 19.4486 25.2612 21.728V24.9672H29.3876V17.6016Z"
+          fill="white"
+        />
+        <path d="M29.3876 25.3289H25.2612V31.1997H29.3876V25.3289Z" fill="white" />
+        <path
+          d="M36.3182 31.199C38.5976 31.199 40.4446 29.3519 40.4446 27.0726V25.3281H36.3182V31.199Z"
+          fill="white"
+        />
+        <path
+          d="M40.4446 19.7056C38.1653 19.7056 36.3182 21.5526 36.3182 23.832V24.9644H40.4446V19.7056Z"
+          fill="white"
+        />
+        <path
+          d="M35.955 23.832C35.955 21.5526 34.1079 19.7056 31.8286 19.7056V22.844C31.8286 23.6195 32.0429 24.3441 32.4143 24.9644H35.955V23.832Z"
+          fill="white"
+        />
+        <path
+          d="M35.955 26.9709V25.3281H32.6595C33.4123 26.3261 34.6083 26.9709 35.955 26.9709Z"
+          fill="white"
+        />
+      </svg>
+
       <h1 class="d-inline mb-0 ms-3">Accessibility Site Report</h1>
     </div>
-    <%# <div class="toggleWrapper">
+    <%#
+    <div class="toggleWrapper">
       <input tabindex="0" type="checkbox" class="dm" id="dm" />
       <label for="dm" class="toggle">
         <span class="toggle__handler">
@@ -32,6 +63,7 @@
         <span class="star star--5"></span>
         <span class="star star--6"></span>
       </label>
-    </div> %>
+    </div>
+    %>
   </div>
 </header>
diff --git a/static/ejs/partials/main.ejs b/static/ejs/partials/main.ejs
@@ -16,7 +16,6 @@
     <div id="categorySummary" class="px-3 py-4 mb-3 flex-grow-1">
       <%# dynamically generated section from scripts/categorySummary %>
     </div>
-    <%- include("components/ruleOffcanvas") %>
-    <%- include("footer") %>
+    <%- include("components/ruleOffcanvas") %> <%- include("footer") %>
   </div>
 </main>
diff --git a/static/ejs/partials/scripts/categorySummary.ejs b/static/ejs/partials/scripts/categorySummary.ejs
@@ -50,4 +50,3 @@
     document.getElementById('categorySummary').replaceChildren(...newItems);
   }
 </script>
-
diff --git a/static/ejs/partials/scripts/ruleOffcanvas.ejs b/static/ejs/partials/scripts/ruleOffcanvas.ejs
@@ -67,6 +67,34 @@ category summary is clicked %>
     `),
     );
 
+    let expandedRuleDescription = document.getElementById('expandedRuleDescription');
+    let expandedRuleCollapseButton = document.getElementById('expandedRuleCollapseButton');
+
+    if (expandedRuleDescription.classList.contains('show')) {
+      expandedRuleDescription.classList.remove('show');
+    }
+
+    if (expandedRuleDescription.ariaExpanded === 'true') {
+      expandedRuleDescription.ariaExpanded = 'false';
+    }
+
+    if (expandedRuleCollapseButton.classList.contains('collapsed') !== true) {
+      expandedRuleCollapseButton.classList.add('collapsed');
+    }
+
+    expandedRuleDescription.style.minHeight = '';
+
+    if (expandedRuleDescription.offsetHeight === expandedRuleDescription.scrollHeight) {
+      expandedRuleCollapseButton.style.display = 'none';
+      expandedRuleDescription.ariaExpanded = 'true';
+    } else {
+      expandedRuleDescription.classList.add('collapse');
+
+      expandedRuleCollapseButton.style.display = 'block';
+      expandedRuleDescription.ariaExpanded = 'false';
+      expandedRuleDescription.style.minHeight = '3rem'; // Prevents bootstrap collapse from going to 0px
+    }
+
     const availableFixCategories = [];
     const categorySelectors = [];
Original file line number	Diff line number	Diff line change
Expand Up		@@ -50,4 +50,3 @@
		document.getElementById('categorySummary').replaceChildren(...newItems);
		}
		</script>