testaro 5.17.2 → 5.18.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "testaro",
-  "version": "5.17.2",
+  "version": "5.18.0",
   "description": "Automation of accessibility testing",
   "main": "index.js",
   "scripts": {

package/tests/hover.js

@@ -1,17 +1,22 @@
 /*
   hover
   This test reports unexpected impacts of hovering. The effects include additions and removals
-  of visible elements, opacity changes, and unhoverable elements. The elements that are
-  subjected to hovering (called “triggers”) are the Playwright-visible elements that have 'A',
-  'BUTTON', or 'LI' tag names or have 'onmouseenter' or 'onmouseover' attributes. When such an
-  element is hovered over, the test examines the impacts on descendants of the great grandparents
-  of the elements with tag names 'A' and 'BUTTON', grandparents of elements with tag name 'LI',
-  and otherwise the descendants of the elements themselves. Four impacts are counted: (1) an
-  element is added or becomes visible, (2) an element is removed or becomes invisible, (3) the
-  opacity of an element changes, and (4) the element is a descendant of an element whose opacity
+  of visible elements, opacity changes, unhoverable elements, and suppression of hover indication.
+  The elements that are subjected to hovering (called “triggers”) are the Playwright-visible
+  elements that have 'A', 'BUTTON', or 'LI' tag names or have 'onmouseenter' or 'onmouseover'
+  attributes.
+  
+  When such an element is hovered over, the test examines the impacts on descendants of the great
+  grandparents of the elements with tag names 'A' and 'BUTTON', grandparents of elements with tag
+  name 'LI', and otherwise the descendants of the elements themselves. Four impacts are counted:
+  (1) an element is added or becomes visible, (2) an element is removed or becomes invisible, (3)
+  the opacity of an element changes, and (4) the element is a descendant of an element whose opacity
   changes. The test checks up to 4 times for hovering impacts at intervals of 0.3 second.
 
-  Despite this delay, the test can make the execution time practical by randomly sampling triggers
+  The test also examines how the hover event is indicated to the user with the mouse cursor and with
+  style changes.
+
+  Despite the delay, the test can make the execution time practical by randomly sampling triggers
   instead of hovering over all of them. When sampling is performed, the results may vary from one
   execution to another. Because hover impacts typically occur near the beginning of a page, the
   probability of the inclusion of a trigger in a sample decreases with the index of the trigger.
@@ -30,7 +35,10 @@ let hasTimedOut = false;
 
 // FUNCTIONS
 
-// Samples a population and returns the sample and each member’s sampling probability.
+// Gets the probability of a trigger being sampled.
+const samProb = (index, popSize, sampleRatio) =>
+  sampleRatio * (1 + Math.sin(Math.PI * index / popSize + Math.PI / 2));
+// Samples the trigger population and returns the sample and each member’s sampling probability.
 const getSample = (population, sampleSize) => {
   const popSize = population.length;
   // If the sample is at least as large as the population:
@@ -43,13 +51,9 @@ const getSample = (population, sampleSize) => {
     // Force the sample size to be an integer and at least 1.
     sampleSize = Math.floor(Math.max(1, sampleSize));
     const sampleRatio = sampleSize / popSize;
-    // FUNCTION DEFINITION START
-    // Gets the probability of a trigger being sampled.
-    const samProb = index => (1 + Math.sin(Math.PI * index / popSize + Math.PI / 2)) * sampleRatio;
-    // FUNCTION DEFINITION END
     // Get the sample.
     const sample = population.map((trigger, index) => {
-      const itemProb = samProb(index);
+      const itemProb = samProb(index, popSize, sampleRatio);
       return [trigger, itemProb];
     }).filter(pair => pair[1] > Math.random());
     return sample;
@@ -59,9 +63,84 @@ const getSample = (population, sampleSize) => {
 const textOf = async (element, limit) => {
   let text = await element.textContent();
   text = text.trim() || await element.innerHTML();
-  return text.trim().replace(/\s*/sg, '').slice(0, limit);
+  return text.trim().replace(/\s+/sg, ' ').slice(0, limit);
+};
+// Returns the impacts of hovering over a sampled trigger.
+const getImpacts = async (
+  interval, triesLeft, root, page, preDescendants, preOpacities
+) => {
+  // If the allowed trial count has not yet been exhausted:
+  if (triesLeft-- && ! hasTimedOut) {
+    // Get the collection of descendants of the root.
+    const postDescendants = await root.$$(':visible');
+    // Identify the prior descendants of the root still in existence.
+    const remainerIndexes = await page.evaluate(args => {
+      const preDescendants = args[0];
+      const postDescendants = args[1];
+      const remainerIndexes = preDescendants
+      .map((element, index) => postDescendants.includes(element) ? index : -1)
+      .filter(index => index > -1);
+      return remainerIndexes;
+    }, [preDescendants, postDescendants]);
+    // Get the impacts of the hover event.
+    const additions = postDescendants.length - remainerIndexes.length;
+    const removals = preDescendants.length - remainerIndexes.length;
+    const remainers = [];
+    for (const index of remainerIndexes) {
+      remainers.push({
+        element: preDescendants[index],
+        preOpacity: preOpacities[index],
+        postOpacity: await page.evaluate(
+          element => window.getComputedStyle(element).opacity, preDescendants[index]
+        )
+      });
+    }
+    const opacityChangers = remainers
+    .filter(remainer => remainer.postOpacity !== remainer.preOpacity);
+    const opacityImpact = opacityChangers
+      ? await page.evaluate(changers => changers.reduce(
+        (total, current) => total + current.element.querySelectorAll('*').length, 0
+      ), opacityChangers)
+      : 0;
+    // If there are any impacts:
+    if (additions || removals || opacityChangers.length) {
+      // Return them.
+      return {
+        additions,
+        removals,
+        opacityChanges: opacityChangers.length,
+        opacityImpact
+      };
+    }
+    // Otherwise, i.e. if there are no impacts:
+    else {
+      // Try again.
+      return await new Promise(resolve => {
+        setTimeout(() => {
+          resolve(getImpacts(interval, triesLeft, root, page, preDescendants, preOpacities));
+        }, interval);
+      });
+    }
+  }
+  // Otherwise, i.e. if the allowed trial count has been exhausted:
+  else {
+    // Report non-impact.
+    return null;
+  }
 };
-// Recursively reports impacts of hovering over triggers.
+// Returns the hover-related style properties of a trigger.
+const getHoverStyles = async (page, element) => await page.evaluate(
+  element => {
+    const {cursor, outline, color, backgroundColor} = window.getComputedStyle(element);
+    return {
+      cursor: cursor.replace(/^.+, */, ''),
+      outline,
+      color,
+      backgroundColor
+    };
+  }, element
+);
+// Recursively adds estimated and itemized impacts of hovering over triggers to data.
 const find = async (data, withItems, page, sample) => {
   // If any triggers remain and the test has not timed out:
   if (sample.length && ! hasTimedOut) {
@@ -69,6 +148,8 @@ const find = async (data, withItems, page, sample) => {
     try {
       // Identify the first trigger and its sampling probability.
       const firstTrigger = sample[0];
+      const onmouseenter = await firstTrigger[0].getAttribute('onmouseenter');
+      const onmouseover = await firstTrigger[0].getAttribute('onmouseover');
       const tagNameJSHandle = await firstTrigger[0].getProperty('tagName')
       .catch(() => '');
       if (tagNameJSHandle) {
@@ -93,78 +174,70 @@ const find = async (data, withItems, page, sample) => {
         const preOpacities = await page.evaluate(elements => elements.map(
           element => window.getComputedStyle(element).opacity
         ), preDescendants);
+        // Get the style properties of the trigger.
+        const triggerPreStyles = await getHoverStyles(page, firstTrigger[0]);
+        const totalEstimate = 1 / firstTrigger[1];
+        const itemData = {
+          tagName,
+          id: (await firstTrigger[0].getAttribute('id')) || '',
+          text: await textOf(firstTrigger[0], 50)
+        };
         try {
           // Hover over the trigger.
           await firstTrigger[0].hover({
             timeout: 500,
             noWaitAfter: true
           });
-          // FUNCTION DEFINITION START
-          // Repeatedly seeks impacts.
-          const getImpacts = async (interval, triesLeft) => {
-            // If the allowed trial count has not yet been exhausted:
-            if (triesLeft-- && ! hasTimedOut) {
-              // Get the collection of descendants of the root.
-              const postDescendants = await root.$$(':visible');
-              // Identify the prior descandants of the root still in existence.
-              const remainerIndexes = await page.evaluate(args => {
-                const preDescendants = args[0];
-                const postDescendants = args[1];
-                const remainerIndexes = preDescendants
-                .map((element, index) => postDescendants.includes(element) ? index : -1)
-                .filter(index => index > -1);
-                return remainerIndexes;
-              }, [preDescendants, postDescendants]);
-              // Get the impacts of the hover event.
-              const additionCount = postDescendants.length - remainerIndexes.length;
-              const removalCount = preDescendants.length - remainerIndexes.length;
-              const remainers = [];
-              for (const index of remainerIndexes) {
-                remainers.push({
-                  element: preDescendants[index],
-                  preOpacity: preOpacities[index],
-                  postOpacity: await page.evaluate(
-                    element => window.getComputedStyle(element).opacity, preDescendants[index]
-                  )
-                });
-              }
-              const opacityChangers = remainers
-              .filter(remainer => remainer.postOpacity !== remainer.preOpacity);
-              const opacityImpact = opacityChangers
-              ? await page.evaluate(changers => changers.reduce(
-                (total, current) => total + current.element.querySelectorAll('*').length, 0
-              ), opacityChangers)
-              : 0;
-              // If there are any impacts:
-              if (additionCount || removalCount || opacityChangers.length) {
-                // Return them as estimated population impacts.
-                return {
-                  additionCount: additionCount / firstTrigger[1],
-                  removalCount: removalCount / firstTrigger[1],
-                  opacityChanges: opacityChangers.length / firstTrigger[1],
-                  opacityImpact: opacityImpact / firstTrigger[1]
-                };
-              }
-              // Otherwise, i.e. if there are no impacts:
-              else {
-                // Try again.
-                return await new Promise(resolve => {
-                  setTimeout(() => {
-                    resolve(getImpacts(interval, triesLeft));
-                  }, interval);
-                });
-              }
+          // Repeatedly seek impacts of the hover at intervals.
+          const impacts = await getImpacts(
+            300, 4, root, page, preDescendants, preOpacities, firstTrigger
+          );
+          // Get the style properties of the trigger.
+          const triggerPostStyles = await getHoverStyles(page, firstTrigger[0]);
+          // Add cursor and other style defects to the data.
+          const cursor = triggerPreStyles.cursor;
+          // If the trigger has no cursor:
+          if (cursor === 'none') {
+            // Add this fact to the data.
+            data.totals.noCursors += totalEstimate;
+            if (withItems) {
+              data.items.noCursors.push(itemData);
             }
-            // Otherwise, i.e. if the allowed trial count has been exhausted:
-            else {
-              // Report non-impact.
-              return null;
+          }
+          // If the trigger has an improper cursor:
+          if (
+            tagName === 'A' && cursor !== 'pointer'
+            || tagName === 'BUTTON' && cursor !== 'default'
+          ){
+            // Add this fact to the data.
+            data.totals.badCursors += totalEstimate;
+            if (withItems) {
+              data.items.badCursors.push(itemData);
             }
-          };
-          // FUNCTION DEFINITION END
-          // Repeatedly seek impacts of the hover at intervals.
-          const impacts = await getImpacts(300, 4);
-          // If there were any:
+          }
+          // If hover indication is required but is absent:
+          if (
+            (tagName === 'BUTTON' || onmouseenter || onmouseover)
+            && JSON.stringify(triggerPostStyles) === JSON.stringify(triggerPreStyles)
+          ) {
+            // Add this fact to the data.
+            data.totals.noIndicators += totalEstimate;
+            if (withItems) {
+              data.items.noIndicators.push(itemData);
+            }
+          }
+          // If hover indication is illicit but is present:
+          if (
+            tagName === 'LI'
+            && JSON.stringify(triggerPostStyles) !== JSON.stringify(triggerPreStyles)
+          ) {
+            // Add this fact to the data.
+            data.totals.badIndicators += totalEstimate;
+            if (withItems) {
+              data.items.badIndicators.push(itemData);
+            }
+          }
+          // If there were any impacts:
           if (impacts) {
             // Hover over the upper-left corner of the page, to undo any impacts.
             await page.hover('body', {
@@ -176,30 +249,30 @@ const find = async (data, withItems, page, sample) => {
               force: true,
               noWaitAfter: true
             });
-            // Wait for any delayed and/or slowed hover reaction.
+            // Wait for any delayed and/or slowed reaction.
             await page.waitForTimeout(200);
             await root.waitForElementState('stable');
             // Increment the estimated counts of triggers and impacts.
-            const {additionCount, removalCount, opacityChanges, opacityImpact} = impacts;
+            const {additions, removals, opacityChanges, opacityImpact} = impacts;
             if (hasTimedOut) {
               return Promise.resolve('');
             }
             else {
-              data.totals.impactTriggers += 1 / firstTrigger[1];
-              data.totals.additions += additionCount;
-              data.totals.removals += removalCount;
-              data.totals.opacityChanges += opacityChanges;
-              data.totals.opacityImpact += opacityImpact;
+              data.totals.impactTriggers += totalEstimate;
+              data.totals.additions += additions / firstTrigger[1];
+              data.totals.removals += removals / firstTrigger[1];
+              data.totals.opacityChanges += opacityChanges / firstTrigger[1];
+              data.totals.opacityImpact += opacityImpact / firstTrigger[1];
               // If details are to be reported:
               if (withItems) {
-                // Report them, with probability weighting removed.
+                // Add them to the data.
                 data.items.impactTriggers.push({
                   tagName,
                   text: await textOf(firstTrigger[0], 50),
-                  additions: additionCount * firstTrigger[1],
-                  removals: removalCount * firstTrigger[1],
-                  opacityChanges: opacityChanges * firstTrigger[1],
-                  opacityImpact: opacityImpact * firstTrigger[1]
+                  additions,
+                  removals,
+                  opacityChanges,
+                  opacityImpact
                 });
               }
             }
@@ -211,15 +284,10 @@ const find = async (data, withItems, page, sample) => {
             return Promise.resolve('');
           }
           else {
-            data.totals.unhoverables += 1 / firstTrigger[1];
+            data.totals.unhoverables += totalEstimate;
             if (withItems) {
               try {
-                const id = await firstTrigger[0].getAttribute('id');
-                data.items.unhoverables.push({
-                  tagName,
-                  id: id || '',
-                  text: await textOf(firstTrigger[0], 50)
-                });
+                data.items.unhoverables.push(itemData);
               }
               catch(error) {
                 console.log('ERROR itemizing unhoverable element');
@@ -251,7 +319,11 @@ exports.reporter = async (page, sampleSize = -1, withItems) => {
       removals: 0,
       opacityChanges: 0,
       opacityImpact: 0,
-      unhoverables: 0
+      unhoverables: 0,
+      noCursors: 0,
+      badCursors: 0,
+      noIndicators: 0,
+      badIndicators: 0
     }
   };
   // If details are to be reported:
@@ -259,7 +331,11 @@ exports.reporter = async (page, sampleSize = -1, withItems) => {
     // Add properties for details to the initialized result.
     data.items = {
       impactTriggers: [],
-      unhoverables: []
+      unhoverables: [],
+      noCursors: [],
+      badCursors: [],
+      noIndicators: [],
+      badIndicators: []
     };
   }
   // Identify the triggers.
@@ -288,7 +364,7 @@ exports.reporter = async (page, sampleSize = -1, withItems) => {
     };
     clearTimeout(timeout);
   }, 1000 * timeLimit);
-  // Find and document the impacts.
+  // Find and document the style defects and impacts of the sampled triggers.
   if (sample.length && ! hasTimedOut) {
     await find(data, withItems, page, sample);
   }

package/tests/titledEl.js

@@ -10,7 +10,9 @@ exports.reporter = async (page, withItems) => {
     badTitleElements => {
       // FUNCTION DEFINITION START
       // Returns a space-minimized copy of a string.
-      const compact = string => string.replace(/[\t\n]/g, '').replace(/\s{2,}/g, ' ').trim();
+      const compact = string => string
+      ? string.replace(/[\t\n]/g, '').replace(/\s{2,}/g, ' ').trim()
+      : '';
       // FUNCTION DEFINITION END
       return badTitleElements.map(element => ({
         tagName: element.tagName,

package/validation/tests/scripts/hover.json

@@ -16,10 +16,10 @@
       "type": "test",
       "which": "hover",
       "what": "hover",
-      "sampleSize": 2,
+      "sampleSize": 5,
       "withItems": true,
       "expect": [
-        ["totals.triggers", "=", 2],
+        ["totals.triggers", "=", 4],
         ["totals.impactTriggers", "=", 0],
         ["totals.additions", "=", 0],
         ["totals.removals", "=", 0],
@@ -38,21 +38,23 @@
       "type": "test",
       "which": "hover",
       "what": "hover",
-      "sampleSize": 5,
+      "sampleSize": 8,
       "withItems": true,
       "expect": [
-        ["totals.triggers", "=", 4],
-        ["totals.impactTriggers", "=", 2],
+        ["totals.triggers", "=", 6],
+        ["totals.impactTriggers", "=", 3],
         ["totals.additions", "=", 3],
-        ["totals.removals", "=", 0],
+        ["totals.removals", "=", 1],
         ["totals.opacityChanges", "=", 1],
         ["totals.opacityImpact", "=", 1],
         ["totals.unhoverables", "=", 1],
         ["items.impactTriggers.0.tagName", "=", "A"],
         ["items.impactTriggers.1.tagName", "=", "BUTTON"],
+        ["items.impactTriggers.2.tagName", "=", "LI"],
         ["items.impactTriggers.0.text", "=", "information"],
         ["items.impactTriggers.0.additions", "=", 0],
         ["items.impactTriggers.1.additions", "=", 3],
+        ["items.impactTriggers.2.removals", "=", 1],
         ["items.impactTriggers.0.opacityChanges", "=", 1],
         ["items.impactTriggers.1.opacityImpact", "=", 0],
         ["items.unhoverables.0.tagName", "=", "BUTTON"],
@@ -70,7 +72,7 @@
       "which": "hover",
       "what": "hover",
       "sampleSize": 10,
-      "withItems": true,
+      "withItems": false,
       "expect": [
         ["totals.triggers", "=", 20],
         ["totals.impactTriggers", ">", -1],
@@ -82,6 +84,26 @@
         ["totals.opacityImpact", "=", 0],
         ["totals.unhoverables", "=", 0]
       ]
+    },
+    {
+      "type": "url",
+      "which": "__targets__/hover/styleBad.html",
+      "what": "page with deviant trigger styles"
+    },
+    {
+      "type": "test",
+      "which": "hover",
+      "what": "hover",
+      "sampleSize": 5,
+      "withItems": true,
+      "expect": [
+        ["totals.noIndicators", "=", 1],
+        ["totals.noCursors", "=", 1],
+        ["totals.badIndicators", "=", 1],
+        ["items.noIndicators.0.text", "=", "button"],
+        ["items.noCursors.0.tagName", "=", "LI"],
+        ["items.badIndicators.0.id", "=", "li2"]
+      ]
     }
   ]
 }

package/validation/tests/targets/hover/bad.html

@@ -14,6 +14,12 @@
       <p id="translucent" style="opacity: 0.4">The first link, when hovered over, changes the opacity of this paragraph from 0.4 to 1. That indirectly changes the opacity of this <span>word</span>, too.</p>
       <p>The small button is mostly covered by a large one here, preventing the small button from receiving a hover event.</p>
       <p style="position: relative"><button id="smallButton" style="position: absolute; left: 10rem">button</button><button style="position: absolute; left: 11rem; top: -0.5rem; font-size: x-large">bigger button</button></p>
+      <p>Hovering over the first of the following list items changes content.</p>
+      <ul>
+        <li onmouseover="document.getElementById('listDependent').setAttribute('hidden', true)">This is a list item.</li>
+        <li>This is another list item.</li>
+      </ul>
+      <p id="listDependent">This paragraph becomes invisible when you hover over the first list item.</p>
     </main>
   </body>
 </html>

package/validation/tests/targets/hover/good.html

@@ -10,6 +10,11 @@
     <main>
       <h1>Page with standard hover behavior</h1>
       <p>This paragraph contains a link to <a href="https://en.wikipedia.org">information</a> and a <button type="button">button</button>. Both of them can be hovered over, and hovering over either of them does not trigger any change in content.</p>
+      <p>Hovering over either of the following list items changes no content.</p>
+      <ul>
+        <li>This is a list item.</li>
+        <li>This is another list item.</li>
+      </ul>
     </main>
   </body>
 </html>

package/validation/tests/targets/hover/styleBad.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <title>Page with deviant hover indicators</title>
+    <meta name="description" content="tester">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <style>
+      button, button:hover {
+        color: red;
+        background-color: white;
+        border: 2px solid black;
+      }
+      li.cursorless {
+        cursor: none;
+      }
+      li.hoverChanger:hover {
+        color: blue;
+        background-color: yellow;
+      }
+    </style>
+  </head>
+  <body>
+    <main>
+      <h1>Page with deviant hover indicators</h1>
+      <p>This page contains a link to <a href="https://en.wikipedia.org">information</a> and a <button type="button">button</button>. The default style change of the button is prevented.</p>
+      <p>This is a list.</p>
+      <ul>
+        <li>This is a normal list item.</li>
+        <li class="cursorless">This is a list item that loses its cursor when hovered over.</li>
+        <li id="li2" class="hoverChanger">This is a list item that changes when hovered over although it should not.</li>
+      </ul>
+    </main>
+  </body>
+</html>