testaro 18.7.0 → 18.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "testaro",
-  "version": "18.7.0",
+  "version": "18.8.0",
   "description": "Run 920 web accessibility tests from 9 tools and get a standardized report",
   "main": "index.js",
   "scripts": {

package/testaro/embAc.js

@@ -8,59 +8,37 @@
 
 // ########## IMPORTS
 
-// Module to get locator data.
-const {getLocatorData} = require('../procs/getLocatorData');
+// Module to perform common operations.
+const {init, report} = require('../procs/testaro');
 
 // ########## FUNCTIONS
 
+// Runs the test and returns the result.
 exports.reporter = async (page, withItems) => {
-  // Get locators for all misembedded elements.
-  const loc = page.locator(
-    'a a, a button, a input, a select, button a, button button, button input, button select'
+  // Initialize the locators and result.
+  const all = await init(
+    page, 'a a, a button, a input, a select, button a, button button, button input, button select'
   );
-  const locs = await loc.all();
-  // Initialize the result.
-  const data = {};
-  const totals = [0, 0, 0, 0];
-  const standardInstances = [];
   // For each locator:
-  for (const loc of locs) {
-    // Get data on its element.
-    const parentTagName = await loc.evaluate(element => element.parentElement.tagName);
-    const elData = await getLocatorData(loc);
-    // Add data to the standard result.
-    totals[2]++;
-    if (withItems) {
-      standardInstances.push({
-        ruleID: 'embAc',
-        what: `Interactive element is embedded in a ${parentTagName === 'A' ? 'link' : 'button'}`,
-        ordinalSeverity: 2,
-        tagName: elData.tagName,
-        id: elData.id,
-        location: elData.location,
-        excerpt: elData.excerpt
-      });
-    }
-  };
-  if (! withItems) {
-    standardInstances.push({
-      ruleID: 'embAc',
-      what: 'Interactive elements are contained by links or buttons',
-      ordinalSeverity: 2,
-      count: totals[2],
-      tagName: '',
-      id: '',
-      location: {
-        doc: '',
-        type: '',
-        spec: ''
-      },
-      excerpt: ''
+  for (const loc of all.allLocs) {
+    // Get whether its embedder is a link or a button.
+    const embedderTagName = await loc.evaluate(element => {
+      const embedder = element.parentElement.closest('a, button');
+      return embedder ? embedder.tagName : '';
     });
+    let param = 'a link or button';
+    if (embedderTagName === 'A') {
+      param = 'a link';
+    }
+    else if (embedderTagName === 'BUTTON') {
+      param = 'a button';
+    }
+    all.locs.push([loc, param]);
   }
-  return {
-    data,
-    totals,
-    standardInstances
-  };
+  // Populate and return the result.
+  const whats = [
+    'Interactive element is embedded in __param__',
+    'Interactive elements are contained by links or buttons'
+  ];
+  return await report(withItems, all, 'embAc', whats, 2);
 };

package/testaro/filter.js

@@ -8,95 +8,29 @@
 
 // ########## IMPORTS
 
-// Module to get locator data.
-const {getLocatorData} = require('../procs/getLocatorData');
+// Module to perform common operations.
+const {init, report} = require('../procs/testaro');
 
 // ########## FUNCTIONS
 
+// Runs the test and returns the result.
 exports.reporter = async (page, withItems) => {
-  // Get locators for all elements in the body.
-  const locAll = page.locator('body *');
-  const locsAll = await locAll.all();
-  // Initialize the standard results.
-  const data = {};
-  const totals = [0, 0, 0, 0];
-  const standardInstances = [];
-  // Initialize the instance locators.
-  const locs = [];
+  // Initialize the locators and result.
+  const all = await init(page, 'body *');
   // For each locator:
-  for (const loc of locsAll) {
-    // If it has a filter style:
-    const hasFilter = await loc.evaluate(element => {
-      const styleDec = window.getComputedStyle(element);
+  for (const loc of all.allLocs) {
+    // Get whether its element violates the rule.
+    const isBad = await loc.evaluate(el => {
+      const styleDec = window.getComputedStyle(el);
       return styleDec.filter !== 'none';
     });
-    if (hasFilter) {
-      // Add it to the instance locators.
-      locs.push(loc);
+    // If it does:
+    if (isBad) {
+      // Add the locator to the array of violators.
+      all.locs.push(loc);
     }
   }
-  // For each instance locator:
-  for (const loc of locs) {
-    // Get data on its element.
-    const impact = await loc.evaluate(element => element.querySelectorAll('*').length);
-    const elData = await getLocatorData(loc);
-    // Add to the standard result.
-    totals[2]++;
-    totals[1] += impact;
-    // If itemization is required:
-    if (withItems) {
-      // Add a standard instance for the element.
-      standardInstances.push({
-        ruleID: 'filter',
-        what: `Element has a filter style; impacted element count: ${impact}`,
-        ordinalSeverity: 2,
-        tagName: elData.tagName,
-        id: elData.id,
-        location: elData.location,
-        excerpt: elData.excerpt
-      });
-    }
-  }
-  // If itemization is not required and there are any instances:
-  if (! withItems && totals[2]) {
-    // Adda summary instance:
-    standardInstances.push({
-      ruleID: 'filter',
-      what: 'Elements have filter styles',
-      ordinalSeverity: 2,
-      count: totals[2],
-      tagName: '',
-      id: '',
-      location: {
-        doc: '',
-        type: '',
-        spec: ''
-      },
-      excerpt: ''
-    });
-    // If any impact occurred:
-    if (totals[1]) {
-      // Add a summary instance.
-      standardInstances.push({
-        ruleID: 'filter',
-        what: 'Elements are impacted by elements with filter styles',
-        ordinalSeverity: 1,
-        count: totals[1],
-        tagName: '',
-        id: '',
-        location: {
-          doc: '',
-          type: '',
-          spec: ''
-        },
-        excerpt: ''
-      });
-    }
-  }
-  // Return the result.
-  return {
-    data,
-    totals,
-    standardInstances
-  };
+  // Populate and return the result.
+  const whats = ['Element has a filter style', 'Elements have filter styles'];
+  return await report(withItems, all, 'filter', whats, 2);
 };

package/testaro/focVis.js

@@ -6,88 +6,43 @@
 
 // ########## IMPORTS
 
-// Module to get locator data.
-const {getLocatorData} = require('../procs/getLocatorData');
+// Module to perform common operations.
+const {init, report} = require('../procs/testaro');
 
 // ########## FUNCTIONS
 
+// Runs the test and returns the result.
 exports.reporter = async (page, withItems) => {
-  // Get a locator for the initially visible links.
-  const locAll = page.locator('a:visible');
-  const locsAll = await locAll.all();
-  // Get locators for those that are off the display when focused.
-  const locs = [];
-  for (const loc of locsAll) {
-    const isOff = await loc.evaluate(element => {
-      const isAbove = element.offsetTop + element.offsetHeight <= 0;
-      const isLeft = element.offsetLeft + element.offsetWidth <= 0;
-      const isOff = isAbove || isLeft;
-      return isOff;
+  // Initialize the locators and result.
+  const all = await init(page, 'a:visible');
+  // For each locator:
+  for (const loc of all.allLocs) {
+    // Get how its element violates the rule, if it does.
+    const isBad = await loc.evaluate(el => {
+      const isAbove = el.offsetTop + el.offsetHeight <= 0;
+      const isLeft = el.offsetLeft + el.offsetWidth <= 0;
+      return [isAbove, isLeft];
     });
-    if (isOff) {
-      locs.push(loc);
-    }
-  }
-  // Initialize the standard result.
-  const data = {};
-  const totals = [0, 0, 0, 0];
-  const standardInstances = [];
-  // For each off-display link:
-  for (const loc of locs) {
-    // Get data on it.
-    const elData = await getLocatorData(loc);
-    // Add to the totals.
-    totals[2]++;
-    if (withItems) {
-      let where;
-      if (elData.location.type === 'selector') {
-        where = 'above or to the left of';
+    // If it does:
+    if (isBad[0] || isBad[1]) {
+      // Add the locator to the array of violators.
+      let param;
+      if (isBad[0] && isBad[1]) {
+        param = 'above and to the left of';
+      }
+      else if (isBad[0]) {
+        param = 'above';
       }
       else {
-        const isLeft = elData.location.spec.x < 0;
-        const isAbove = elData.location.spec.y < 0;
-        if (isLeft && isAbove) {
-          where = 'above and to the left of';
-        }
-        else if (isLeft) {
-          where = 'to the left of';
-        }
-        else if (isAbove) {
-          where = 'above';
-        }
-        else {
-          where = 'possibly above or to the left of';
-        }
+        param = 'to the left of';
       }
-      standardInstances.push({
-        ruleID: 'focVis',
-        what: `Visible link is ${where} the display`,
-        ordinalSeverity: 2,
-        tagName: 'A',
-        id: elData.id,
-        location: elData.location,
-        excerpt: elData.excerpt
-      });
+      all.locs.push([loc, param]);
     }
   }
-  if (! withItems) {
-    standardInstances.push({
-      ruleID: 'focVis',
-      what: 'Visible links are above or to the left of the display',
-      ordinalSeverity: 2,
-      tagName: 'A',
-      id: '',
-      location: {
-        doc: '',
-        type: '',
-        spec: ''
-      },
-      excerpt: ''
-    });
-  }
-  return {
-    data,
-    totals,
-    standardInstances
-  };
+  // Populate and return the result.
+  const whats = [
+    'Visible link is __param__ the display',
+    'Visible links are above or to the left of the display'
+  ];
+  return await report(withItems, all, 'focVis', whats, 2);
 };

package/testaro/hr.js

@@ -7,61 +7,20 @@
 
 // ########## IMPORTS
 
-// Module to get locator data.
-const {getLocatorData} = require('../procs/getLocatorData');
+// Module to perform common operations.
+const {init, report} = require('../procs/testaro');
 
 // ########## FUNCTIONS
 
-// Performs the test.
+// Runs the test and returns the result.
 exports.reporter = async (page, withItems) => {
-  // Initialize the standard result.
-  const data = {};
-  const totals = [0, 0, 0, 0];
-  const standardInstances = [];
-  // Get locators for all applicable elements.
-  const locAll = page.locator('body hr');
-  const locsAll = await locAll.all();
-  // For each of them:
-  for (const loc of locsAll) {
-    // Add to the totals.
-    totals[0]++;
-    // If itemization is required:
-    if (withItems) {
-      // Get data on the element.
-      const elData = await getLocatorData(loc);
-      // Add a standard instance.
-      standardInstances.push({
-        ruleID: 'hr',
-        what: 'Element instead of styling is used for vertical segmentation',
-        ordinalSeverity: 0,
-        tagName: 'HR',
-        id: elData.id,
-        location: elData.location,
-        excerpt: elData.excerpt
-      });
-    }
-  }
-  // If itemization is not required and there are instances:
-  if (! withItems && totals[0]) {
-    // Add a summary instance.
-    standardInstances.push({
-      ruleID: 'hr',
-      what: 'Elements instead of styling are used for vertical segmentation',
-      ordinalSeverity: 0,
-      count: totals[0],
-      tagName: 'HR',
-      id: '',
-      location: {
-        doc: '',
-        type: '',
-        spec: ''
-      },
-      excerpt: ''
-    });
-  }
-  return {
-    data,
-    totals,
-    standardInstances
-  };
+  // Initialize the locators and result.
+  const all = await init(page, 'body hr');
+  all.locs = all.allLocs;
+  // Populate and return the result.
+  const whats = [
+    'Element instead of styling is used for vertical segmentation',
+    'Elements instead of styling are used for vertical segmentation'
+  ];
+  return await report(withItems, all, 'hr', whats, 0, 'HR');
 };

package/validation/tests/jobs/embAc.json

@@ -67,6 +67,11 @@
           "=",
           "BUTTON"
         ],
+        [
+          "standardResult.instances.0.id",
+          "=",
+          "buttonInLink"
+        ],
         [
           "standardResult.instances.0.location.doc",
           "=",
@@ -75,12 +80,12 @@
         [
           "standardResult.instances.0.location.type",
           "=",
-          "box"
+          "selector"
         ],
         [
-          "standardResult.instances.0.location.spec.x",
-          ">",
-          0
+          "standardResult.instances.0.location.spec",
+          "=",
+          "#buttonInLink"
         ],
         [
           "standardResult.instances.0.excerpt",

package/validation/tests/jobs/filter.json

@@ -55,7 +55,7 @@
         [
           "standardResult.totals.1",
           "=",
-          7
+          0
         ],
         [
           "standardResult.instances.0.ruleID",
@@ -65,7 +65,7 @@
         [
           "standardResult.instances.0.what",
           "i",
-          ": 5"
+          "Element has"
         ],
         [
           "standardResult.instances.0.tagName",
@@ -127,7 +127,12 @@
         [
           "standardResult.totals.1",
           "=",
-          7
+          0
+        ],
+        [
+          "standardResult.instances.length",
+          "=",
+          1
         ],
         [
           "standardResult.instances.0.ruleID",
@@ -139,20 +144,10 @@
           "i",
           "Elements have"
         ],
-        [
-          "standardResult.instances.1.ordinalSeverity",
-          "=",
-          1
-        ],
         [
           "standardResult.instances.0.count",
           "=",
           2
-        ],
-        [
-          "standardResult.instances.1.count",
-          "=",
-          7
         ]
       ],
       "rules": [

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

@@ -10,7 +10,7 @@
     <main>
       <h1>Page with embedded interactive elements</h1>
       <p>All of the following embeddings violate the HTML specification for <a href="https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-a-element">links</a> or <a href="https://html.spec.whatwg.org/multipage/form-elements.html#the-button-element">buttons</a>.</p>
-      <p>Bug 1. This link to <a href="https://en.wikipedia.org/wiki/Button">information about <button type="button">buttons</button> like this</a> contains one.</p>
+      <p>Bug 1. This link to <a href="https://en.wikipedia.org/wiki/Button">information about <button id="buttonInLink" type="button">buttons</button> like this</a> contains one.</p>
       <p>Bug 2. This link to <a href="https://en.wikipedia.org/wiki/Input_method">information about checkboxes such as <input type="checkbox" aria-label="yes or no"> this</a> contains one.</p>
       <p>Bug 3. This link to <a href="https://en.wikipedia.org/wiki/Drop-down_list">information about drop-down lists such as <select aria-label="choose one"><option>A</option><option>B</option></select></a> contains one.</p>
       <p>Bugs 4 and 5. This link to <a href="https://en.wikipedia.org/wiki/HTML">information about HTML text inputs (<input type="text" aria-label="input">), <button type="button">buttons</button>, etc.</a> contains a text input and a button.</p>