npm - testilo - Versions diffs - 3.12.2 → 3.12.3 - Mend

testilo 3.12.2 → 3.12.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/package.json +1 -1
package/procs/compare/cp16b/index.html +47 -0
package/procs/compare/cp16b/index.js +74 -0
package/procs/score/sp16a.js +50 -5
package/procs/score/sp16b.js +6370 -0
package/procs/score/spHover.js +328 -0

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "testilo",
-  "version": "3.12.2",
+  "version": "3.12.3",
   "description": "Client that scores and digests Testaro reports",
   "main": "index.js",
   "scripts": {

package/procs/compare/cp16b/index.html ADDED Viewed

@@ -0,0 +1,47 @@
+<!DOCTYPE HTML>
+<html lang="en-US">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="author" content="Testilo">
+    <meta name="creator" content="Testilo">
+    <meta name="publisher" name="Testilo">
+    <meta name="description" content="comparison of accessibility scores">
+    <meta name="keywords" content="accessibility a11y web testing">
+    <title>Accessibility score comparison</title>
+    <link rel="icon" href="favicon.png">
+    <link rel="stylesheet" href="style.css">
+  </head>
+  <body>
+    <main>
+      <header>
+        <h1>Accessibility score comparison</h1>
+      </header>
+      <h2>Introduction</h2>
+      <p>The table below compares __pageCount__ web pages on <a href="https://www.w3.org/WAI/fundamentals/accessibility-intro/">accessibility</a>. The page names are links to the pages on the web. The scores are links to digests that explain in detail how the scores were computed.</p>
+      <p>The pages were:</p>
+      <ol id="summary">
+        <li>Tested by <a href="https://www.npmjs.com/package/testaro">Testaro</a> with procedure <code>tp16</code></li>
+        <li>Scored by <a href="https://www.npmjs.com/package/testilo">Testilo</a> with procedure <code>sp16a</code></li>
+        <li>Digested by Testilo with procedure <code>dp16a</code></li>
+        <li>Compared by Testilo with procedure <code>cp16a</code></li>
+      </ol>
+      <p>The Testaro procedure performs 1225 tests on each page. Of these, 19 tests are custom tests defined by Testaro, and the others belong to packages of tests created by others.</p>
+      <h2>Comparison</h2>
+      <table class="allBorder">
+        <caption>Accessibility scores of web pages</caption>
+        <thead>
+          <tr><th scope="col">Page</th><th scope="col" colspan="2">Score (lower is better)</tr>
+        </thead>
+        <tbody class="linkSmaller secondCellRight">
+          __tableBody__
+        </tbody>
+      </table>
+      <h2>Discussion</h2>
+      <p>Tests and scoring formulae are fallible and subjective. The reported faults merit investigation as potential opportunities for improved accessibility. But some may not actually harm accessibility, and some other accessibility faults are not detectable with these tests. Different reasonable procedures could yield different test results and different scores. Testaro and Testilo can be customized to fit different definitions and weightings of types of accessibility.</p>
+      <footer>
+        <p class="date">Produced <time itemprop="datePublished" datetime="__dateISO__">__dateSlash__</time></p>
+      </footer>
+    </main>
+  </body>
+</html>

package/procs/compare/cp16b/index.js ADDED Viewed

@@ -0,0 +1,74 @@
+/*
+  cp16a.js
+  Returns a query for an HTML page including a bar-graph table.
+  Makes the bar widths the square roots of their proportional widths, for cases of extreme
+  score disparity.
+*/
+// ########## IMPORTS
+// Module to keep secrets local.
+require('dotenv').config();
+// Module to access files.
+const fs = require('fs/promises');
+// ########## CONSTANTS
+const reportDirScored = process.env.REPORTDIR_SCORED || 'reports/scored';
+const query = {};
+// ########## FUNCTIONS
+// Returns data on the hosts in the report directory.
+const getData = async () => {
+  const reportDirAbs = `${__dirname}/../../../${reportDirScored}`;
+  const reportFileNamesAll = await fs.readdir(reportDirAbs);
+  const reportFileNamesSource = reportFileNamesAll.filter(fileName => fileName.endsWith('.json'));
+  const pageCount = reportFileNamesSource.length;
+  const bodyData = [];
+  for (const fileName of reportFileNamesSource) {
+    const fileJSON = await fs.readFile(`${reportDirAbs}/${fileName}`, 'utf8');
+    const file = JSON.parse(fileJSON);
+    const {id, host, score} = file;
+    bodyData.push({
+      id,
+      org: host.what,
+      url: host.which,
+      score: score.summary.total
+    });
+  };
+  return {
+    pageCount,
+    bodyData
+  }
+};
+// Returns the maximum score.
+const getMaxScore = tableData => tableData.reduce((max, item) => Math.max(max, item.score), 0);
+// Converts report data to a table body.
+const getTableBody = async bodyData => {
+  const maxScore = getMaxScore(bodyData);
+  const rows = bodyData
+  .sort((a, b) => a.score - b.score)
+  .map(item => {
+    const {id, org, url, score} = item;
+    const pageCell = `<th scope="row"><a href="${url}">${org}</a></th>`;
+    const numCell = `<td><a href="digests/${id}.html">${score}</a></td>`;
+    // Make the bar width proportional.
+    const barWidth = 100 * score / maxScore;
+    const bar = `<rect height="100%" width="${barWidth}%" fill="red"></rect>`;
+    const barCell = `<td aria-hidden="true"><svg width="100%" height="0.7em">${bar}</svg></td>`;
+    const row = `<tr>${pageCell}${numCell}${barCell}</tr>`;
+    return row;
+  });
+  return rows.join('\n          ');
+};
+// Returns a query for a comparative table.
+exports.getQuery = async () => {
+  const data = await getData();
+  query.pageCount = data.pageCount;
+  query.tableBody = await getTableBody(data.bodyData);
+  const date = new Date();
+  query.dateISO = date.toISOString().slice(0, 10);
+  query.dateSlash = query.dateISO.replace(/-/g, '/');
+  return query;
+};

package/procs/score/sp16a.js CHANGED Viewed

@@ -81,7 +81,7 @@ const groups = {
     }
   },
   duplicateID: {
-    weight: 3,
+    weight: 4,
     packages: {
       alfa: {
         r3: {
@@ -3043,7 +3043,7 @@ const groups = {
     }
   },
   docType: {
-    weight: 3,
+    weight: 10,
     packages: {
       nuVal: {
         'Start tag seen without seeing a doctype first. Expected <!DOCTYPE html>.': {
@@ -3056,13 +3056,13 @@ const groups = {
         docType: {
           variable: false,
           quality: 1,
-          what: 'document has no doctype property'
+          what: 'document has no valid doctype property'
         }
       }
     }
   },
   pageTitle: {
-    weight: 3,
+    weight: 10,
     packages: {
       alfa: {
         r1: {
@@ -3199,7 +3199,7 @@ const groups = {
     }
   },
   h1Missing: {
-    weight: 2,
+    weight: 3,
     packages: {
       alfa: {
         r61: {
@@ -4657,6 +4657,18 @@ const groups = {
       }
     }
   },
+  contentHidden: {
+    weight: 10,
+    packages: {
+      testaro: {
+        allHidden: {
+          variable: false,
+          quality: 1,
+          what: 'Content is entirely or mainly hidden'
+        }
+      }
+    }
+  },
   hiddenContentRisk: {
     weight: 1,
     packages: {
@@ -5943,6 +5955,32 @@ exports.scorer = async report => {
             });
           }
         }
+        else if (which === 'allHidden') {
+          const {result} = test;
+          if (
+            ['hidden', 'reallyHidden', 'visHidden', 'ariaHidden']
+            .every(
+              key => (result[key])
+              && ['document', 'body', 'main'].every(element => typeof result[key][element] === 'boolean')
+            )
+          ) {
+            // Get a score for the test.
+            const score = 8 * result.hidden.document
+            + 8 * result.hidden.body
+            + 6 * result.hidden.main
+            + 10 * result.reallyHidden.document
+            + 10 * result.reallyHidden.body
+            + 8 * result.reallyHidden.main
+            + 8 * result.visHidden.document
+            + 8 * result.visHidden.body
+            + 6 * result.visHidden.main
+            + 10 * result.ariaHidden.document
+            + 10 * result.ariaHidden.body
+            + 8 * result.ariaHidden.main;
+            // Add the score.
+            addDetail('testaro', which, score);
+          }
+        }
         else if (which === 'bulk') {
           const count = test.result && test.result.visibleElements;
           if (typeof count === 'number') {
@@ -5950,6 +5988,13 @@ exports.scorer = async report => {
             addDetail('testaro', which, Math.max(0, count / 300 - 1));
           }
         }
+        else if (which === 'docType') {
+          const hasType = test.result && test.result.docHasType;
+          if (typeof hasType === 'boolean') {
+            // Add 10 if document has no doctype.
+            addDetail('testaro', which, 10);
+          }
+        }
         else if (which === 'embAc') {
           const issueCounts = test.result && test.result.totals;
           if (issueCounts) {