From f1dd8ff0f29b1b55677c5ebc3c9013849cfb73cc Mon Sep 17 00:00:00 2001 From: khoodehui <67047571+khoodehui@users.noreply.github.com> Date: Sat, 13 May 2023 18:13:54 +0800 Subject: [PATCH] Report improvements (#122) * 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 * Minor HTML and style changes * Change top 5 must fix to top 5 most issues * Update content for why it matters, remove read more button * Fix incorrect why it matters text * Modify tooltip behaviour for category selectors * Improve experience on screen reader * HTML tweaks * Handle 0 issue cases and fix bugs * Bump version number --------- Co-authored-by: Xuan Ming Co-authored-by: Georgetxm --- mergeAxeResults.js | 18 +- package-lock.json | 4 +- package.json | 2 +- .../partials/components/categorySelector.ejs | 25 +- .../ejs/partials/components/ruleOffcanvas.ejs | 18 +- static/ejs/partials/components/scanAbout.ejs | 263 ++++++++-------- static/ejs/partials/components/topFive.ejs | 21 +- .../partials/components/wcagCompliance.ejs | 2 +- static/ejs/partials/header.ejs | 1 + static/ejs/partials/main.ejs | 27 +- .../ejs/partials/scripts/categorySummary.ejs | 62 +++- static/ejs/partials/scripts/ruleOffcanvas.ejs | 296 +++++++++--------- static/ejs/partials/styles/styles.ejs | 123 ++++---- 13 files changed, 456 insertions(+), 406 deletions(-) diff --git a/mergeAxeResults.js b/mergeAxeResults.js index 98f0a302..1d45cdfd 100644 --- a/mergeAxeResults.js +++ b/mergeAxeResults.js @@ -177,14 +177,18 @@ const writeHTML = async (allIssues, storagePath, htmlFilename = 'report') => { // }; const pushResults = async (rPath, allIssues) => { - const parsedContent = await parseContentToJson(rPath); - const { url, pageTitle } = parsedContent; + const pageResults = await parseContentToJson(rPath); + const { url, pageTitle } = pageResults; allIssues.totalPagesScanned += 1; - allIssues.topFiveMustFix.push({ url, pageTitle, totalMustFix: parsedContent.mustFix.totalItems }); + + const totalIssuesInPage = new Set(); + Object.keys(pageResults.mustFix.rules).forEach(k => totalIssuesInPage.add(k)); + Object.keys(pageResults.goodToFix.rules).forEach(k => totalIssuesInPage.add(k)); + allIssues.topFiveMostIssues.push({ url, pageTitle, totalIssues: totalIssuesInPage.size }); ['mustFix', 'goodToFix', 'passed'].forEach(category => { - const { totalItems, rules } = parsedContent[category]; + const { totalItems, rules } = pageResults[category]; const currCategoryFromAllIssues = allIssues.items[category]; currCategoryFromAllIssues.totalItems += totalItems; @@ -237,8 +241,8 @@ const flattenAndSortResults = allIssues => { }) .sort((rule1, rule2) => rule2.totalItems - rule1.totalItems); }); - allIssues.topFiveMustFix.sort((page1, page2) => page2.totalMustFix - page1.totalMustFix); - allIssues.topFiveMustFix = allIssues.topFiveMustFix.slice(0, 5); + allIssues.topFiveMostIssues.sort((page1, page2) => page2.totalIssues - page1.totalIssues); + allIssues.topFiveMostIssues = allIssues.topFiveMostIssues.slice(0, 5); // convert the set to an array allIssues.wcagViolations = Array.from(allIssues.wcagViolations); }; @@ -254,7 +258,7 @@ export const generateArtifacts = async (randomToken, urlScanned, scanType, viewp viewport, totalPagesScanned: 0, totalItems: 0, - topFiveMustFix: [], + topFiveMostIssues: [], wcagViolations: new Set(), items: { mustFix: { description: itemTypeDescription.mustFix, totalItems: 0, rules: {} }, diff --git a/package-lock.json b/package-lock.json index eac178da..72385bfc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "purple-hats", - "version": "0.0.13", + "version": "0.0.14", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "purple-hats", - "version": "0.0.13", + "version": "0.0.14", "license": "ISC", "dependencies": { "axe-core": "^4.6.2", diff --git a/package.json b/package.json index 4f95cda2..aae4cfa3 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "purple-hats", "main": "index.js", - "version": "0.0.13", + "version": "0.0.14", "type": "module", "imports": { "#root/*.js": "./*.js" diff --git a/static/ejs/partials/components/categorySelector.ejs b/static/ejs/partials/components/categorySelector.ejs index 65ec8070..55a1c553 100644 --- a/static/ejs/partials/components/categorySelector.ejs +++ b/static/ejs/partials/components/categorySelector.ejs @@ -1,20 +1,26 @@ -<% const formattedCategoryTitles = { +<% const formattedCategoryTitles = { mustFix: "Must Fix", goodToFix: "Good to Fix", passed: "Passed" } %> diff --git a/static/ejs/partials/components/ruleOffcanvas.ejs b/static/ejs/partials/components/ruleOffcanvas.ejs index b87431aa..a38fb1c7 100644 --- a/static/ejs/partials/components/ruleOffcanvas.ejs +++ b/static/ejs/partials/components/ruleOffcanvas.ejs @@ -7,7 +7,7 @@ >
-

Offcanvas

+

- - +
Learn more about this issue -

Conformance:

+

Conformance:

-
+
diff --git a/static/ejs/partials/components/scanAbout.ejs b/static/ejs/partials/components/scanAbout.ejs index 30dc913a..eab9c875 100644 --- a/static/ejs/partials/components/scanAbout.ejs +++ b/static/ejs/partials/components/scanAbout.ejs @@ -1,144 +1,145 @@ -
+