Skip to content

Commit

Permalink
Report improvements (#122)
Browse files Browse the repository at this point in the history
* 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 <xuanming@Xuans-MacBook-Pro.local>
Co-authored-by: Georgetxm <xuanmingt@gmail.com>
  • Loading branch information
3 people authored May 13, 2023
1 parent 5718e5b commit f1dd8ff
Showing 13 changed files with 456 additions and 406 deletions.
18 changes: 11 additions & 7 deletions mergeAxeResults.js
Original file line number Diff line number Diff line change
@@ -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: {} },
4 changes: 2 additions & 2 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "purple-hats",
"main": "index.js",
"version": "0.0.13",
"version": "0.0.14",
"type": "module",
"imports": {
"#root/*.js": "./*.js"
25 changes: 18 additions & 7 deletions static/ejs/partials/components/categorySelector.ejs
Original file line number Diff line number Diff line change
@@ -1,20 +1,26 @@
<% const formattedCategoryTitles = {
<% const formattedCategoryTitles = {
mustFix: "Must Fix",
goodToFix: "Good to Fix",
passed: "Passed"
} %>

<button
aria-labelledby="<%= category %>Title <%= category %>ItemsInformation"
aria-describedby="<%= category %>AriaDescription"
id="<%= category %>Selector"
class="h-100 category-selector <%= category %>"
onclick="changeSelectedCategory(event, '<%= category %>')"
onfocus="document.getElementById('<%= category %>Description').dispatchEvent(new MouseEvent('mouseover'))"
onblur="document.getElementById('<%= category %>Description').dispatchEvent(new MouseEvent('mouseout'))"
onmousedown="event.preventDefault()"
>
<div class="d-flex align-items-center mb-3">
<h2 class="d-flex align-items-center category-name fw-bold d-inline mb-0">
<span id="<%= category %>Title" class="d-flex align-items-center category-name fw-bold d-inline mb-0">
<%= formattedCategoryTitles[category] %>
</h2>
</span>
<svg
tabindex="0"
tabindex="-1"
id="<%= category %>Description"
class="ms-2"
data-bs-toggle="tooltip"
data-bs-placement="top"
@@ -38,8 +44,13 @@
</defs>
</svg>
</div>
<span>
<% if (category !== 'passed') { %> <%= items[category].rules.length %> issues / <% } %> <%=
items[category].totalItems %> occurrences
<span id="<%= category %>ItemsInformation" class="category-information">
<% if (category !== 'passed' && items[category].totalItems !== 0) { %>
<%= items[category].rules.length %> issues / <%= items[category].totalItems %> occurrences
<% } else if (category !== 'passed' && items[category].totalItems === 0) { %>
0 issues
<% } else { %>
<%= items[category].totalItems %> occurrences
<% } %>
</span>
</button>
18 changes: 4 additions & 14 deletions static/ejs/partials/components/ruleOffcanvas.ejs
Original file line number Diff line number Diff line change
@@ -7,32 +7,22 @@
>
<div class="p-4">
<div class="offcanvas-header p-0">
<h3 class="offcanvas-title" id="expandedRuleName">Offcanvas</h3>
<h2 class="offcanvas-title" id="expandedRuleName"></h2>
<button
type="button"
class="btn-close text-reset"
data-bs-dismiss="offcanvas"
aria-label="Close"
></button>
</div>
<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>
<div id="expandedRuleDescription"></div>
<a id="expandedRuleHelpUrl" href="#" target="_blank">Learn more about this issue</a>
<h4>Conformance:</h4>
<h3 id="conformance-header">Conformance:</h3>
<div id="expandedRuleConformance"></div>
</div>
<div class="offcanvas-body">
<div id="expandedRuleInfoText"></div>
<div id="expandedRuleCategorySelectors"></div>
<nav id="expandedRuleCategorySelectors" aria-label="Occurrence category"></nav>
<div id="expandedRuleCategoryContent" class="mt-4"></div>
</div>
</div>
Loading

0 comments on commit f1dd8ff

Please sign in to comment.