testaro 64.2.0 → 64.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "testaro",
-  "version": "64.2.0",
+  "version": "64.3.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/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] ??= {};