testaro 64.2.0 → 64.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "testaro",
-  "version": "64.2.0",
+  "version": "64.4.0",
   "description": "Run 1000 web accessibility tests from 11 tools and get a standardized report",
   "main": "index.js",
   "scripts": {

package/procs/testaro.js

@@ -50,9 +50,11 @@ exports.doTest = async (
     // Get all candidates.
     const candidates = document.body.querySelectorAll(candidateSelector);
     let violationCount = 0;
-    const instances = [];
+    const standardInstances = [];
     // Get a function that returns a violation description, if any, for the candidate.
     const getBadWhat = eval(`(${getBadWhatString})`);
+    let data = {};
+    const totals = [0, 0, 0, 0];
     // For each candidate:
     for (const candidate of candidates) {
       // Get the violation description, if any.
@@ -61,35 +63,55 @@ exports.doTest = async (
       if (violationWhat) {
         // Increment the violation count.
         violationCount++;
+        let ruleWhat;
+        const violationType = typeof violationWhat;
+        // If data on the violation were provided:
+        if (violationType === 'object') {
+          // Get the description and add the data to the rule data.
+          ruleWhat = violationWhat.description;
+          data[violationCount - 1] = violationWhat.data;
+        }
+        // Otherwise, i.e. if only a description of the violation was provided:
+        else if (violationType === 'string') {
+          // Get it.
+          ruleWhat = violationWhat;
+        }
         // If itemization is required:
         if (withItems) {
-          const violationWhatStart = violationWhat.slice(0, 2);
-          let ruleSeverity = severity;
-          let ruleWhat = violationWhat
+          const ruleWhatStart = ruleWhat.slice(0, 2);
+          let instanceSeverity = severity;
           // If this violation has a custom severity:
-          if (/[0-3]:/.test(violationWhatStart)) {
-            // Get it and remove it from the violation description.
-            ruleSeverity = Number(violationWhat[0]);
-            ruleWhat = violationWhat.slice(2);
+          if (/[0-3]:/.test(ruleWhatStart)) {
+            // Get it.
+            instanceSeverity = Number(ruleWhat[0]);
+            // Remove it from the violation description.
+            ruleWhat = ruleWhat.slice(2);
+            // Increment the violation totals.
+            totals[instanceSeverity]++;
           }
           // Add an instance to the instances.
-          instances.push(
-            window.getInstance(candidate, ruleID, ruleWhat, 1, ruleSeverity)
+          standardInstances.push(
+            window.getInstance(candidate, ruleID, ruleWhat, 1, instanceSeverity)
           );
         }
+        // Otherwise, i.e. if itemization is not required:
+        else {
+          // Increment the violation totals.
+          totals[severity]++;
+        }
       }
     }
     // If there are any violations and itemization is not required:
     if (violationCount && ! withItems) {
       // Add a summary instance to the instances.
-      instances.push(
+      standardInstances.push(
         window.getInstance(null, ruleID, whats, violationCount, severity, summaryTagName)
       );
     }
     return {
-      data: {},
-      totals: [0, 0, 0, violationCount],
-      standardInstances: instances
+      data,
+      totals,
+      standardInstances
     }
   }, [
       withItems,

package/testaro/hovInd.js

@@ -10,290 +10,135 @@
 
 /*
   hovInd
-  This test reports nonstandard hover indication.
+  This test reports confusing hover indication.
 */
 
 // IMPORTS
 
-// Module to get locator data.
-const {getLocatorData} = require('../procs/getLocatorData');
-// Module to draw a sample.
-const {getSample} = require('../procs/sample');
-
-// CONSTANTS
-
-// Standard non-default hover cursors
-const standardCursor = {
-  A: 'pointer',
-  INPUT: {
-    email: 'text',
-    image: 'pointer',
-    number: 'text',
-    password: 'text',
-    search: 'text',
-    tel: 'text',
-    text: 'text',
-    url: 'text'
-  }
-};
+const {doTest} = require('../procs/testaro');
 
 // FUNCTIONS
 
-// Returns the hover-related style properties of a trigger.
-const getHoverStyles = async loc => await loc.evaluate(element => {
-  const {
-    cursor,
-    borderColor,
-    borderStyle,
-    borderWidth,
-    outlineColor,
-    outlineStyle,
-    outlineWidth,
-    outlineOffset,
-    color,
-    backgroundColor
-  } = window.getComputedStyle(element);
-  return {
-    tagName: element.tagName,
-    inputType: element.tagName === 'INPUT' ? element.getAttribute('type') || 'text' : null,
-    cursor: cursor.replace(/^.+, */, ''),
-    border: `${borderColor} ${borderStyle} ${borderWidth}`,
-    outline: `${outlineColor} ${outlineStyle} ${outlineWidth} ${outlineOffset}`,
-    color,
-    backgroundColor
-  };
-});
-// Returns data on the hover cursor.
-const getCursorData = hovStyles => {
-  const {cursor, tagName} = hovStyles;
-  const data = {
-    cursor
-  };
-  // If the element is an input or a link:
-  if (standardCursor[tagName]) {
-    // If it is an input:
-    if (tagName === 'INPUT') {
-      // Get whether its hover cursor is standard.
-      data.ok = [standardCursor.INPUT[hovStyles.inputType], 'default', 'auto'].includes(cursor);
-    }
-    // Otherwise, i.e. if it is a link:
-    else {
-      // Get whether its hover cursor is standard.
-      data.ok = [standardCursor.A, 'auto'].includes(cursor);
-    }
-  }
-  // Otherwise, if it is a button:
-  else if (tagName === 'BUTTON') {
-    // Get whether its hover cursor is standard.
-    data.ok = ['default', 'auto'].includes(cursor);
-  }
-  // Otherwise, i.e. if it has another type and a hover listener:
-  else {
-    // Assume its hover cursor is standard.
-    data.ok = true;
-  }
-  return data;
-};
-// Returns whether two hover styles are effectively identical.
-const areAlike = (styles0, styles1) => {
-  // Return whether they are effectively identical.
-  const areAlike = ['backgroundColor', 'border', 'color', 'outline']
-  .every(style => styles1[style] === styles0[style]);
-  return areAlike;
-};
-// Performs the hovInd test and reports results.
-exports.reporter = async (page, withItems, sampleSize = 20) => {
-  // Initialize the result.
-  const data = {
-    typeTotals: {
-      badCursor: 0,
-      hoverLikeDefault: 0,
-      hoverLikeFocus: 0
-    }
-  };
-  const totals = [0, 0, 0, 0];
-  const standardInstances = [];
-  // Identify the triggers.
-  const selectors = ['a', 'button', 'input', '[onmouseenter]', '[onmouseover]'];
-  const selectorString = selectors.map(selector => `body ${selector}:visible`).join(', ');
-  const locAll = page.locator(selectorString);
-  const locsAll = await locAll.all();
-  // Get the population-to-sample ratio.
-  const psRatio = Math.max(1, locsAll.length / sampleSize);
-  // Get a sample of the triggers.
-  const sampleIndexes = getSample(locsAll, sampleSize);
-  const sample = locsAll.filter((loc, index) => sampleIndexes.includes(index));
-  // For each trigger:
-  for (const loc of sample) {
-    try {
-      // Get its style properties.
-      const preStyles = await getHoverStyles(loc);
-      // Focus it.
-      await loc.focus({timeout: 500});
-      // If focusing succeeds, get its style properties.
-      const focStyles = await getHoverStyles(loc);
-      // Blur it.
-      await loc.blur({timeout: 500});
-      // If blurring succeeds, try to hover over it.
-      await loc.hover({timeout: 600});
-      // If hovering succeeds, get its style properties.
-      const hovStyles = await getHoverStyles(loc);
-      // If all 3 style declarations belong to the same element:
-      if ([focStyles, hovStyles].every(style => style.code === preStyles.code)) {
-        // Get data on the element if itemization is required.
-        const elData = withItems ? await getLocatorData(loc) : null;
-        // If the hover cursor is nonstandard:
-        const cursorData = getCursorData(hovStyles);
-        if (! cursorData.ok) {
-          // Add to the totals.
-          totals[2] += psRatio;
-          data.typeTotals.badCursor += psRatio;
-          // If itemization is required:
-          if (withItems) {
-            // Add an instance to the result.
-            standardInstances.push({
-              ruleID: 'hovInd',
-              what: `Element has a nonstandard hover cursor (${cursorData.cursor})`,
-              ordinalSeverity: 2,
-              tagName: elData.tagName,
-              id: elData.id,
-              location: elData.location,
-              excerpt: elData.excerpt
-            });
-          }
+exports.reporter = async (page, withItems) => {
+  const getBadWhat = element => {
+    const violationTypes = [];
+    const isVisible = element.checkVisibility({
+      contentVisibilityAuto: true,
+      opacityProperty: true,
+      visibilityProperty: true
+    });
+    // If the element is visible:
+    if (isVisible) {
+      // Get its live style declaration.
+      const styleDec = window.getComputedStyle(element);
+      // FUNCTION DEFINITIONS START
+      // Returns hover-related style data on a trigger.
+      const getStyleData = () => {
+        const {
+          cursor,
+          borderColor,
+          borderStyle,
+          borderWidth,
+          outlineColor,
+          outlineStyle,
+          outlineWidth,
+          outlineOffset,
+          color,
+          backgroundColor
+        } = styleDec;
+        return {
+          tagName: element.tagName,
+          inputType: element.tagName === 'INPUT' ? element.getAttribute('type') || 'text' : null,
+          cursor: cursor.replace(/^.+, */, ''),
+          border: `${borderColor} ${borderStyle} ${borderWidth}`,
+          outline: `${outlineColor} ${outlineStyle} ${outlineWidth} ${outlineOffset}`,
+          color,
+          backgroundColor
+        };
+      };
+      // Returns whether the cursor is bad when the element is hovered over.
+      const cursorIsBad = hoverCursor => {
+        const {tagName, type} = element;
+        if (tagName === 'A' || tagName === 'INPUT' && type === 'image') {
+          return hoverCursor !== 'pointer';
         }
-        // If the element is a button and the hover and default states are not distinct:
-        if (hovStyles.tagName === 'BUTTON' && areAlike(preStyles, hovStyles)) {
-          // Add to the totals.
-          totals[1] += psRatio;
-          data.typeTotals.hoverLikeDefault += psRatio;
-          // If itemization is required:
-          if (withItems) {
-            // Add an instance to the result.
-            standardInstances.push({
-              ruleID: 'hovInd',
-              what: 'Element border, outline, color, and background color do not change when hovered over',
-              ordinalSeverity: 1,
-              tagName: elData.tagName,
-              id: elData.id,
-              location: elData.location,
-              excerpt: elData.excerpt
-            });
-          }
-        }
-        // If the hover and focus states are indistinct but differ from the default state:
-        if (areAlike(hovStyles, focStyles) && ! areAlike(hovStyles, preStyles)) {
-          // Add to the totals.
-          totals[1] += psRatio;
-          data.typeTotals.hoverLikeFocus += psRatio;
-          // If itemization is required:
-          if (withItems) {
-            // Add an instance to the result.
-            standardInstances.push({
-              ruleID: 'hovInd',
-              what: 'Element border, outline, color, and background color are alike on hover and focus',
-              ordinalSeverity: 1,
-              tagName: elData.tagName,
-              id: elData.id,
-              location: elData.location,
-              excerpt: elData.excerpt
-            });
+        if (tagName === 'INPUT') {
+          if (['button', 'radio', 'reset', 'submit'].some(typeName => type === typeName)) {
+            return hoverCursor !== 'default';
           }
+          return hoverCursor !== 'text';
         }
+        return ! ['auto', 'default'].includes(hoverCursor);
+      };
+      // Returns whether two hover styles are effectively identical.
+      const areAlike = (styles0, styles1) => {
+        // Return whether they are effectively identical.
+        const areAlike = ['cursor', 'backgroundColor', 'border', 'color', 'outline']
+        .every(style => styles1[style] === styles0[style]);
+        return areAlike;
+      };
+      // FUNCTION DEFINITIONS END
+      // Get its style data when neither focused nor hovered over.
+      const defaultStyleData = getStyleData();
+      // Correct the cursor value.
+      defaultStyleData.cursor = 'default';
+      // Get its style data when only focused.
+      element.focus();
+      const focusStyleData = getStyleData();
+      // Correct the cursor value.
+      focusStyleData.cursor = 'default';
+      // Get its style data when only hovered over.
+      element.blur();
+      element.dispatchEvent(new MouseEvent('mouseenter'));
+      const hoverStyleData = getStyleData();
+      const data = {};
+      // If the cursor is confusing when the element is only hovered over:
+      if (cursorIsBad(hoverStyleData.cursor)) {
+        // Add this to the violation types.
+        violationTypes.push(
+          `nonstandard mouse cursor (${hoverStyleData.cursor}) when hovered over`
+        );
       }
-      // Otherwise, i.e. if the style properties do not all belong to the same element:
-      else {
-        // Report this and quit.
-        data.prevented = true;
-        data.error = 'ERROR: Page changes on focus or hover prevent test';
-        break;
+      // If the neutral and hover styles are indistinguishable:
+      if (areAlike(defaultStyleData, hoverStyleData)) {
+        // Add this to the violation types.
+        violationTypes.push('normal and hover styles are indistinguishable');
+        // Add the details to the data.
+        data.n_h = {
+          neutral: defaultStyleData,
+          hover: hoverStyleData
+        };
       }
-    }
-    catch(error) {
-      // If the page closed:
-      if (
-        ['Target page', 'detached', 'null', 'closed'].some(string => error.message.includes(string))
-      ) {
-        data.error = `ERROR during hovInd test: ${error.message}`;
+      // If the focus and hoverstyles are indistinguishable:
+      if (areAlike(focusStyleData, hoverStyleData)) {
+        // Add this to the violation types.
+        violationTypes.push('focus and hover styles are indistinguishable');
+        // Add the details to the data.
+        data.f_h = {
+          focus: focusStyleData,
+          hover: hoverStyleData
+        };
       }
-      else {
-        const elementText = loc ? await loc.textContent({timeout: 200}) : '';
-        const excerpt = elementText ? elementText.trim().slice(0, 100) : '<no text>';
-        data.error = `ERROR manipulating element (${excerpt}) during hovInd test`;
+      // If any violations occurred:
+      if (violationTypes.length) {
+        const description = `Element styles do not clearly indicate hovering: ${violationTypes.join('; ')}`;
+        // If there are additional data:
+        if (Object.keys(data).length) {
+          // Return the violation description and data.
+          return {
+            description,
+            data
+          };
+        }
+        // Otherwise, i.e. if there are no additional data:
+        else {
+          // Return the violation description.
+          return description;
+        }
       }
-      data.prevented = true;
-      // Abort this test.
-      break;
-    }
-  }
-  // Round the totals.
-  Object.keys(data.typeTotals).forEach(rule => {
-    data.typeTotals[rule] = Math.round(data.typeTotals[rule]);
-  });
-  for (const index in totals) {
-    totals[index] = Math.round(totals[index]);
-  }
-  // If itemization is not required:
-  if (! withItems) {
-    // If any triggers have nonstandard hover cursors:
-    if (data.typeTotals.badCursor) {
-      // Add a summary instance to the result.
-      standardInstances.push({
-        ruleID: 'hovInd',
-        what: 'Elements have nonstandard hover cursors',
-        ordinalSeverity: 2,
-        count: data.typeTotals.badCursor,
-        tagName: '',
-        id: '',
-        location: {
-          doc: '',
-          type: '',
-          spec: ''
-        },
-        excerpt: ''
-      });
-    }
-    // If any triggers have hover styles not distinct from their default styles:
-    if (data.typeTotals.hoverLikeDefault) {
-      // Add a summary instance to the result.
-      standardInstances.push({
-        ruleID: 'hovInd',
-        what: 'Element borders, outlines, and background colors do not change when hovered over',
-        ordinalSeverity: 1,
-        count: data.typeTotals.hoverLikeDefault,
-        tagName: '',
-        id: '',
-        location: {
-          doc: '',
-          type: '',
-          spec: ''
-        },
-        excerpt: ''
-      });
-    }
-    // If any triggers have hover styles not distinct from their focus styles:
-    if (data.typeTotals.hoverLikeFocus) {
-      // Add a summary instance to the result.
-      standardInstances.push({
-        ruleID: 'hovInd',
-        what: 'Element borders, outlines, and background colors on focus and on hover do not differ',
-        ordinalSeverity: 1,
-        count: data.typeTotals.hoverLikeFocus,
-        tagName: '',
-        id: '',
-        location: {
-          doc: '',
-          type: '',
-          spec: ''
-        },
-        excerpt: ''
-      });
     }
-  }
-  // Return the result.
-  return {
-    data,
-    totals,
-    standardInstances
   };
+  const selector = 'a, button, input, [onmouseenter], [onmouseover]';
+  const whats = 'elements have confusing hover indicators';
+  return await doTest(page, withItems, 'hovInd', selector, whats, 1, null, getBadWhat.toString());
 };

package/testaro/motion.js

@@ -51,6 +51,16 @@ exports.reporter = async page => {
       // Report this.
       data.prevented = true;
       data.error = 'Screenshot dimensions differ';
+      data.dimensions = {
+        shoot0: {
+          width: shoot0PNG.width,
+          height: shoot0PNG.height
+        },
+        shoot1: {
+          width: shoot1PNG.width,
+          height: shoot1PNG.height
+        }
+      }
     }
     // Otherwise, i.e. if their dimensions are identical:
     else {

package/tests/nuVnu.js

@@ -10,7 +10,8 @@
 
 /*
   This tool subjects a page and its source to the Nu Html Checker, thereby testing scripted content found only in the loaded page and erroneous content before the browser corrects it. The API erratically replaces left and right double quotation marks with invalid UTF-8, which appears as 2 or 3 successive instances of the replacement character (U+fffd). Therefore, this test removes all such quotation marks and the replacement character. That causes 'Bad value “” for' to become 'Bad value  for'. Since the corruption of quotation marks is erratic, no better solution is known.
-  This tool is the installed version of the Nu Html Checker. It is an alternative to the nuVal tool, which uses the same validator as a web service of the World Wide Web Consortium (W3C). Each tool has advantages and disadvantages. The main advantage of the nuVnu tool is that it can evaluate pages larger than about 80,000 bytes and pages reachable from the host that Testaro runs on even if not reachable from the public Internet. The main advantage of nuVal is that it does not require the Testaro host to provide a Java virtual machine.
+  This tool is the installed version of the Nu Html Checker. It is an alternative to the nuVal tool, which uses the same validator as a web service of the World Wide Web Consortium (W3C). Each tool has advantages and disadvantages. The main advantage of the nuVnu tool is that it can evaluate pages larger than about 80,000 bytes and pages reachable from the host that Testaro runs on even if not reachable from the public Internet. The main advantages of nuVal are that it usually runs faster than nuVnu and it does not require the Testaro host to provide a Java virtual machine.
+  When both nuVal and nuVnu are included in a job, nuVal should precede nuVnu. If nuVal succeeds, nuVnu aborts. So, only one of the two tools contributes instances to the job report.
 */
 
 // IMPORTS
@@ -32,48 +33,64 @@ const tmpDir = os.tmpdir();
 
 // Conducts and reports the Nu Html Checker tests.
 exports.reporter = async (page, report, actIndex) => {
-  const act = report.acts[actIndex];
-  const {rules, withSource} = act;
-  // Get the content.
-  const data = await getContent(page, withSource);
-  let result;
-  // If it was obtained:
-  if (data.testTarget) {
-    const pagePath = `${tmpDir}/nuVnu-page-${report.id}.html`;
-    // Save it in a temporary file.
-    await fs.writeFile(pagePath, data.testTarget);
-    let nuData;
-    try {
-      // Get Nu Html Checker output on it.
-      nuData = await vnu.check(['--format', 'json', '--stdout', pagePath]);
-    }
-    // If any error was thrown:
-    catch (error) {
-      const errorMessage = error.message;
+  // Get the vuVal act, if it exists.
+  const nuValAct = report.acts.find(act => act.type === 'test' && act.which === 'nuVal');
+  // If it does not exist or it exists but was prevented:
+  if (! nuValAct || nuValAct.data?.prevented) {
+    const act = report.acts[actIndex];
+    const {rules, withSource} = act;
+    // Get the content.
+    const data = await getContent(page, withSource);
+    let result;
+    // If it was obtained:
+    if (data.testTarget) {
+      const pagePath = `${tmpDir}/nuVnu-page-${report.id}.html`;
+      // Save it in a temporary file.
+      await fs.writeFile(pagePath, data.testTarget);
+      let nuData;
       try {
-      // Parse it as JSON, i.e. a benign nuVnu result with at least 1 violation.
-        nuData = JSON.parse(error.message);
+        // Get Nu Html Checker output on it.
+        nuData = await vnu.check(['--format', 'json', '--stdout', pagePath]);
       }
-      // If parsing it as JSON fails:
+      // If any error was thrown:
       catch (error) {
-        // Report a genuine error.
-        data.prevented = true;
-        data.error = errorMessage;
+        const errorMessage = error.message;
+        try {
+        // Parse it as JSON, i.e. a benign nuVnu result with at least 1 violation.
+          nuData = JSON.parse(error.message);
+        }
+        // If parsing it as JSON fails:
+        catch (error) {
+          // Report a genuine error.
+          data.prevented = true;
+          data.error = errorMessage;
+        }
       }
+      // Delete the temporary file.
+      await fs.unlink(pagePath);
+      // Postprocess the result.
+      result = curate(data, nuData, rules);
+    }
+    // Otherwise, i.e. if the content was not obtained:
+    else {
+      // Report this.
+      data.prevented = true;
+      data.error = 'Content not obtained';
     }
-    // Delete the temporary file.
-    await fs.unlink(pagePath);
-    // Postprocess the result.
-    result = curate(data, nuData, rules);
+    return {
+      data,
+      result
+    };
   }
-  // Otherwise, i.e. if the content was not obtained:
+  // Otherwise, i.e. if the nuVal act exists and succeeded:
   else {
-    // Report this.
-    data.prevented = true;
-    data.error = 'Content not obtained';
+    // Abort this act and report this.
+    return {
+      data: {
+        skipped: true,
+        reason: 'nuVal succeeded'
+      },
+      result: {}
+    };
   }
-  return {
-    data,
-    result
-  };
 };

package/tests/testaro.js

@@ -576,7 +576,9 @@ exports.reporter = async (page, report, actIndex) => {
             // Round them.
             ruleResult.totals = ruleResult.totals.map(total => Math.round(total));
           }
-          const ruleDataMiscKeys = Object.keys(ruleResult.data).filter(key => ! ['prevented', 'error'].includes(key));
+          const ruleDataMiscKeys = Object
+          .keys(ruleResult.data)
+          .filter(key => ! ['prevented', 'error'].includes(key));
           // For any other property of the rule report data object:
           ruleDataMiscKeys.forEach(key => {
             data.ruleData[ruleID] ??= {};