testaro 1.0.0

package/tests/focInd.js

@@ -0,0 +1,99 @@
+/*
+  focInd
+  This test reports focusable elements without focus indicators, with non-outline focus
+  indicators, and with outline focus indicators.
+
+  It as based on the assumption that outlines are the standard and thus most familiar
+  focus indicator. Other focus indicators are assumed better than none, but more likely
+  to be misunderstood. For example, underlines may be mistaken for selection indicators.
+
+  Bug: This test fails to recognize outlines when run with firefox.
+*/
+exports.reporter = async (page, withItems, revealAll) => {
+  // If required, make all elements visible.
+  if (revealAll) {
+    await require('../procs/test/allVis').allVis(page);
+  }
+  // Get data on the focusable visible elements with and without indicators.
+  const data = await page.$$eval('body *:visible', (elements, withItems) => {
+    // Initialize the data.
+    const data = {
+      totals: {
+        total: 0,
+        types: {
+          indicatorMissing: {
+            total: 0,
+            tagNames: {}
+          },
+          nonOutlinePresent: {
+            total: 0,
+            tagNames: {}
+          },
+          outlinePresent: {
+            total: 0,
+            tagNames: {}
+          }
+        }
+      }
+    };
+    if (withItems) {
+      data.items = {
+        indicatorMissing: [],
+        nonOutlinePresent: [],
+        outlinePresent: []
+      };
+    }
+    const addElementFacts = (element, status) => {
+      const type = data.totals.types[status];
+      type.total++;
+      const tagName = element.tagName;
+      if (type.tagNames[tagName]) {
+        type.tagNames[tagName]++;
+      }
+      else {
+        type.tagNames[tagName] = 1;
+      }
+      if (withItems) {
+        data.items[status].push({
+          tagName,
+          text: element.textContent.trim().replace(/\s{2,}/g, ' ').slice(0, 100)
+        });
+      }
+    };
+    elements.forEach(element => {
+      if (element.tabIndex === 0) {
+        data.totals.total++;
+        const styleBlurred = Object.assign({}, window.getComputedStyle(element));
+        element.focus({preventScroll: true});
+        const styleFocused = window.getComputedStyle(element);
+        const hasOutline
+          = styleBlurred.outlineWidth === '0px'
+          && styleFocused.outlineWidth !== '0px';
+        if (hasOutline) {
+          addElementFacts(element, 'outlinePresent');
+        }
+        else {
+          const diff = prop => styleFocused[prop] !== styleBlurred[prop];
+          const hasIndicator
+            = diff('borderStyle')
+            && styleBlurred.borderWidth !== '0px'
+            && styleFocused.borderWidth !== '0px'
+            || (styleFocused.borderStyle !== 'none' && diff('borderWidth'))
+            || diff('outlineStyle')
+            && styleBlurred.outlineWidth !== '0px'
+            && styleFocused.outlineWidth !== '0px'
+            || (styleFocused.outlineStyle !== 'none' && diff('outlineWidth'))
+            || diff('fontSize')
+            || diff('fontStyle')
+            || diff('textDecorationLine')
+            || diff('textDecorationStyle')
+            || diff('textDecorationThickness');
+          const status = hasIndicator ? 'nonOutlinePresent' : 'indicatorMissing';
+          addElementFacts(element, status);
+        }
+      }
+    });
+    return data;
+  }, withItems);
+  return {result: data};
+};

package/tests/focOp.js

@@ -0,0 +1,132 @@
+/*
+  focOp
+  This test reports descrepancies between Tab-focusability and operability. The standard
+  practice is to make focusable elements operable and vice versa. If focusable elements are not
+  operable, users are likely to be surprised that nothing happens when they try to operate such
+  elements. If operable elements are not focusable, users depending on keyboard navigation are
+  prevented from operating those elements. The test considers an element operable if it has a
+  non-inherited pointer cursor and is not a 'LABEL' element, or has an operable tag name ('A',
+  'BUTTON', 'IFRAME', 'INPUT', 'SELECT', 'TEXTAREA'), or has an 'onclick' attribute. The test
+  considers an element Tab-focusable if its tabIndex property has the value 0.
+*/
+exports.reporter = async (page, withItems) => {
+  // Get data on focusability-operability-discrepant elements.
+  const data = await page.$$eval('body *', (elements, withItems) => {
+    // Initialize the data.
+    const data = {
+      totals: {
+        total: 0,
+        types: {
+          onlyFocusable: {
+            total: 0,
+            tagNames: {}
+          },
+          onlyOperable: {
+            total: 0,
+            tagNames: {}
+          },
+          focusableAndOperable: {
+            total: 0,
+            tagNames: {}
+          }
+        }
+      }
+    };
+    if (withItems) {
+      data.items = {
+        onlyFocusable: [],
+        onlyOperable: [],
+        focusableAndOperable: []
+      };
+    }
+    // FUNCTION DEFINITIONS START
+    // Returns data on an element’s operability and prevents it from propagating a pointer.
+    const operabilityOf = element => {
+      const opTags = new Set(['A', 'BUTTON', 'IFRAME', 'INPUT', 'SELECT', 'TEXTAREA']);
+      const hasPointer = window.getComputedStyle(element).cursor === 'pointer';
+      const opBases = [
+        opTags.has(element.tagName),
+        element.hasAttribute('onclick'),
+        hasPointer && element.tagName !== 'LABEL'
+      ];
+      const result = {operable: opBases.some(basis => basis)};
+      if (result.operable) {
+        result.byTag = opBases[0];
+        result.byOnClick = opBases[1];
+        result.byPointer = opBases[2];
+      }
+      // If the cursor is a pointer:
+      if (hasPointer) {
+        // Change it to the browser default to prevent pointer propagation.
+        element.style.cursor = 'default';
+      }
+      return result;
+    };
+    // Adds facts about an element to data.
+    const addFacts = (element, status, byTag, byOnClick, byPointer) => {
+      const statusNames = {
+        f: 'onlyFocusable',
+        o: 'onlyOperable',
+        b: 'focusableAndOperable'
+      };
+      const statusName = statusNames[status];
+      data.totals.types[statusName].total++;
+      const tagNames = data.totals.types[statusName].tagNames;
+      const {id, tagName} = element;
+      tagNames[tagName] = (tagNames[tagName] || 0) + 1;
+      if (withItems) {
+        const elementData = {
+          tagName: element.tagName,
+          id: id || '',
+          text: (element.textContent.trim() || element.outerHTML.trim())
+          .replace(/\s{2,}/sg, ' ')
+          .slice(0, 80)
+        };
+        if (status !== 'f') {
+          elementData.byTag = byTag;
+          elementData.byOnClick = byOnClick;
+          elementData.byPointer = byPointer;
+        }
+        data.items[statusName].push(elementData);
+      }
+    };
+    // FUNCTION DEFINITIONS END
+    // For each element:
+    elements.forEach(element => {
+      // If its tab index is 0, deem it focusable and:
+      if (element.tabIndex === 0) {
+        // Increment the grand total.
+        data.totals.total++;
+        // Determine whether and how it is operable.
+        const {operable, byTag, byOnClick, byPointer} = operabilityOf(element);
+        // If it is:
+        if (operable) {
+          // Add its data to the result.
+          addFacts(element, 'b', byTag, byOnClick, byPointer);
+        }
+        // Otherwise, i.e. if it is not operable:
+        else {
+          // Add its data to the result.
+          addFacts(element, 'f');
+        }
+      }
+      // Otherwise, i.e. if it is not focusable:
+      else {
+        // Determine whether and how it is operable.
+        const {operable, byTag, byOnClick, byPointer} = operabilityOf(element);
+        // If it is:
+        if (operable) {
+          // Increment the grand total.
+          data.totals.total++;
+          // Add its data to the result.
+          addFacts(element, 'o', byTag, byOnClick, byPointer);
+        }
+      }
+    });
+    return data;
+  }, withItems)
+  .catch(error => {
+    console.log(`ERROR getting focOp data (${error.message})`);
+  });
+  return {result: data};
+};

package/tests/hover.js

@@ -0,0 +1,195 @@
+/*
+  hover
+  This test reports unexpected effects of hovering. The effects include elements that are made
+  visible, elements whose opacities are changed, elements with ancestors whose opacities are
+  changed, and elements that cannot be hovered over. Only Playwright-visible elements that have
+  'A', 'BUTTON', and 'LI' tag names or have 'onmouseenter' or 'onmouseover' attributes are
+  considered as hovering targets. The elements considered when the effects of hovering are
+  examined are the descendants of the grandparent of the element hovered over if that element
+  has the tag name 'A' or 'BUTTON' or otherwise the descendants of the element. The only
+  elements counted as being made visible by hovering are those with tag names 'A', 'BUTTON',
+  'INPUT', and 'SPAN', and those with 'role="menuitem"' attributes.
+*/
+exports.reporter = async (page, withItems) => {
+  // Initialize a counter.
+  let elementsChecked = 0;
+  // Identify the elements that are likely to trigger disclosures on hover.
+  const triggers = await page.$$(
+    'body a:visible, body button:visible, body li:visible, body [onmouseenter]:visible, body [onmouseover]:visible'
+  )
+  .catch(error => {
+    console.log(`ERROR getting hover triggers (${error.message})`);
+    return [];
+  });
+  // Identify the selectors of active elements likely to be disclosed by a hover.
+  const targetSelectors = ['a', 'button', 'input', '[role=menuitem]', 'span']
+  .map(selector => `${selector}:visible`)
+  .join(', ');
+  // Initialize the result.
+  const data = {
+    totals: {
+      triggers: 0,
+      madeVisible: 0,
+      opacityChanged: 0,
+      opacityAffected: 0,
+      unhoverables: 0
+    }
+  };
+  if (withItems) {
+    data.items = {
+      triggers: [],
+      unhoverables: []
+    };
+  }
+  let triggerTag = '';
+  // FUNCTION DEFINITION START
+  // Recursively finds and reports triggers and targets.
+  const find = async triggers => {
+    // If any potential disclosure triggers remain:
+    if (triggers.length) {
+      // Identify the first of them.
+      const firstTrigger = triggers[0];
+      const tagNameJSHandle = await firstTrigger.getProperty('tagName')
+      .catch(error => {
+        console.log(`ERROR getting trigger tag name (${error.message})`);
+        return '';
+      });
+      if (tagNameJSHandle) {
+        const tagName = await tagNameJSHandle.jsonValue();
+        // Identify the root of a subtree likely to contain disclosed elements.
+        let root = firstTrigger;
+        if (['A', 'BUTTON'].includes(tagName)) {
+          const rootJSHandle = await page.evaluateHandle(
+            firstTrigger => {
+              const parent = firstTrigger.parentElement;
+              if (parent) {
+                return parent.parentElement || parent;
+              }
+              else {
+                return firstTrigger;
+              }
+            },
+            firstTrigger
+          );
+          root = rootJSHandle.asElement();
+        }
+        // Identify the visible active descendants of the root before the hover.
+        const preVisibles = await root.$$(targetSelectors);
+        // Identify all the descendants of the root.
+        const descendants = await root.$$('*');
+        // Identify their opacities before the hover.
+        const preOpacities = await page.evaluate(
+          elements => elements.map(el => window.getComputedStyle(el).opacity), descendants
+        );
+        try {
+          // Hover over the potential trigger.
+          await firstTrigger.hover({timeout: 700});
+          // Identify whether it controls other elements.
+          const isController = await page.evaluate(
+            element => element.ariaHasPopup || element.hasAttribute('aria-controls'), firstTrigger
+          );
+          // Wait for any delayed and/or slowed hover reaction if likely.
+          await page.waitForTimeout(
+            elementsChecked++ < 10 || tagName !== triggerTag || isController ? 1200 : 200
+          );
+          await root.waitForElementState('stable');
+          // Identify the visible active descendants of the root during the hover.
+          const postVisibles = await root.$$(targetSelectors);
+          // Identify the opacities of the descendants of the root during the hover.
+          const postOpacities = await page.evaluate(
+            elements => elements.map(el => window.getComputedStyle(el).opacity), descendants
+          );
+          // Identify the elements with opacity changes.
+          const opacityTargets = descendants
+          .filter((descendant, index) => postOpacities[index] !== preOpacities[index]);
+          // Count them and their descendants.
+          const opacityAffected = opacityTargets.length
+            ? await page.evaluate(elements => elements.reduce(
+              (total, current) => total + 1 + current.querySelectorAll('*').length, 0
+            ), opacityTargets)
+            : 0;
+          // If hovering disclosed any element or changed any opacity:
+          if (postVisibles.length > preVisibles.length || opacityAffected) {
+            // Preserve the lengthened reaction wait, if any, for the next 5 tries.
+            if (elementsChecked < 11) {
+              elementsChecked = 5;
+            }
+            // Hover over the upper-left corner of the page, to undo any hover reactions.
+            await page.hover('body', {
+              position: {
+                x: 0,
+                y: 0
+              }
+            });
+            // Wait for any delayed and/or slowed hover reaction.
+            await page.waitForTimeout(200);
+            await root.waitForElementState('stable');
+            // Increment the counts of triggers and targets.
+            data.totals.triggers++;
+            const madeVisible = Math.max(0, postVisibles.length - preVisibles.length);
+            data.totals.madeVisible += madeVisible;
+            data.totals.opacityChanged += opacityTargets.length;
+            data.totals.opacityAffected += opacityAffected;
+            // If details are to be reported:
+            if (withItems) {
+              // Report them.
+              const triggerDataJSHandle = await page.evaluateHandle(args => {
+                // Returns the text of an element.
+                const textOf = (element, limit) => {
+                  const text = element.textContent.trim() || element.outerHTML.trim();
+                  return text.replace(/\s{2,}/sg, ' ').slice(0, limit);
+                };
+                const trigger = args[0];
+                const preVisibles = args[1];
+                const postVisibles = args[2];
+                const madeVisible = postVisibles
+                .filter(el => ! preVisibles.includes(el))
+                .map(el => ({
+                  tagName: el.tagName,
+                  text: textOf(el, 50)
+                }));
+                const opacityChanged = args[3].map(el => ({
+                  tagName: el.tagName,
+                  text: textOf(el, 50)
+                }));
+                return {
+                  tagName: trigger.tagName,
+                  id: trigger.id || '',
+                  text: textOf(trigger, 50),
+                  madeVisible,
+                  opacityChanged
+                };
+              }, [firstTrigger, preVisibles, postVisibles, opacityTargets]);
+              const triggerData = await triggerDataJSHandle.jsonValue();
+              data.items.triggers.push(triggerData);
+            }
+          }
+        }
+        catch (error) {
+          console.log('ERROR hovering');
+          // Returns the text of an element.
+          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);
+          };
+          data.totals.unhoverables++;
+          if (withItems) {
+            data.items.unhoverables.push({
+              tagName: tagName,
+              id: firstTrigger.id || '',
+              text: await textOf(firstTrigger, 50)
+            });
+          }
+        }
+        triggerTag = tagName;
+      }
+      // Process the remaining potential triggers.
+      await find(triggers.slice(1));
+    }
+  };
+  // Find and document the hover-triggered disclosures.
+  await find(triggers);
+  // Return the result.
+  return {result: data};
+};

package/tests/ibm.js

@@ -0,0 +1,89 @@
+/*
+  ibm
+  This test implements the IBM Equal Access ruleset for accessibility.
+  The 'withNewContent' argument determines whether the test package should be
+  given the URL of the page to be tested (true), should be given the page content
+  (false), or should test in both ways (omitted).
+
+  Before using this test, you must:
+    0. Create a file named aceconfig.js.
+    1. Locate that file in the directory in which you call Testaro.
+    2. Populate that file with this content:
+
+      module.exports = {
+        reportLevels: [
+          'violation',
+          'recommendation'
+        ],
+        outputFolder: 'temp/ibm'
+      };
+*/
+// Import required modules.
+const fs = require('fs/promises');
+const {getCompliance} = require('accessibility-checker');
+// Runs the IBM test.
+const run = async content => {
+  const nowLabel = (new Date()).toISOString().slice(0, 19);
+  // Return the result of a test.
+  const report = await getCompliance(content, nowLabel);
+  /*
+  let timeoutID;
+  const deadline = new Promise(resolve => {
+    timeoutID = setTimeout(() => {
+      resolve('');
+    }, 20000);
+  });
+  const result = Promise.race([report, deadline]);
+  clearTimeout(timeoutID);
+  return result;
+  */
+  return report;
+};
+// Reports the result of an IBM test.
+const report = (result, withItems) => {
+  const data = {};
+  if (result) {
+    data.totals = result.report.summary.counts;
+    if (withItems) {
+      data.items = result.report.results;
+      data.items.forEach(item => {
+        delete item.apiArgs;
+        delete item.category;
+        delete item.ignored;
+        delete item.messageArgs;
+        delete item.reasonId;
+        delete item.ruleTime;
+        delete item.value;
+      });
+    }
+  }
+  else {
+    data.error = 'ERROR: ibm test failed';
+  }
+  return data;
+};
+const all = {};
+// Returns results of an IBM test.
+exports.reporter = async (page, withItems, withNewContent) => {
+  // If the test is to be conducted with existing content:
+  if (! withNewContent) {
+    // Conduct and report it.
+    const content = await page.content();
+    const result = await run(content);
+    all.content = report(result, withItems);
+  }
+  // If the test is to be conducted with a URL:
+  if ([true, undefined].includes(withNewContent)) {
+    // Conduct and report it.
+    const content = page.url();
+    const result = await run(content);
+    all.url = report(result, withItems);
+  }
+  // Delete the report files.
+  fs.rm('temp/ibm', {recursive: true})
+  .catch(error => {
+    console.log(`ERROR deleting temporary ibm files (${error.message})`);
+  });
+  // Return the result.
+  return {result: all};
+};

package/tests/labClash.js

@@ -0,0 +1,157 @@
+/*
+  labClash
+  This test reports defects in the labeling of buttons, non-hidden inputs, select lists, and
+  text areas. The defects include missing labels and redundant labels. Redundant labels are
+  labels that are superseded by other labels. Explicit and implicit (wrapped) labels are
+  additive, not conflicting.
+*/
+exports.reporter = async (page, withItems) => {
+  return await page.$eval('body', (body, withItems) => {
+    // FUNCTION DEFINITION START
+    const debloat = text => text.replace(/\s+/g, ' ').trim();
+    // FUNCTION DEFINITION END
+    // Initialize a report.
+    const data = {
+      totals: {
+        mislabeled: 0,
+        unlabeled: 0,
+        wellLabeled: 0
+      }
+    };
+    if (withItems) {
+      data.items = {
+        mislabeled: [],
+        unlabeled: [],
+        wellLabeled: []
+      };
+    }
+    // Get data on the labelable form controls.
+    const labelees = Array.from(
+      body.querySelectorAll('button, input:not([type=hidden]), select, textarea')
+    );
+    // For each one:
+    labelees.forEach((labelee, index) => {
+      // Determine whether it has any or clashing labels and, if required, the label texts.
+      let labelTypes = [];
+      let texts = {};
+      // Attribute label.
+      if (labelee.hasAttribute('aria-label')) {
+        const trimmedLabel = debloat(labelee.ariaLabel);
+        if (trimmedLabel) {
+          labelTypes.push('aria-label');
+          if (withItems) {
+            texts.attribute = labelee.ariaLabel;
+          }
+        }
+      }
+      // Reference label.
+      if (labelee.hasAttribute('aria-labelledby')) {
+        labelTypes.push('aria-labelledby');
+        if (withItems) {
+          const labelerIDs = debloat(labelee.getAttribute('aria-labelledby')).split(' ');
+          const labelerTexts = labelerIDs
+          .map(id => {
+            const labeler = document.getElementById(id);
+            return labeler ? debloat(labeler.textContent) : '';
+          })
+          .filter(text => text);
+          if (labelerTexts.length) {
+            texts.referred = labelerTexts;
+          }
+        }
+      }
+      // Explicit and implicit labels.
+      const labels = Array.from(labelee.labels);
+      if (labels.length) {
+        labelTypes.push('label');
+        if (withItems) {
+          const labelTexts = labels.map(label => debloat(label.textContent)).filter(text => text);
+          if (labelTexts.length) {
+            texts.label = labelTexts;
+          }
+        }
+      }
+      // Content label if details required.
+      if (withItems) {
+        // 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;
+          }
+        }
+      }
+      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
+        )
+      ) {
+        // Increment the count of well-labeled items in the report.
+        totals.wellLabeled++;
+        // Add data on the item to the report, if required.
+        if (withItems) {
+          data.items.wellLabeled.push({
+            index,
+            tagName: labelee.tagName,
+            type: labelee.type,
+            labelType: labelTypes[0],
+            texts
+          });
+        }
+      }
+      // Otherwise, if it is unlabeled:
+      else if (! labelTypeCount) {
+        // Increment the count of unlabeled items in the report.
+        totals.unlabeled++;
+        // Add data on the item to the report, if required.
+        if (withItems) {
+          const item = {
+            index,
+            tagName: labelee.tagName,
+            type: labelee.type
+          };
+          if (
+            labelee.tagName === 'BUTTON'
+            || (labelee.tagName === 'INPUT' && labelee.type === 'submit')
+          ) {
+            item.content = texts.content || `{${debloat(labelee.outerHTML)}}`;
+          }
+          data.items.unlabeled.push(item);
+        }
+      }
+      // Otherwise, if it has clashing labels:
+      else if (labelTypeCount > 1) {
+        // Increment the count of labeling clashes in the report.
+        totals.mislabeled++;
+        // Add the data on the item to the report, if required.
+        if (withItems) {
+          data.items.mislabeled.push({
+            index,
+            tagName: labelee.tagName,
+            type: labelee.type,
+            labelTypes,
+            texts
+          });
+        }
+      }
+    });
+    return {result: data};
+  }, withItems)
+  .catch(error => {
+    console.log(`ERROR: labClash failed (${error.message})`);
+    const data = {error: 'ERROR: labClash failed'};
+    return {result: data};
+  });
+};