testaro 14.2.6 → 14.4.0

package/testaro/autocomplete.js

@@ -20,7 +20,7 @@ const addFailure = async (withItems, input, inputText, autocomplete, data) => {
     // If itemization is required:
     if (withItems) {
       // Add the item to the data.
-      data.items.push([autocomplete, inputText.slice(0, 100)]);
+      data.items.push([autocomplete, input.id || '', inputText.slice(0, 100)]);
     }
   }
 };
@@ -77,12 +77,14 @@ exports.reporter = async (page, withItems) => {
         issueID: `autocomplete-${item[0]}`,
         what: `Input is missing the required autocomplete attribute with value ${item[0]}`,
         ordinalSeverity: 2,
+        tagName: 'INPUT',
+        id: item[1] || '',
         location: {
           doc: '',
           type: '',
           spec: ''
         },
-        excerpt: item[1]
+        excerpt: item[2]
       });
     });
   }
@@ -91,6 +93,8 @@ exports.reporter = async (page, withItems) => {
       issueID: 'autocomplete',
       what: 'Inputs are missing required autocomplete attributes',
       ordinalSeverity: 2,
+      tagName: '',
+      id: '',
       location: {
         doc: '',
         type: '',

package/testaro/bulk.js

@@ -18,13 +18,17 @@ exports.reporter = async page => {
   });
   const visibleElements = await page.$$('body :visible');
   data.visibleElements = visibleElements.length;
+  const count = Math.round(data.visibleElements / 400);
   return {
     data,
-    totals: [Math.round(data.visibleElements / 400), 0, 0, 0],
+    totals: [count, 0, 0, 0],
     standardInstances: data.visibleElements < 200 ? [] : [{
       issueID: 'bulk',
       what: 'Page contains a large number of visible elements',
+      count,
       ordinalSeverity: 0,
+      tagName: 'HTML',
+      id: '',
       location: {
         doc: '',
         type: '',

package/testaro/docType.js

@@ -17,6 +17,8 @@ exports.reporter = async page => {
       issueID: 'docType',
       what: 'Document has no standard HTML doctype preamble',
       ordinalSeverity: 3,
+      tagName: 'HTML',
+      id: '',
       location: {
         doc: '',
         type: '',

package/testaro/dupAtt.js

@@ -53,11 +53,12 @@ exports.reporter = async (page, withItems) => {
   // Extract the opening tags of its elements.
   let elements = rawPage.match(/<[a-zA-Z][^<>]+>/g);
   // Delete their enclosing angle brackets and the values of any attributes in them.
-  elements = elements.map(el => el.replace(/^< *|=[^ ]*| *>$/g, ''));
+  const elementsWithVals = elements.map(el => el.replace(/^< *| *>$/g, ''));
+  const elementsWithoutVals = elementsWithVals.map(el => el.replace(/^ *|=[^ ]*$/g, ''));
   // For each element:
-  elements.forEach(element => {
+  elementsWithoutVals.forEach((elementWithoutVals, index) => {
     // Identify its tag name and attributes.
-    const terms = element.split(' ');
+    const terms = elementWithoutVals.split(' ');
     // If it has 2 or more attributes:
     if (terms.length > 2) {
       // If any is duplicated:
@@ -65,11 +66,14 @@ exports.reporter = async (page, withItems) => {
       const attributes = terms.slice(1);
       const attSet = new Set(attributes);
       if (attSet.size < attributes.length) {
-        // Add this to the data.
+        // Add it to the data.
         data.total++;
         if (withItems) {
           data.items.push({
             tagName,
+            id: terms.includes('id')
+              ? elementsWithVals[index].replace(/^.+id=/, '').replace(/ .*$/, '')
+              : '',
             attributes
           });
         }
@@ -83,6 +87,8 @@ exports.reporter = async (page, withItems) => {
         issueID: 'dupAtt',
         what: `Element ${item.tagName} has 2 attributes with the same name`,
         ordinalSeverity: 2,
+        tagName: item.tagName,
+        id: item.id,
         location: {
           doc: '',
           type: '',

package/testaro/embAc.js

@@ -32,6 +32,7 @@ exports.reporter = async (page, withItems) => await page.$$eval(
         }
         items.push({
           embeddedElement: bad.tagName,
+          embeddedID: bad.id,
           excerpt: compact(container.outerHTML)
         });
       }
@@ -45,8 +46,10 @@ exports.reporter = async (page, withItems) => await page.$$eval(
       items.forEach(item => {
         standardInstances.push({
           issueID: `embAc-${item.embeddedElement}`,
-          what: `Element ${item.embeddedElement} is embedded in a link or button`,
+          what: `${item.embeddedElement} element is embedded in a link or button`,
           ordinalSeverity: 2,
+          tagName: item.embeddedElement,
+          id: item.id,
           location: {
             doc: '',
             type: '',
@@ -60,7 +63,10 @@ exports.reporter = async (page, withItems) => await page.$$eval(
       standardInstances.push({
         issueID: 'embAc',
         what: 'Interactive elements are contained by links or buttons',
+        count: total,
         ordinalSeverity: 2,
+        tagName: '',
+        id: '',
         location: {
           doc: '',
           type: '',

package/testaro/filter.js

@@ -40,6 +40,7 @@ exports.reporter = async (page, withItems) => {
       filterData.forEach(filterDatum => {
         data.items.push({
           tagName: filterDatum.element.tagName,
+          id: filterDatum.element.id,
           text: compact(filterDatum.element.textContent) || compact(filterDatum.element.outerHTML),
           impact: filterDatum.impact
         });
@@ -53,8 +54,10 @@ exports.reporter = async (page, withItems) => {
     data.items.forEach(item => {
       standardInstances.push({
         issueID: 'filterStyle',
-        what: `Element ${item.tagName} has a filter style that impacts ${item.impact} elements`,
+        what: `${item.tagName} element has a filter style that impacts ${item.impact} elements`,
         ordinalSeverity: 2,
+        tagName: item.toUpperCase(),
+        id: item.id,
         location: {
           doc: '',
           type: '',
@@ -69,6 +72,8 @@ exports.reporter = async (page, withItems) => {
       issueID: 'filterStyle',
       what: 'Elements have filter styles impacting other elements',
       ordinalSeverity: 2,
+      tagName: '',
+      id: '',
       location: {
         doc: '',
         type: '',

package/testaro/focAll.js

@@ -67,7 +67,10 @@ exports.reporter = async page => {
     standardInstances: data.discrepancy ? [{
       issueID: 'focAll',
       what: 'Some focusable elements are not Tab-focusable or vice versa',
+      count: Math.abs(data.discrepancy),
       ordinalSeverity: 2,
+      tagName: '',
+      id: '',
       location: {
         doc: '',
         type: '',

package/testaro/focInd.js

@@ -67,6 +67,7 @@ exports.reporter = async (page, withItems, revealAll = false, allowedDelay = 250
       if (withItems) {
         const elementData = {
           tagName,
+          id: element.id,
           text: (element.textContent.trim() || element.outerHTML.trim()).replace(/\s+/g, ' ')
           .slice(0, 100)
         };
@@ -174,8 +175,10 @@ exports.reporter = async (page, withItems, revealAll = false, allowedDelay = 250
         const qualifier = issueName === 'nonOutlinePresent' ? 'a non-outline' : 'no';
         standardInstances.push({
           issueID: `focInd-${issueName}`,
-          what: `Element ${item.tagName} has ${qualifier} focus indicator`,
+          what: `${item.tagName} element has ${qualifier} focus indicator`,
           ordinalSeverity: issueName === 'nonOutlinePresent' ? 2 : 3,
+          tagName: item.tagName,
+          id: item.id,
           location: {
             doc: '',
             type: '',
@@ -186,18 +189,39 @@ exports.reporter = async (page, withItems, revealAll = false, allowedDelay = 250
       });
     });
   }
-  else if (types.nonOutlinePresent.total || types.indicatorMissing.total) {
-    standardInstances.push({
-      issueID: 'focInd',
-      what: 'Elements have missing or non-outline focus indicators',
-      ordinalSeverity: types.indicatorMissing.total ? 3 : 2,
-      location: {
-        doc: '',
-        type: '',
-        spec: ''
-      },
-      excerpt: ''
-    });
+  else {
+    if (types.indicatorMissing.total) {
+      standardInstances.push({
+        issueID: 'focInd-missing',
+        what: 'Elements have missing focus indicators',
+        count: types.indicatorMissing.total,
+        ordinalSeverity: 3,
+        tagName: '',
+        id: '',
+        location: {
+          doc: '',
+          type: '',
+          spec: ''
+        },
+        excerpt: ''
+      });
+    }
+    if (types.nonOutlinePresent.total) {
+      standardInstances.push({
+        issueID: 'focInd-nonoutline',
+        what: 'Elements have non-outline focus indicators',
+        count: types.nonOutlinePresent.total,
+        ordinalSeverity: 2,
+        tagName: '',
+        id: '',
+        location: {
+          doc: '',
+          type: '',
+          spec: ''
+        },
+        excerpt: ''
+      });
+    }
   }
   // Reload the page.
   try {

package/testaro/focOp.js

@@ -158,12 +158,12 @@ exports.reporter = async (page, withItems) => {
         : 'is operable but not focusable';
       const ordinalSeverity = issue === 'onlyFocusable' ? 2 : 3;
       data.items[issue].forEach(item => {
-        const itemID = item.id ? ` (ID ${item.id})` : '';
-        const which = `${item.tagName}${itemID}`;
         standardInstances.push({
           issueID,
-          what: `Element ${which} ${gripe}`,
+          what: `${item.tagName} element ${gripe}`,
           ordinalSeverity,
+          tagName: item.tagName,
+          id: item.id,
           location: {
             doc: '',
             type: '',
@@ -174,18 +174,39 @@ exports.reporter = async (page, withItems) => {
       });
     });
   }
-  else if (totals[2] || totals[3]) {
-    standardInstances.push({
-      issueID: 'focOp',
-      what: 'Focusable elements are inoperable or vice versa',
-      ordinalSeverity: totals[3] ? 3 : 2,
-      location: {
-        doc: '',
-        type: '',
-        spec: ''
-      },
-      excerpt: ''
-    });
+  else {
+    if (totals[2]) {
+      standardInstances.push({
+        issueID: 'focOp-onlyFocusable',
+        what: 'Focusable elements are inoperable',
+        count: totals[2],
+        ordinalSeverity: 2,
+        tagName: '',
+        id: '',
+        location: {
+          doc: '',
+          type: '',
+          spec: ''
+        },
+        excerpt: ''
+      });
+    }
+    if (totals[3]) {
+      standardInstances.push({
+        issueID: 'focOp-onlyOperable',
+        what: 'Operable elements are nonfocusable',
+        count: totals[3],
+        ordinalSeverity: 3,
+        tagName: '',
+        id: '',
+        location: {
+          doc: '',
+          type: '',
+          spec: ''
+        },
+        excerpt: ''
+      });
+    }
   }
   // Reload the page.
   try {

package/testaro/focVis.js

@@ -14,7 +14,10 @@ exports.reporter = async (page, withItems) => {
     links.forEach(link => {
       link.focus();
       if (link.offsetTop + link.offsetHeight <= 0 || link.offsetLeft + link.offsetWidth <= 0) {
-        badLinks.push(compact(link.textContent));
+        badLinks.push({
+          id: link.id,
+          text: compact(link.textContent)
+        });
       }
     });
     return badLinks;
@@ -33,12 +36,14 @@ exports.reporter = async (page, withItems) => {
         issueID: 'focVis',
         what: 'Visible link is above or to the left of the display',
         ordinalSeverity: 2,
+        tagName: 'A',
+        id: item.id,
         location: {
           doc: '',
           type: '',
           spec: ''
         },
-        excerpt: item
+        excerpt: item.text
       });
     });
   }
@@ -46,7 +51,10 @@ exports.reporter = async (page, withItems) => {
     standardInstances.push({
       issueID: 'focVis',
       what: 'Visible links are above or to the left of the display',
+      count: data.total,
       ordinalSeverity: 2,
+      tagName: 'A',
+      id: '',
       location: {
         doc: '',
         type: '',

package/testaro/hover.js

@@ -269,6 +269,7 @@ const find = async (data, withItems, page, sample) => {
                 // Add them to the data.
                 data.items.impactTriggers.push({
                   tagName,
+                  id: itemData.id,
                   text: await textOf(firstTrigger[0], 100),
                   additions,
                   removals,
@@ -404,17 +405,19 @@ exports.reporter = async (page, withItems, sampleSize = -1) => {
   if (data.items) {
     Object.keys(data.items).forEach(issue => {
       data.items[issue].forEach(item => {
-        const itemID = item.id ? ` (ID ${item.id})` : '';
         standardInstances.push({
           issueID: `hover-${issue}`,
           what: what[issue],
+          count: data.totals[issue],
           ordinalSeverity: severity[issue],
+          tagName: item.tagName,
+          id: item.id,
           location: {
             doc: '',
             type: '',
             spec: ''
           },
-          excerpt: `${itemID}: ${item.text}`
+          excerpt: item.text
         });
       });
     });
@@ -423,7 +426,10 @@ exports.reporter = async (page, withItems, sampleSize = -1) => {
     standardInstances.push({
       issueID: 'hover',
       what: 'Hovering has unexpected impacts',
+      count: Object.values(data.totals).reduce((total, current) => total + current),
       ordinalSeverity: totals.reduce((max, current, index) => current ? index : max, 0),
+      tagName: '',
+      id: '',
       location: {
         doc: '',
         type: '',

package/testaro/labClash.js

@@ -140,6 +140,7 @@ exports.reporter = async (page, withItems) => {
           data.items.mislabeled.push({
             index,
             tagName: labelee.tagName,
+            id: labelee.id,
             type: labelee.type,
             labelTypes,
             texts
@@ -166,6 +167,8 @@ exports.reporter = async (page, withItems) => {
             issueID: `labClash-${issue}`,
             what: `Element ${item.tagName} ${diagnosis}`,
             ordinalSeverity: issue === 'mislabeled' ? 2 : 3,
+            tagName: item.tagName,
+            id: item.id,
             location: {
               doc: '',
               type: '',
@@ -176,18 +179,39 @@ exports.reporter = async (page, withItems) => {
         });
       });
     }
-    else if (data.totals.mislabeled || data.totals.unlabeled) {
-      standardInstances.push({
-        issueID: 'labClash',
-        what: 'Element labels are conflicting or missing',
-        ordinalSeverity: data.totals.unlabeled ? 3 : 2,
-        location: {
-          doc: '',
-          type: '',
-          spec: ''
-        },
-        excerpt: ''
-      });
+    else {
+      if (data.totals.unlabeled) {
+        standardInstances.push({
+          issueID: 'labClash-unlabeled',
+          what: 'Element labels are missing',
+          count: data.totals.unlabeled,
+          ordinalSeverity: 3,
+          tagName: '',
+          id: '',
+          location: {
+            doc: '',
+            type: '',
+            spec: ''
+          },
+          excerpt: ''
+        });
+      }
+      if (data.totals.mislabeled) {
+        standardInstances.push({
+          issueID: 'labClash-mislabeled',
+          what: 'Element labels are conflicting',
+          count: data.totals.mislabeled,
+          ordinalSeverity: 2,
+          tagName: '',
+          id: '',
+          location: {
+            doc: '',
+            type: '',
+            spec: ''
+          },
+          excerpt: ''
+        });
+      }
     }
     return {
       data,

package/testaro/linkTo.js

@@ -5,34 +5,39 @@
 */
 exports.reporter = async (page, withItems) => {
   // Identify the visible links without href attributes.
-  const badLinkTexts = await page.$$eval(
+  const badLinkData = await page.$$eval(
     'a:not([href]):visible',
     badLinks => {
       // FUNCTION DEFINITION START
       // Returns a space-minimized copy of a string.
       const compact = string => string.replace(/[\t\n]/g, '').replace(/\s{2,}/g, ' ').trim();
       // FUNCTION DEFINITION END
-      return badLinks.map(link => compact(link.textContent));
+      return badLinks.map(link => ({
+        id: link.id,
+        text: compact(link.textContent)
+      }));
     }
   );
   const data = {
-    total: badLinkTexts.length
+    total: badLinkData.length
   };
   const totals = [0, 0, data.total, 0];
   const standardInstances = [];
   if (withItems) {
-    data.items = badLinkTexts;
+    data.items = badLinkData;
     data.items.forEach(item => {
       standardInstances.push({
         issueID: 'linkTo',
         what: 'Element a has no href attribute',
         ordinalSeverity: 2,
+        tagName: 'A',
+        id: item.id,
         location: {
           doc: '',
           type: '',
           spec: ''
         },
-        excerpt: item
+        excerpt: item.text
       });
     });
   }
@@ -40,7 +45,10 @@ exports.reporter = async (page, withItems) => {
     standardInstances.push({
       issueID: 'linkTo',
       what: 'Links are missing href attributes',
+      count: data.total,
       ordinalSeverity: 2,
+      tagName: 'A',
+      id: '',
       location: {
         doc: '',
         type: '',

package/testaro/linkUl.js

@@ -25,25 +25,32 @@ exports.reporter = async (page, withItems) => {
     const adjacentLinks = linkTypes.adjacent;
     const adjacentLinkCount = adjacentLinks.length;
     let underlined = 0;
-    const ulAdjacentLinkTexts = [];
-    const nulAdjacentLinkTexts = [];
+    const ulAdjacentLinkData = [];
+    const nulAdjacentLinkData = [];
     // For each of them:
     adjacentLinks.forEach(link => {
       // Identify the text of the link if itemization is required.
+      const id = link.id;
       const text = withItems ? compact(link.textContent) || compact(link.outerHTML) : '';
       // If it is underlined:
       if (window.getComputedStyle(link).textDecorationLine === 'underline') {
         // Increment the count of underlined inline links.
         underlined++;
-        // If required, add its text to the array of their texts.
+        // If required, add its data to the array of their data.
         if (withItems) {
-          ulAdjacentLinkTexts.push(text);
+          ulAdjacentLinkData.push({
+            id,
+            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.
-        nulAdjacentLinkTexts.push(text);
+        nulAdjacentLinkData.push({
+          id,
+          text
+        });
       }
     });
     // Get the percentage of underlined links among all inline links.
@@ -62,8 +69,8 @@ exports.reporter = async (page, withItems) => {
     };
     if (withItems) {
       data.items = {
-        underlined: ulAdjacentLinkTexts,
-        notUnderlined: nulAdjacentLinkTexts
+        underlined: ulAdjacentLinkData,
+        notUnderlined: nulAdjacentLinkData
       };
     }
     const {adjacent} = data.totals;
@@ -73,14 +80,16 @@ exports.reporter = async (page, withItems) => {
       data.items.notUnderlined.forEach(item => {
         standardInstances.push({
           issueID: 'linkUl',
-          what: 'Element a is inline but has no underline',
+          what: 'Link is inline but has no underline',
           ordinalSeverity: 1,
+          tagName: 'A',
+          id: item.id,
           location: {
             doc: '',
             type: '',
             spec: ''
           },
-          excerpt: item
+          excerpt: item.text
         });
       });
     }
@@ -88,7 +97,10 @@ exports.reporter = async (page, withItems) => {
       standardInstances.push({
         issueID: 'linkUl',
         what: 'Inline links are missing underlines',
+        count: adjacent.total - adjacent.underlined,
         ordinalSeverity: 1,
+        tagName: 'A',
+        id: '',
         location: {
           doc: '',
           type: '',

package/testaro/menuNav.js

@@ -166,7 +166,12 @@ exports.reporter = async (page, withItems) => {
         // If itemization is required:
         if (withItems) {
           // Initialize a report on the menu item.
-          itemData.tagName = await page.evaluate(element => element.tagName, currentItem);
+          const identifiers = await page.evaluate(element => ({
+            tagName: element.tagName,
+            id: element.id
+          }), currentItem);
+          itemData.tagName = identifiers.tagName;
+          itemData.id = identifiers.id;
           itemData.text = await allText(page, currentItem);
           itemData.navigationErrors = [];
         }
@@ -203,14 +208,14 @@ exports.reporter = async (page, withItems) => {
         isCorrect = await testKey(
           menu, menuItems, currentItem, 'End', 'end', itemCount - 1, isCorrect, itemData
         );
-        // Update the menu-item status (Node 14 does not support the ES 2021 &&= operator).
+        // Update the menu status (Node 14 does not support the ES 2021 &&= operator).
         menuIsCorrect = menuIsCorrect && isCorrect;
         // Increment the data.
         data.totals.menuItems[isCorrect ? 'correct' : 'incorrect']++;
         if (withItems) {
           data.menuItems[isCorrect ? 'correct' : 'incorrect'].push(itemData);
         }
-        // Process the next tab element.
+        // Process the next menu item.
         return await testMenuItems(menu, menuItems, index + 1, orientation, menuIsCorrect);
       }
       // Otherwise, i.e. if all menu items have been tested:
@@ -271,14 +276,17 @@ exports.reporter = async (page, withItems) => {
     data.menuItems.incorrect.forEach(item => {
       standardInstances.push({
         issueID: 'menuNav',
-        what: `Element ${item.tagName} is a menu item but has nonstandard navigation`,
+        what: `Menu item responds nonstandardly to ${item.navigationErrors.join(', ')}`,
+        count: item.navigationErrors.length,
         ordinalSeverity: 1,
+        tagName: item.tagName,
+        id: item.id,
         location: {
           doc: '',
           type: '',
           spec: ''
         },
-        excerpt: `${item.tagName}: ${item.text}`
+        excerpt: item.text
       });
     });
   }
@@ -286,7 +294,10 @@ exports.reporter = async (page, withItems) => {
     standardInstances.push({
       issueID: 'menuNav',
       what: 'Menus and menu items have nonstandard navigation',
-      ordinalSeverity: 2,
+      count: data.totals.navigations.all.incorrect,
+      ordinalSeverity: 1,
+      tagName: '',
+      id: '',
       location: {
         doc: '',
         type: '',