testaro 4.6.0 → 4.6.1

package/package.json

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

package/procs/linksByType.js

@@ -1,90 +1,54 @@
 // Returns an object classifying the links in a page by layout.
 exports.linksByType = async page => await page.evaluateHandle(() => {
   // FUNCTION DEFINITIONS START
-  // Returns whether an element has fluid display.
-  const hasFluidDisplay = element => {
-    const display = window.getComputedStyle(element).display;
-    return display.startsWith('inline') || display.startsWith('flex');
-  };
-  // Returns whether an element and its children have fluid display.
-  const isFluid = element => {
-    if (hasFluidDisplay(element)) {
-      return Array.from(element.children).every(child => hasFluidDisplay(child));
-    }
-    else {
-      return false;
-    }
-  };
-  // Returns whether all siblings of an element have fluid display.
-  const hasFluidSiblings = element => {
-    const preSib = element.previousElementSibling;
-    if (preSib) {
-      const postSib = element.nextElementSibling;
-      if (postSib) {
-        return isFluid(preSib) && isFluid(postSib);
-      }
-      else {
-        return isFluid(preSib);
-      }
-    }
-    else {
-      const postSib = element.nextElementSibling;
-      if (postSib) {
-        return isFluid(postSib);
-      }
-      else {
-        return true;
-      }
-    }
-  };
   // Removes spacing characters from a text.
   const despace = text => text.replace(/\s/g, '');
-  // Returns whether an element has text that is less than its nearest nonfluid ancestor’s.
-  const hasAdjacentText = element => {
-    // Recursively returns the first ancestor element with nonfluid display.
-    const blockOf = node => {
-      const parentElement = node.parentElement;
-      if (hasFluidDisplay(parentElement)) {
-        return blockOf(parentElement);
-      }
-      else {
-        return parentElement;
-      }
-    };
-    // Identify the text of the element.
-    const elementText = despace(element.textContent);
-    // Identify the text of its nearest nonfluid ancestor.
-    const blockText = despace(blockOf(element).textContent);
-    // If the element has any text:
-    if (elementText) {
-      // Return whether it is less than its nearest nonfluid ancestor’s.
-      return despace(blockText).length > elementText.length;
+  // Returns whether a list is a list entirely of links.
+  const isLinkList = list => {
+    const listItems = Array.from(list.children);
+    if (listItems.length > 1) {
+      return listItems.length > 1 && listItems.every(item => {
+        if (item.tagName === 'LI') {
+          const {children} = item;
+          if (children.length === 1) {
+            const link = children[0];
+            if (link.tagName === 'A') {
+              const itemText = despace(item.textContent);
+              const linkText = despace(link.textContent);
+              return itemText.length === linkText.length;
+            }
+            else {
+              return false;
+            }
+          }
+          else {
+            return false;
+          }
+        }
+        else {
+          return false;
+        }
+      });
     }
-    // Otherwise, i.e. if the element has no text:
     else {
-      // Return no.
       return false;
     }
   };
   // FUNCTION DEFINITIONS END
-  // Get the links in the page.
-  const links = Array
-  .from(document.body.getElementsByTagName('a'))
-  .filter(element => ! element.hasAttribute('role'));
-  // Initialize an object classifying the links.
-  const linkTypes = {
-    inline: [],
-    block: []
-  };
-  // Populate it.
-  links.forEach(link => {
-    if (isFluid(link) && hasFluidSiblings(link) && hasAdjacentText(link)) {
-      linkTypes.inline.push(link);
-    }
-    else {
-      linkTypes.block.push(link);
+  // Identify the list links in the page.
+  const lists = Array.from(document.body.querySelectorAll('ul, ol'));
+  const listLinks = [];
+  lists.forEach(list => {
+    if (isLinkList(list)) {
+      listLinks.push(... Array.from(list.querySelectorAll('a')));
     }
   });
-  // Return it.
-  return linkTypes;
+  // Identify the adjacent links in the page.
+  const allLinks = Array.from(document.body.querySelectorAll('a'));
+  const adjacentLinks = allLinks.filter(link => ! listLinks.includes(link));
+  // Return the data.
+  return {
+    adjacent: adjacentLinks,
+    list: listLinks
+  };
 });

package/run.js

@@ -36,7 +36,7 @@ const tests = {
   hover: 'hover-caused content additions',
   ibm: 'IBM Accessibility Checker',
   labClash: 'labeling inconsistencies',
-  linkUl: 'inline-link underlining',
+  linkUl: 'adjacent-link underlining',
   menuNav: 'keyboard navigation between focusable menu items',
   motion: 'motion',
   radioSet: 'fieldset grouping of radio buttons',

package/tests/linkUl.js

@@ -1,11 +1,12 @@
 /*
   linkUl
-  This test reports failures to underline inline links. Underlining and color are the
-  traditional style properties that identify links. Collections of links in blocks can be
-  recognized without underlines, but inline links are difficult or impossible to distinguish
-  visually from surrounding text if not underlined. Underlining inline links only on hover
-  provides an indicator valuable only to mouse users, and even they must traverse the text with
-  a mouse merely to discover which passages are links.
+  This test reports failures to underline links that are adjacent to nonlink text. Underlining
+  and color are the traditional style properties that identify links. Lists of links containing
+  only links can be recognized without underlines, but other links are difficult or impossible to
+  distinguish visually from surrounding text if not underlined. Underlining adjacent links only on
+  hover provides an indicator valuable only to mouse users, and even they must traverse the text
+  with a mouse merely to discover which passages are links. This tests treats links as adjacent
+  unless they are in an ordered or unordered list of at least 2 links with no other text.
 */
 exports.reporter = async (page, withItems) => {
   // Identify the links in the page, by type.
@@ -17,14 +18,14 @@ exports.reporter = async (page, withItems) => {
     // Returns a space-minimized copy of a string.
     const compact = string => string.replace(/[\t\n]/g, '').replace(/\s{2,}/g, ' ').trim();
     // FUNCTION DEFINITION END
-    // Identify the inline links.
-    const inLinks = linkTypes.inline;
-    const inLinkCount = inLinks.length;
+    // Identify the adjacent links.
+    const adjacentLinks = linkTypes.adjacent;
+    const adjacentLinkCount = adjacentLinks.length;
     let underlined = 0;
-    const ulInLinkTexts = [];
-    const nulInLinkTexts = [];
+    const ulAdjacentLinkTexts = [];
+    const nulAdjacentLinkTexts = [];
     // For each of them:
-    inLinks.forEach(link => {
+    adjacentLinks.forEach(link => {
       // Identify the text of the link if itemization is required.
       const text = withItems ? compact(link.textContent) : '';
       // If it is underlined:
@@ -33,22 +34,24 @@ exports.reporter = async (page, withItems) => {
         underlined++;
         // If required, add its text to the array of their texts.
         if (withItems) {
-          ulInLinkTexts.push(text);
+          ulAdjacentLinkTexts.push(text);
         }
       }
       // Otherwise, if it is not underlined and itemization is required:
       else if (withItems) {
         // Add its text to the array of texts of non-underlined inline links.
-        nulInLinkTexts.push(text);
+        nulAdjacentLinkTexts.push(text);
       }
     });
     // Get the percentage of underlined links among all inline links.
-    const underlinedPercent = inLinkCount ? Math.floor(100 * underlined / inLinkCount) : 'N/A';
+    const underlinedPercent = adjacentLinkCount
+    ? Math.floor(100 * underlined / adjacentLinkCount)
+    : 'N/A';
     const data = {
       totals: {
-        links: inLinks.length + linkTypes.block.length,
-        inline: {
-          total: inLinkCount,
+        links: adjacentLinks.length + linkTypes.list.length,
+        adjacent: {
+          total: adjacentLinkCount,
           underlined,
           underlinedPercent
         }
@@ -56,8 +59,8 @@ exports.reporter = async (page, withItems) => {
     };
     if (withItems) {
       data.items = {
-        underlined: ulInLinkTexts,
-        notUnderlined: nulInLinkTexts
+        underlined: ulAdjacentLinkTexts,
+        notUnderlined: nulAdjacentLinkTexts
       };
     }
     return {result: data};

package/tests/styleDiff.js

@@ -1,12 +1,12 @@
 /*
   styleDiff
   This test reports style differences among links, buttons, and headings. It assumes
-  that an accessible page employs few or only one style for inline links, and likewise
-  for non-inline links, buttons, and headings at each level. The test considers only
+  that an accessible page employs few or only one style for adjacent links, and likewise
+  for list links, buttons, and headings at each level. The test considers only
   particular style properties, listed in the 'mainStyles' and 'headingStyles' arrays.
 */
 exports.reporter = async (page, withItems) => {
-  // Get an object with arrays of block and inline links as properties.
+  // Get an object with arrays of list and adjacent links as properties.
   const linkTypes = await require('../procs/linksByType').linksByType(page);
   return await page.$eval('body', (body, args) => {
     const withItems = args[0];
@@ -51,8 +51,8 @@ exports.reporter = async (page, withItems) => {
     const elementClasses = {
       headings: {},
       other: {
-        aInline: linkTypes.inline,
-        aBlock: linkTypes.block
+        aAdjacent: linkTypes.adjacent,
+        aList: linkTypes.list
       }
     };
     // For each heading tag name:

package/tests/tabNav.js

@@ -4,70 +4,69 @@
   Standards are based on https://www.w3.org/TR/wai-aria-practices-1.1/#tabpanel.
 */
 
-// CONSTANTS
+// FUNCTIONS
 
-const data = {
-  totals: {
-    navigations: {
-      all: {
-        total: 0,
-        correct: 0,
-        incorrect: 0
-      },
-      specific: {
-        tab: {
-          total: 0,
-          correct: 0,
-          incorrect: 0
-        },
-        left: {
-          total: 0,
-          correct: 0,
-          incorrect: 0
-        },
-        right: {
-          total: 0,
-          correct: 0,
-          incorrect: 0
-        },
-        up: {
-          total: 0,
-          correct: 0,
-          incorrect: 0
-        },
-        down: {
-          total: 0,
-          correct: 0,
-          incorrect: 0
-        },
-        home: {
+// Tests tab-list navigation and reports results.
+exports.reporter = async (page, withItems) => {
+  // Initialize the results.
+  const data = {
+    totals: {
+      navigations: {
+        all: {
           total: 0,
           correct: 0,
           incorrect: 0
         },
-        end: {
-          total: 0,
-          correct: 0,
-          incorrect: 0
+        specific: {
+          tab: {
+            total: 0,
+            correct: 0,
+            incorrect: 0
+          },
+          left: {
+            total: 0,
+            correct: 0,
+            incorrect: 0
+          },
+          right: {
+            total: 0,
+            correct: 0,
+            incorrect: 0
+          },
+          up: {
+            total: 0,
+            correct: 0,
+            incorrect: 0
+          },
+          down: {
+            total: 0,
+            correct: 0,
+            incorrect: 0
+          },
+          home: {
+            total: 0,
+            correct: 0,
+            incorrect: 0
+          },
+          end: {
+            total: 0,
+            correct: 0,
+            incorrect: 0
+          }
         }
+      },
+      tabElements: {
+        total: 0,
+        correct: 0,
+        incorrect: 0
+      },
+      tabLists: {
+        total: 0,
+        correct: 0,
+        incorrect: 0
       }
-    },
-    tabElements: {
-      total: 0,
-      correct: 0,
-      incorrect: 0
-    },
-    tabLists: {
-      total: 0,
-      correct: 0,
-      incorrect: 0
     }
-  }
-};
-
-// FUNCTIONS
-
-exports.reporter = async (page, withItems) => {
+  };
   if (withItems) {
     data.tabElements = {
       incorrect: [],

package/validation/tests/scripts/linkUl.json

@@ -10,52 +10,52 @@
     {
       "type": "url",
       "which": "__targets__/linkUl/good.html",
-      "what": "page with underlined inline links"
+      "what": "page with underlined adjacent links"
     },
     {
       "type": "test",
       "which": "linkUl",
-      "what": "link underlining",
+      "what": "adjacent-link underlining",
       "withItems": false,
       "expect": [
         ["totals.links", "=", 6],
-        ["totals.inline.total", "=", 2],
-        ["totals.inline.underlined", "=", 2],
-        ["totals.inline.underlinedPercent", "=", 100]
+        ["totals.adjacent.total", "=", 2],
+        ["totals.adjacent.underlined", "=", 2],
+        ["totals.adjacent.underlinedPercent", "=", 100]
       ]
     },
     {
       "type": "url",
       "which": "__targets__/linkUl/bad.html",
-      "what": "page without underlined inline links"
+      "what": "page with nonunderlined adjacent links"
     },
     {
       "type": "test",
       "which": "linkUl",
-      "what": "link underlining",
+      "what": "adjacent-link underlining",
       "withItems": false,
       "expect": [
-        ["totals.links", "=", 2],
-        ["totals.inline.total", "=", 2],
-        ["totals.inline.underlined", "=", 0],
-        ["totals.inline.underlinedPercent", "=", 0]
+        ["totals.links", "=", 6],
+        ["totals.adjacent.total", "=", 6],
+        ["totals.adjacent.underlined", "=", 0],
+        ["totals.adjacent.underlinedPercent", "=", 0]
       ]
     },
     {
       "type": "url",
       "which": "__targets__/linkUl/na.html",
-      "what": "page without inline links"
+      "what": "page without adjacent links"
     },
     {
       "type": "test",
       "which": "linkUl",
-      "what": "link underlining",
+      "what": "adjacent-link underlining",
       "withItems": false,
       "expect": [
         ["totals.links", "=", 2],
-        ["totals.inline.total", "=", 0],
-        ["totals.inline.underlined", "=", 0],
-        ["totals.inline.underlinedPercent", "=", "N/A"]
+        ["totals.adjacent.total", "=", 0],
+        ["totals.adjacent.underlined", "=", 0],
+        ["totals.adjacent.underlinedPercent", "=", "N/A"]
       ]
     }
   ]

package/validation/tests/scripts/styleDiff.json

@@ -18,13 +18,13 @@
       "what": "styleDiff",
       "withItems": false,
       "expect": [
-        ["totals.aInline.total", "=", 2],
-        ["totals.aBlock.total", "=", 2],
+        ["totals.aAdjacent.total", "=", 2],
+        ["totals.aList.total", "=", 2],
         ["totals.button.total", "=", 2],
         ["totals.h1.total", "=", 1],
         ["totals.h2.total", "=", 4],
-        ["totals.aInline.subtotals"],
-        ["totals.aBlock.subtotals"],
+        ["totals.aAdjacent.subtotals"],
+        ["totals.aList.subtotals"],
         ["totals.button.subtotals"],
         ["totals.h1.subtotals"],
         ["totals.h2.subtotals"]
@@ -41,15 +41,15 @@
       "what": "styleDiff",
       "withItems": false,
       "expect": [
-        ["totals.aInline.total", "=", 2],
-        ["totals.aBlock.total", "=", 2],
+        ["totals.aAdjacent.total", "=", 2],
+        ["totals.aList.total", "=", 2],
         ["totals.button.total", "=", 2],
         ["totals.h1.total", "=", 1],
         ["totals.h2.total", "=", 4],
-        ["totals.aInline.subtotals.0", "=", 1],
-        ["totals.aInline.subtotals.1", "=", 1],
-        ["totals.aBlock.subtotals.0", "=", 1],
-        ["totals.aBlock.subtotals.1", "=", 1],
+        ["totals.aAdjacent.subtotals.0", "=", 1],
+        ["totals.aAdjacent.subtotals.1", "=", 1],
+        ["totals.aList.subtotals.0", "=", 1],
+        ["totals.aList.subtotals.1", "=", 1],
         ["totals.button.subtotals.0", "=", 1],
         ["totals.button.subtotals.1", "=", 1],
         ["totals.h1.subtotals"],

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

@@ -2,15 +2,34 @@
 <html lang="en-US">
   <head>
     <meta charset="utf-8">
-    <title>Page without underlined inline links</title>
+    <title>Page without underlined adjacent links</title>
     <meta name="description" content="tester">
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <style>
+      .nude > li > a {
+        text-decoration: none;
+      }
+    </style>
   </head>
   <body>
     <main>
-      <h1>Page without underlined inline links</h1>
-      <p>This paragraph contains an inline link to <a style="text-decoration: overline" href="https://en.wikipedia.org">English information</a> that has an overline instead of an underline.</p>
-      <p>This paragraph contains an inline link to <a style="text-decoration: none" href="https://fr.wikipedia.org">French information</a> without any underline.</p>
+      <h1>Page without underlined adjacent links</h1>
+      <p>This paragraph contains an adjacent link to <a style="text-decoration: overline" href="https://en.wikipedia.org">English information</a> that has an overline instead of an underline.</p>
+      <p>This paragraph contains an adjacent link to <a style="text-decoration: none" href="https://fr.wikipedia.org">French information</a> without any underline.</p>
+      <p>This paragraph introduces a list of nonunderlined links, but it contains only 1 link, so that link fails to be classified as a list link.</p>
+      <ul class="nude"</ul>
+        <li><a href="https://eus.wikipedia.org">Basque information</a></li>
+      </ul>
+      <p>This paragraph introduces a list of nonunderlined links, but it contains an item that is not a link, so its link fails to be classified as a list link.</p>
+      <ul class="nude">
+        <li><span>Spanish information is not available</span></li>
+        <li><a href="https://eo.wikipedia.org">Esperanto information</a></li>
+      </ul>
+      <p>This paragraph introduces a list of nonunderlined links, but it contains additional text, so its links fail to be classified as a list link.</p>
+      <ul class="nude">
+        <li><a href="https://fr.wikipedia.org">French information</a> is available, as well as</li>
+        <li><a href="https://tr.wikipedia.org">Turkish information</a></li>
+      </ul>
     </main>
   </body>
 </html>

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

@@ -2,7 +2,7 @@
 <html lang="en-US">
   <head>
     <meta charset="utf-8">
-    <title>Page with underlined inline links</title>
+    <title>Page with underlined adjacent links</title>
     <meta name="description" content="tester">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <style>
@@ -13,14 +13,14 @@
   </head>
   <body>
     <main>
-      <h1>Page with underlined inline links</h1>
-      <p>This page contains inline links to <a href="https://en.wikipedia.org">English information</a> and <a style="text-decoration: underline wavy 2px" href="https://fr.wikipedia.org">French information</a>. The latter is weird, but still an underline.</p>
-      <p>The following links, however, are not inline, so can be (and are) devoid of underlines.</p>
+      <h1>Page with underlined adjacent links</h1>
+      <p>This page contains adjacent links to <a href="https://en.wikipedia.org">English information</a> and <a style="text-decoration: underline wavy 2px" href="https://fr.wikipedia.org">French information</a>. The latter is weird, but still an underline.</p>
+      <p>The following links, however, are not adjacent, so can be (and are) devoid of underlines.</p>
       <ul class="nude">
         <li><a href="https://sp.wikipedia.org">Spanish information</a></li>
         <li><a href="https://eo.wikipedia.org">Esperanto information</a></li>
       </ul>
-      <p>The following links are not inline, so can be devoid of underlines, but still have them.</p>
+      <p>The following links are not adjacent, so are permitted to be devoid of underlines, but still have them.</p>
       <ul>
         <li><a href="https://eus.wikipedia.org">Basque information</a></li>
         <li><a href="https://tr.wikipedia.org">Turkish information</a></li>

package/validation/tests/targets/linkUl/na.html

@@ -8,9 +8,9 @@
   </head>
   <body>
     <main>
-      <h1>Page without inline links</h1>
-      <p>This page contains no inline links.</p>
-      <p>The following links are not inline.</p>
+      <h1>Page without adjacent links</h1>
+      <p>This page contains list links but no adjacent links.</p>
+      <p>The following links are list links.</p>
       <ul>
         <li><a href="https://eus.wikipedia.org">Basque information</a></li>
         <li><a href="https://tr.wikipedia.org">Turkish information</a></li>