testilo 25.0.3 → 25.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "testilo",
-  "version": "25.0.3",
+  "version": "25.1.1",
   "description": "Prepares and processes Testaro reports",
   "main": "call.js",
   "scripts": {

package/procs/compare/tcp40/index.html

@@ -22,7 +22,7 @@
       <p>The pages were tested by <a href="https://www.npmjs.com/package/testaro">Testaro</a>. Testaro used ten tools (Alfa, ASLint, Axe, Editoria11y, Equal Access, HTML CodeSniffer, Nu Html Checker, QualWeb, Testaro, and WAVE) to perform about 900 automated accessibility tests.</p>
       <p><a href="https://www.npmjs.com/package/testilo">Testilo</a> classified the problems found by these tests into <dfn>issues</dfn> and assigned a <dfn>score</dfn> to each page. A perfect score would be 0. Higher scores indicate more issues, more instances of them, more serious issues, and more of the tools reporting instances of issues.</p>
       <h2>Comparison</h2>
-      <table class="allBorder">
+      <table class="allBorder redBar">
         <caption>Accessibility scores of web pages</caption>
         <thead>
           <tr><th scope="col">Page</th><th scope="col" colspan="2">Score (from best to worst)</tr>

package/procs/compare/tcp40/index.js

@@ -52,7 +52,7 @@ const getTableBody = async bodyData => {
     const pageCell = `<th scope="row"><a href="${url}">${org}</a></th>`;
     const numCell = `<td><a href="testu/digest?jobID=${id}">${score}</a></td>`;
     // Make the bar width proportional.
-    const barCell = getBarCell(score, maxScore);
+    const barCell = getBarCell(score, maxScore, 25, false);
     const row = `<tr>${pageCell}${numCell}${barCell}</tr>`;
     return row;
   });

package/procs/difgest/tfp40/index.html

@@ -39,7 +39,7 @@
       <p>This <q>difgest</q> summarizes the differences between the scores from the two accessibility audits referenced in the synopsis above. A perfect score would be 0.</p>
       <h2>Issue summary</h2>
       <p>Issues are ordered from the one on which B was most superior to the one on which A was most superior.</p>
-      <table class="allBorder">
+      <table class="allBorder redBar">
         <caption>Differences in issue scores</caption>
         <thead>
           <tr><th>Issue</th><th>WCAG</th><th>Score A</th><th>Score B</th><th>A &minus; B</th><th>A superiority</th><th>B superiority</th></tr>

package/procs/difgest/tfp40/index.js

@@ -20,20 +20,25 @@ const innerJoiner = '\n          ';
 
 // FUNCTIONS
 
-// Gets a row of the issue-score-summary table.
-const getIssueScoreRow = (summary, wcag, scoreA, scoreB, bSuperiorityMax, aSuperiorityMax) => {
+// Gets a row of the issue-score-summary table with a two-column bar graph.
+const getIssueScoreRow = (summary, wcag, scoreA, scoreB, aSuperiorityMax, bSuperiorityMax) => {
+  const svgWidthSum = 25;
+  const maxSum = aSuperiorityMax + bSuperiorityMax;
+  const aSVGWidth = svgWidthSum * aSuperiorityMax / maxSum;
+  const bSVGWidth = svgWidthSum * bSuperiorityMax / maxSum;
   const bSuperiority = scoreA - scoreB;
-  const barCell = getBarCell(
-    Math.abs(bSuperiority), bSuperiority > 0 ? bSuperiorityMax : aSuperiorityMax, bSuperiority < 0
-  );
   const cells = [
     `<th>${summary}</th>`,
     `<td class="center">${wcag}</td>`,
     `<td class="right">${scoreA}</td>`,
     `<td class="right">${scoreB}</td>`,
     `<td class="right">${scoreA - scoreB}</td>`,
-    bSuperiority < 0 ? barCell : '<td></td>',
-    bSuperiority > 0 ? barCell : '<td></td>'
+    bSuperiority < 0
+    ? getBarCell(Math.abs(bSuperiority), aSuperiorityMax, aSVGWidth, true)
+    : '<td aria-hidden="true" class="right"></td>',
+    bSuperiority > 0
+    ? getBarCell(Math.abs(bSuperiority), bSuperiorityMax, bSVGWidth, false)
+    : '<td aria-hidden="true"></td>'
   ];
   return `<tr>${cells.join('')}</tr>`;
 };
@@ -75,16 +80,14 @@ const populateQuery = (reportA, reportB, query) => {
   // Sort the issue data in descending order of B less A scores.
   issuesData.sort((i, j) => i.scoreB - i.scoreA - j.scoreB + j.scoreA);
   // Get rows for the issue-score table.
-  const bSuperiorityMax = Math.max(0, issuesData[0].scoreA - issuesData[0].scoreB);
   const lastIssue = issuesData[issueIDs.size - 1];
   const aSuperiorityMax = Math.max(0, lastIssue.scoreB - lastIssue.scoreA);
+  const bSuperiorityMax = Math.max(0, issuesData[0].scoreA - issuesData[0].scoreB);
   const issueRows = [];
   issuesData.forEach(issueData => {
     const {id, what, wcag, scoreA, scoreB} = issueData;
     if (issues[id]) {
-      issueRows.push(
-        getIssueScoreRow(what, wcag, scoreA, scoreB, bSuperiorityMax, aSuperiorityMax)
-      );
+      issueRows.push(getIssueScoreRow(what, wcag, scoreA, scoreB, aSuperiorityMax, bSuperiorityMax));
     }
     else {
       console.log(`ERROR: Issue ${id} not found`);

package/procs/util.js

@@ -63,12 +63,17 @@ exports.getRandomString = length => {
   }
   return chars.join('');
 };
-// Returns a graph bar.
-exports.getBarCell = (num, max, isRight = false) => {
-  // Make the bar width proportional.
-  const barWidth = 100 * num / max;
-  const xAtt = isRight ? ` x=${100 - barWidth}%` : '';
-  const bar = `<rect height="100%"${xAtt} width="${barWidth}%" fill="red"></rect>`;
-  const barCell = `<td aria-hidden="true"><svg width="100%" height="0.7em">${bar}</svg></td>`;
-  return barCell;
+// Returns a horizontal SVG graph bar.
+const getSVGBar = (num, max, isRight) => {
+  const widthFrac = 100 * num / max;
+  const x = isRight ? `${100 - widthFrac}%` : '0';
+  return `<rect height="100%" x="${x}" width="${widthFrac}%"></rect>`;
+};
+// Returns a table cell containing an SVG graph bar.
+exports.getBarCell = (num, colMax, svgWidth, isRight = false) => {
+  const bar = getSVGBar(num, colMax, isRight);
+  const svg = `<svg height="0.7rem" width="${svgWidth}rem">${bar}</svg>`;
+  const rightClass = isRight ? ' class="right"' : '';
+  const cell = `<td aria-hidden="true"${rightClass}>${svg}</td>`;
+  return cell;
 };