testaro 4.7.2 → 4.10.0

package/package.json

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

package/tests/labClash.js

@@ -71,33 +71,32 @@ exports.reporter = async (page, withItems) => {
           }
         }
       }
-      // Content label if details required.
-      if (withItems) {
-        // Of button.
-        if (labelee.tagName === 'BUTTON') {
-          const content = debloat(labelee.textContent);
-          if (content) {
-            texts.content = content;
-          }
+      // Content label.
+      // Of button.
+      if (labelee.tagName === 'BUTTON') {
+        const content = debloat(labelee.textContent);
+        if (content) {
+          texts.content = content;
         }
-        // Of submit input.
-        else if (labelee.tagName === 'INPUT' && labelee.type === 'submit' && labelee.value) {
-          const content = debloat(labelee.value);
-          if (content) {
-            texts.content = content;
-          }
+      }
+      // Of submit input.
+      else if (labelee.tagName === 'INPUT' && labelee.type === 'submit' && labelee.value) {
+        const content = debloat(labelee.value);
+        if (content) {
+          texts.content = content;
+        }
+      }
+      // Of image input.
+      else if (labelee.tagName === 'INPUT' && labelee.type === 'image' && labelee.alt) {
+        const content = debloat(labelee.alt);
+        if (content) {
+          texts.content = content;
         }
       }
       const {totals} = data;
       const labelTypeCount = labelTypes.length;
       // If it is well labeled:
-      if (
-        labelTypeCount === 1
-        || ! labelTypeCount && (
-          labelee.tagName === 'BUTTON' && debloat(labelee.textContent).length
-          || labelee.tagName === 'INPUT' && labelee.type === 'submit' && labelee.value
-        )
-      ) {
+      if (labelTypeCount === 1 || (texts.content && ! labelTypeCount)) {
         // Increment the count of well-labeled items in the report.
         totals.wellLabeled++;
         // Add data on the item to the report, if required.

package/tests/role.js

@@ -22,8 +22,6 @@ exports.reporter = async page => await page.$eval('body', body => {
     'complementary',
     'contentinfo',
     'definition',
-    'dialog',
-    'document',
     'figure',
     'graphics-document',
     'gridcell',
@@ -38,7 +36,6 @@ exports.reporter = async page => await page.$eval('body', body => {
     'option',
     'progressbar',
     'radio',
-    'region',
     'row',
     'rowgroup',
     'rowheader',

package/tests/styleDiff.js

@@ -6,145 +6,148 @@
   particular style properties, listed in the 'mainStyles' and 'headingStyles' arrays.
 */
 exports.reporter = async (page, withItems) => {
-  // Get an object with arrays of list and adjacent links as properties.
+  // Get an object with arrays of list links and adjacent links as properties.
   const linkTypes = await require('../procs/linksByType').linksByType(page);
   return await page.$eval('body', (body, args) => {
-    const withItems = args[0];
-    const linkTypes = args[1];
+    const linkTypes = args[0];
+    const withItems = args[1];
     // Identify the settable style properties to be compared for all tag names.
     const mainStyles = [
-      'borderStyle',
-      'borderWidth',
       'fontStyle',
       'fontWeight',
+      'opacity',
+      'textDecorationLine',
+      'textDecorationStyle',
+      'textDecorationThickness'
+    ];
+    // Identify those only for buttons.
+    const buttonStyles = [
+      'borderStyle',
+      'borderWidth',
+      'height',
       'lineHeight',
       'maxHeight',
       'maxWidth',
       'minHeight',
       'minWidth',
-      'opacity',
       'outlineOffset',
       'outlineStyle',
-      'outlineWidth',
-      'textDecorationLine',
-      'textDecorationStyle',
-      'textDecorationThickness'
+      'outlineWidth'
     ];
     // Identify those for headings.
     const headingStyles = [
+      'color',
       'fontSize'
     ];
+    // Identify those for list links.
+    const listLinkStyles = [
+      'color',
+      'fontSize',
+      'lineHeight'
+    ];
     // Initialize the data to be returned.
     const data = {
       mainStyles,
+      buttonStyles,
       headingStyles,
+      listLinkStyles,
       totals: {}
     };
     if (withItems) {
       data.items = {};
     }
-    // Identify the heading tag names to be analyzed.
-    const headingNames = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
-    // Identify the other nonlink tag names to be analyzed.
-    const otherNames = ['button'];
-    // Initialize an object of elements to be analyzed.
-    const elementClasses = {
-      headings: {},
-      other: {
-        aAdjacent: linkTypes.adjacent,
-        aList: linkTypes.list
+    // Initialize an object of elements to be analyzed, including links.
+    const elements = {
+      buttons: [],
+      headings: {
+        h1: [],
+        h2: [],
+        h3: [],
+        h4: [],
+        h5: [],
+        h6: []
+      },
+      links: {
+        adjacent: linkTypes.adjacent,
+        list: linkTypes.list
       }
     };
+    // Identify the heading tag names to be analyzed.
+    const headingNames = Object.keys(elements.headings);
+    // Add the buttons to the object.
+    elements.buttons = Array.from(body.querySelectorAll('button, input[type=button]'));
     // For each heading tag name:
     headingNames.forEach(tagName => {
       // Add its elements to the object.
-      elementClasses.headings[tagName] = Array.from(body.getElementsByTagName(tagName));
-    });
-    // For each other tag name:
-    otherNames.forEach(tagName => {
-      // Add its elements to the object.
-      elementClasses.other[tagName] = Array.from(body.getElementsByTagName(tagName));
+      elements.headings[tagName] = Array.from(body.getElementsByTagName(tagName));
     });
-    // For each element superclass:
-    ['headings', 'other'].forEach(superClass => {
-      // For each class in the superclass:
-      Object.keys(elementClasses[superClass]).forEach(tagName => {
-        const elements = elementClasses[superClass][tagName];
-        const elementCount = elements.length;
-        // If there are any:
-        if (elementCount) {
-          const styleProps = {};
-          const styleTexts = {};
+    // Tabulates the distribution of style properties for elements of a type.
+    const tallyStyles = (typeName, elements, typeStyles, withItems) => {
+      // If there are any elements:
+      const elementCount = elements.length;
+      if (elementCount) {
+        const styleProps = {};
+        const styleTexts = {};
+        // For each element:
+        elements.forEach(element => {
+          // Get its values on the style properties to be compared.
+          const styleDec = window.getComputedStyle(element);
+          const style = {};
+          const styles = mainStyles.concat(typeStyles);
+          styles.forEach(styleName => {
+            style[styleName] = styleDec[styleName];
+          });
+          // Get a text representation of the style, limited to those properties.
+          const styleText = JSON.stringify(style);
+          // Increment the total of elements with that style.
+          styleTexts[styleText] = ++styleTexts[styleText] || 1;
+          // If details are to be reported:
           if (withItems) {
-            if (! data.items[tagName]) {
-              data.items[tagName] = {};
-            }
-          }
-          // For each of them:
-          elements.forEach(element => {
-            // Get its values on the style properties to be compared.
-            const styleDec = window.getComputedStyle(element);
-            const style = {};
-            // Identify the styles to be compared.
-            const styles = mainStyles;
-            if (superClass === 'headings') {
-              styles.push(...headingStyles);
+            // Add the element’s values and text to the style details.
+            if (! styleProps[typeName]) {
+              styleProps[typeName] = {};
             }
+            const elementText = element.textContent.trim().replace(/\s/g, ' ');
+            // For each style property being compared:
             styles.forEach(styleName => {
-              style[styleName] = styleDec[styleName];
+              if (! styleProps[typeName][styleName]) {
+                styleProps[typeName][styleName] = {};
+              }
+              if (! styleProps[typeName][styleName][style[styleName]]) {
+                styleProps[typeName][styleName][style[styleName]] = [];
+              }
+              styleProps[typeName][styleName][style[styleName]].push(elementText);
             });
-            // Get a text representation of the style.
-            const styleText = JSON.stringify(style);
-            // Increment the total of elements with that style declaration.
-            styleTexts[styleText] = ++styleTexts[styleText] || 1;
-            // If details are required:
-            if (withItems) {
-              // For each style property:
-              styles.forEach(styleName => {
-                const styleValue = style[styleName];
-                // Increment the total of elements with the same value on it as the element.
-                if (styleProps[styleName]) {
-                  styleProps[styleName][styleValue] = ++styleProps[styleName][styleValue] || 1;
-                }
-                else {
-                  styleProps[styleName] = {[styleValue]: 1};
-                }
-              });
-            }
-          });
-          // Add the total to the result.
-          data.totals[tagName] = {total: elementCount};
-          const styleCounts = Object.values(styleTexts);
-          // If the elements in the element class differ in style:
-          if (styleCounts.length > 1) {
-            // Add the distribution of its style counts to the result.
-            data.totals[tagName].subtotals = styleCounts.sort((a, b) => b - a);
           }
-          // If details are required:
+        });
+        // Add the total to the result.
+        data.totals[typeName] = {total: elementCount};
+        const styleCounts = Object.values(styleTexts);
+        // If the elements of the type differ in style:
+        if (styleCounts.length > 1) {
+          // Add the distribution of its style counts to the result.
+          data.totals[typeName].subtotals = styleCounts.sort((a, b) => b - a);
+          // If details are to be reported:
           if (withItems) {
-            // For each style property:
-            Object.keys(styleProps).forEach(styleProp => {
-              // Ignore it if all the elements have the same value.
-              if (Object.keys(styleProps[styleProp]).length === 1) {
-                delete styleProps[styleProp];
-              }
-              // Otherwise:
-              else {
-                if (! data.items[tagName][styleProp]) {
-                  data.items[tagName][styleProp] = {};
-                }
-                // Sort the values in order of decreasing count.
-                const sortedEntries = Object.entries(styleProps[styleProp]).sort((a, b) => b[1] - a[1]);
-                sortedEntries.forEach(entry => {
-                  const propData = data.items[tagName][styleProp];
-                  propData[entry[0]] = (propData[entry[0]] || 0) + entry[1];
-                });
+            // Delete the data on uniform style properties.
+            Object.keys(styleProps[typeName]).forEach(styleName => {
+              if (Object.keys(styleProps[typeName][styleName]).length === 1) {
+                delete styleProps[typeName][styleName];
               }
             });
+            // Add the element values and texts to the result.
+            data.items[typeName] = styleProps[typeName];
           }
         }
-      });
+      }
+    };
+    // Report the style-property distributions for the element types.
+    tallyStyles('button', elements.buttons, buttonStyles, withItems);
+    tallyStyles('adjacentLink', elements.links.adjacent, [], withItems);
+    tallyStyles('listLink', elements.links.list, listLinkStyles, withItems);
+    headingNames.forEach(headingName => {
+      tallyStyles(headingName, elements.headings[headingName], headingStyles, withItems);
     });
     return {result: data};
-  }, [withItems, linkTypes]);
+  }, [linkTypes, withItems]);
 };

package/validation/executors/styleDiff.js

@@ -0,0 +1,62 @@
+// app.js
+// Validator for Testaro tests.
+
+const fs = require('fs').promises;
+const {handleRequest} = require(`${__dirname}/../../run`);
+const validateTests = async () => {
+  const totals = {
+    attempts: 0,
+    successes: 0
+  };
+  const scriptFileNames = await fs.readdir(`${__dirname}/../tests/scripts`);
+  for (const scriptFileName of scriptFileNames.filter(fileName => fileName === 'styleDiff.json')) {
+    const rawScriptJSON = await fs
+    .readFile(`${__dirname}/../tests/scripts/${scriptFileName}`, 'utf8');
+    const scriptJSON = rawScriptJSON
+    .replace(/__targets__/g, `file://${__dirname}/../tests/targets`);
+    const script = JSON.parse(scriptJSON);
+    const report = {script};
+    report.log = [];
+    report.acts = [];
+    await handleRequest(report);
+    const {log, acts} = report;
+    if (log.length === 2 && log[1].event === 'endTime' && /^\d{4}-.+$/.test(log[1].value)) {
+      console.log('Success: Log has been correctly populated');
+    }
+    else {
+      console.log('Failure: Log empty or invalid');
+      console.log(JSON.stringify(log, null, 2));
+    }
+    if (
+      acts.length === script.commands.length
+      && acts.every(
+        act => act.type && act.type === 'test'
+          ? act.result && act.result.failureCount !== undefined
+          : true
+      )
+    ) {
+      totals.attempts++;
+      totals.successes++;
+      console.log('Success: Reports have been correctly populated');
+      if (acts.every(
+        act => act.type === 'test' ? act.result.failureCount === 0 : true
+      )) {
+        totals.attempts++;
+        totals.successes++;
+        console.log('Success: No failures');
+      }
+      else {
+        totals.attempts++;
+        console.log('Failure: At least one test has at least one failure');
+        console.log(JSON.stringify(acts, null, 2));
+      }
+    }
+    else {
+      totals.attempts++;
+      console.log('Failure: Reports empty or invalid');
+      console.log(JSON.stringify(acts, null, 2));
+    }
+  }
+  console.log(`Grand totals: attempts ${totals.attempts}, successes ${totals.successes}`);
+};
+validateTests();

package/validation/tests/scripts/labClash.json

@@ -20,7 +20,7 @@
       "expect": [
         ["totals.mislabeled", "=", 0],
         ["totals.unlabeled", "=", 0],
-        ["totals.wellLabeled", "=", 6]
+        ["totals.wellLabeled", "=", 7]
       ]
     },
     {
@@ -35,7 +35,7 @@
       "withItems": false,
       "expect": [
         ["totals.mislabeled", "=", 3],
-        ["totals.unlabeled", "=", 2],
+        ["totals.unlabeled", "=", 3],
         ["totals.wellLabeled", "=", 0]
       ]
     }

package/validation/tests/scripts/styleDiff.json

@@ -15,16 +15,16 @@
     {
       "type": "test",
       "which": "styleDiff",
+      "withItems": true,
       "what": "styleDiff",
-      "withItems": false,
       "expect": [
-        ["totals.aAdjacent.total", "=", 2],
-        ["totals.aList.total", "=", 2],
+        ["totals.adjacentLink.total", "=", 2],
+        ["totals.listLink.total", "=", 2],
         ["totals.button.total", "=", 2],
         ["totals.h1.total", "=", 1],
         ["totals.h2.total", "=", 4],
-        ["totals.aAdjacent.subtotals"],
-        ["totals.aList.subtotals"],
+        ["totals.adjacentLink.subtotals"],
+        ["totals.listLink.subtotals"],
         ["totals.button.subtotals"],
         ["totals.h1.subtotals"],
         ["totals.h2.subtotals"]
@@ -38,23 +38,24 @@
     {
       "type": "test",
       "which": "styleDiff",
+      "withItems": true,
       "what": "styleDiff",
-      "withItems": false,
       "expect": [
-        ["totals.aAdjacent.total", "=", 2],
-        ["totals.aList.total", "=", 2],
+        ["totals.adjacentLink.total", "=", 2],
+        ["totals.listLink.total", "=", 2],
         ["totals.button.total", "=", 2],
         ["totals.h1.total", "=", 1],
         ["totals.h2.total", "=", 4],
-        ["totals.aAdjacent.subtotals.0", "=", 1],
-        ["totals.aAdjacent.subtotals.1", "=", 1],
-        ["totals.aList.subtotals.0", "=", 1],
-        ["totals.aList.subtotals.1", "=", 1],
+        ["totals.adjacentLink.subtotals.0", "=", 1],
+        ["totals.adjacentLink.subtotals.1", "=", 1],
+        ["totals.listLink.subtotals.0", "=", 1],
+        ["totals.listLink.subtotals.1", "=", 1],
         ["totals.button.subtotals.0", "=", 1],
         ["totals.button.subtotals.1", "=", 1],
         ["totals.h1.subtotals"],
         ["totals.h2.subtotals.0", "=", 3],
-        ["totals.h2.subtotals.1", "=", 1]
+        ["totals.h2.subtotals.1", "=", 1],
+        ["items.adjacentLink.textDecorationStyle.double.0", "=", "French information"]
       ]
     }
   ]

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

@@ -12,6 +12,10 @@
       <p>This paragraph contains an empty <button type="button" aria-label></button> button, with no accessible name.</p>
       <p>This is another <button id="labButton" type="button" aria-labelledby="buttonLabel">button</button> with its text content overridden by both an explicit label and a reference label as a <label id="buttonLabel" for="labButton">special type of button</label>.</p>
       <p>This is an implicitly and attribute-labeled <label>checkbox input <input id="cbox" type="checkbox" aria-label="a checkbox-type input"></label>.</p>
+      <p style="display: flex; align-items: center;">
+        <span>Here is an image input without a text alternative:</span>
+        <input type="image" src="delete.png" width="30rem">
+      </p>
       <p><span id="textInputLabel">Who is your favorite actor?</span> <input type="text" aria-labelledby="textInputLabel" aria-label="your favorite actor">.</p>
       <p>What do you think? Enter your thoughts into this text area, which is unlabeled.</p>
       <p><textarea aria-label></textarea></p>

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

@@ -10,6 +10,10 @@
     <main>
       <h1>Page with standard labeling</h1>
       <p>This paragraph contains a <button type="button">button</button> with its text content as accessible name, another <button id="labButton" type="button">button</button> with its text content overridden by an explicit label as a <label for="labButton">special type of button</label>, an <label>implicitly labeled text input <input type="text"></label>, and an explicitly labeled <label for="cbox">checkbox input</label>: <input id="cbox" type="checkbox">.</p>
+      <p style="display: flex; align-items: center;">
+        <span>Here is an image input with a text alternative:</span>
+        <input type="image" src="delete.png" alt="delete" width="30rem">
+      </p>
       <p>This <label>implicitly labeled text input <input id="textInput" type="text"></label> also has an explicit label, which validly provides <label for="textInput">additional information</label>.</p>
       <p><span id="what">What do you think?</span> Enter your thoughts into this text area, which is labeled by reference.</p>
       <p><textarea aria-labelledby="what"></textarea></p>

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

@@ -19,7 +19,7 @@
       </section>
       <section>
         <h2>Conflict</h2>
-        <p>The parent section of these sections has an unnecessary explicit role.</p>
+        <p>The parent section of these sections has an unnecessary explicit role, instead of an element with the same implicit role.</p>
       </section>
     </section>
   </body>

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

@@ -19,17 +19,17 @@
     <main>
       <h1>Page with inconsistent styles</h1>
       <h2>Inline links</h2>
-      <p>This paragraph contains inline links to <a href="https://en.wikipedia.org">English information</a> and <a style="text-decoration: underline; text-decoration-style: double" href="https://fr.wikipedia.org">French information</a>. They have different styles.</p>
+      <p>This paragraph contains adjacent links to <a href="https://en.wikipedia.org">English information</a> and <a style="text-decoration-style: double" href="https://fr.wikipedia.org">French information</a>. They have different styles.</p>
       <h2>Block links</h2>
-      <p>The following links are not inline. They have a different styles.</p>
+      <p>The following links are list links. They have different styles.</p>
       <ul>
         <li><a style="font-weight: 700" href="https://sp.wikipedia.org">Spanish information</a></li>
         <li><a href="https://eo.wikipedia.org">Esperanto information</a></li>
       </ul>
       <h2>Buttons</h2>
-      <p>This paragraph contains two buttons with a different custom styles. <button type="button">Wikipedia</button> <button type="button" style="border-width: 3px">Wiktionary</button></p>
+      <p>This paragraph contains two buttons with different custom styles. <button type="button">Wikipedia</button> <button type="button" style="border-width: 3px">Wiktionary</button></p>
       <h2 class="italic">Headings</h2>
-      <p>This page contains 4 <code>h2</code> headings. This one has a deviant style.</p>
+      <p>This page contains 4 <code>h2</code> headings. This last one has a deviant style.</p>
     </main>
   </body>
 </html>

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

@@ -20,9 +20,9 @@
     <main>
       <h1>Page with consistent styles</h1>
       <h2>Inline links</h2>
-      <p>This paragraph contains inline links to <a href="https://en.wikipedia.org">English information</a> and <a href="https://fr.wikipedia.org">French information</a>. They both have a default style.</p>
+      <p>This paragraph contains adjacent links to <a href="https://en.wikipedia.org">English information</a> and <a href="https://fr.wikipedia.org">French information</a>. They both have a default style.</p>
       <h2>Block links</h2>
-      <p>The following links are not inline. They have a uniform custom underline.</p>
+      <p>The following links are list links. They have a uniform custom underline.</p>
       <ul class="dotted">
         <li><a href="https://sp.wikipedia.org">Spanish information</a></li>
         <li><a href="https://eo.wikipedia.org">Esperanto information</a></li>