testaro 22.0.0 → 24.0.0

package/testaro/bulk.js

@@ -19,15 +19,18 @@ exports.reporter = async page => {
   const visiblesLoc = await page.locator('body :visible');
   const visibleLocs = await visiblesLoc.all();
   data.visibleElements = visibleLocs.length;
-  const count = Math.round(data.visibleElements / 400);
+  const severity = Math.min(4, Math.round(data.visibleElements / 400));
+  const totals = [0, 0, 0, 0];
+  if (severity) {
+    totals[severity - 1] = 1;
+  }
   return {
     data,
-    totals: [count, 0, 0, 0],
+    totals,
     standardInstances: data.visibleElements < 200 ? [] : [{
       ruleID: 'bulk',
       what: 'Page contains a large number of visible elements',
-      count,
-      ordinalSeverity: 0,
+      ordinalSeverity: severity - 1,
       tagName: 'HTML',
       id: '',
       location: {

package/testaro/focOp.js

@@ -2,183 +2,48 @@
   focOp
   Related to Tenon rule 190.
 
-  This test reports discrepancies 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, has an operable tag name ('A',
-  'BUTTON', 'IFRAME', 'INPUT', 'SELECT', 'TEXTAREA'), has an interactive explicit role (button,
-  link, checkbox, switch, input, textbox, searchbox, combobox, option, treeitem, radio, slider,
-  spinbutton, menuitem, menuitemcheckbox, composite, grid, select, listbox, menu, menubar, tree,
-  tablist, tab, gridcell, radiogroup, treegrid, widget, or scrollbar), or has an 'onclick'
-  attribute. The test considers an element Tab-focusable if its tabIndex property has the value 0.
+  This test reports Tab-focusable elements that are not operable. The standard practice is to make
+  focusable elements operable. If focusable elements are not operable, users are likely to be
+  surprised that nothing happens when they try to operate such elements. The test considers an
+  element operable if it has a non-inherited pointer cursor and is not a 'LABEL' element, has an
+  operable tag name, has an interactive explicit role, or has an 'onclick' attribute. The test
+  considers an element Tab-focusable if its tabIndex property has the value 0.
 */
 
 // ########## IMPORTS
 
-// Module to get locator data.
-const {getLocatorData} = require('../procs/getLocatorData');
+// Module to perform common operations.
+const {init, report} = require('../procs/testaro');
+// Module to get operabilities.
+const {isOperable} = require('../procs/operable');
 
 // ########## FUNCTIONS
 
+// 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 = [];
-  // Identify the operable tag names.
-  const opTags = new Set(['A', 'BUTTON', 'IFRAME', 'INPUT', 'SELECT', 'TEXTAREA']);
-  // Identify the operable roles.
-  const opRoles = new Set([
-    'button',
-    'checkbox',
-    'combobox',
-    'composite',
-    'grid',
-    'gridcell',
-    'input',
-    'link',
-    'listbox',
-    'menu',
-    'menubar',
-    'menuitem',
-    'menuitemcheckbox',
-    'option',
-    'radio',
-    'radiogroup',
-    'scrollbar',
-    'searchbox',
-    'select',
-    'slider',
-    'spinbutton',
-    'switch',
-    'tab',
-    'tablist',
-    'textbox',
-    'tree',
-    'treegrid',
-    'treeitem',
-    'widget',
-  ]);
-  // Get a locator for all body elements.
-  const locAll = page.locator('body *');
-  const locsAll = await locAll.all();
-  // For each of them:
-  for (const loc of locsAll) {
-    // Get data on it.
-    const focOpData = await loc.evaluate(element => {
-      // Tab index.
-      const {tabIndex} = element;
-      // Cursor.
-      let hasPointer = false;
-      if (element.tagName !== 'LABEL') {
-        const styleDec = window.getComputedStyle(element);
-        hasPointer = styleDec.cursor === 'pointer';
-        // If the cursor is a pointer:
-        if (hasPointer) {
-          // Disregard this if the only reason is inheritance.
-          element.parentElement.style.cursor = 'default';
-          hasPointer = styleDec.cursor === 'pointer';
-        }
-      }
-      const {tagName} = element;
-      return {
-        tabIndex,
-        hasPointer,
-        tagName
-      };
-    });
-    focOpData.onClick = await loc.getAttribute('onclick') !== null;
-    focOpData.role = await loc.getAttribute('role') || '';
-    focOpData.isFocusable = focOpData.tabIndex === 0;
-    focOpData.isOperable = focOpData.hasPointer
-    || opTags.has(focOpData.tagName)
-    || focOpData.onClick
-    || opRoles.has(focOpData.role);
-    // If it is focusable or operable but not both:
-    if (focOpData.isFocusable !== focOpData.isOperable) {
-      // Get more data on it.
-      const elData = await getLocatorData(loc);
-      // Add to the standard result.
-      const howOperable = [];
-      if (opTags.has(focOpData.tagName)) {
-        howOperable.push(`tag name ${focOpData.tagName}`);
-      }
-      if (focOpData.hasPointer) {
-        howOperable.push('pointer cursor');
-      }
-      if (focOpData.onClick) {
-        howOperable.push('click listener');
-      }
-      if (opRoles.has(focOpData.role)) {
-        howOperable.push(`role ${focOpData.role}`);
-      }
-      const gripe = focOpData.isFocusable
-        ? 'Tab-focusable but not operable'
-        : `operable (${howOperable.join(', ')}) but not Tab-focusable`;
-      const ordinalSeverity = focOpData.isFocusable ? 2 : 3;
-      totals[ordinalSeverity]++;
-      if (withItems) {
-        standardInstances.push({
-          ruleID: 'focOp',
-          what: `Element is ${gripe}`,
-          ordinalSeverity,
-          tagName: elData.tagName,
-          id: elData.id,
-          location: elData.location,
-          excerpt: elData.excerpt
-        });
+  // Initialize the locators and result.
+  const all = await init(page, 'body *');
+  all.result.data.focusableCount = 0;
+  // For each locator:
+  for (const loc of all.allLocs) {
+    // Get whether its element is focusable.
+    const isFocusable = await loc.evaluate(el => el.tabIndex === 0);
+    // If it is:
+    if (isFocusable) {
+      // Add this to the report.
+      all.result.data.focusableCount++;
+      // Get whether it is operable.
+      const howOperable = await isOperable(loc);
+      // If it is not:
+      if (! howOperable.length) {
+        // Add the locator to the array of violators.
+        all.locs.push(loc);
       }
     }
   }
-  // If itemization is not required:
-  if (! withItems) {
-    // Add summary instances to the standard result.
-    if (totals[2]) {
-      standardInstances.push({
-        ruleID: 'focOp',
-        what: 'Tab-focusable elements are inoperable',
-        count: totals[2],
-        ordinalSeverity: 2,
-        tagName: '',
-        id: '',
-        location: {
-          doc: '',
-          type: '',
-          spec: ''
-        },
-        excerpt: ''
-      });
-    }
-    if (totals[3]) {
-      standardInstances.push({
-        ruleID: 'focOp',
-        what: 'Operable elements are not Tab-focusable',
-        count: totals[3],
-        ordinalSeverity: 3,
-        tagName: '',
-        id: '',
-        location: {
-          doc: '',
-          type: '',
-          spec: ''
-        },
-        excerpt: ''
-      });
-    }
-  }
-  // Reload the page.
-  try {
-    await page.reload({timeout: 15000});
-  }
-  catch(error) {
-    console.log('ERROR: page reload timed out');
-  }
-  // Return the standard result.
-  return {
-    data,
-    totals,
-    standardInstances
-  };
+  // Populate and return the result.
+  const whats = [
+    'Element is Tab-focusable but not operable', 'Elements are Tab-focusable but not operable'
+  ];
+  return await report(withItems, all, 'focOp', whats, 2);
 };

package/testaro/opFoc.js

@@ -0,0 +1,50 @@
+/*
+  opFoc
+  Related to Tenon rule 190.
+
+  This test reports operable elements that are not Tab-focusable. The standard practice is to make
+  operable elements focusable. If operable elements are not focusable, users who navigate with a
+  keyboard 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, has an operable tag name, has
+  an interactive explicit role, or has an 'onclick' attribute. The test considers an element
+  Tab-focusable if its tabIndex property has the value 0.
+*/
+
+// ########## IMPORTS
+
+// Module to perform common operations.
+const {init, report} = require('../procs/testaro');
+// Module to get operabilities.
+const {isOperable} = require('../procs/operable');
+
+// ########## FUNCTIONS
+
+// Runs the test and returns the result.
+exports.reporter = async (page, withItems) => {
+  // Initialize the locators and result.
+  const all = await init(page, 'body *');
+  all.result.data.operableCount = 0;
+  // For each locator:
+  for (const loc of all.allLocs) {
+    // Get whether and, if so, how its element is operable.
+    const operabilities = await isOperable(loc);
+    // If it is:
+    if (operabilities.length) {
+      // Add this to the report.
+      all.result.data.operableCount++;
+      // Get whether it is focusable.
+      const isFocusable = await loc.evaluate(el => el.tabIndex === 0);
+      // If it is not:
+      if (! isFocusable) {
+        // Add the locator to the array of violators.
+        all.locs.push([loc, operabilities.join(', ')]);
+      }
+    }
+  }
+  // Populate and return the result.
+  const whats = [
+    'Element is operable (__param__) but not Tab-focusable',
+    'Elements are operable but not Tab-focusable'
+  ];
+  return await report(withItems, all, 'opFoc', whats, 3);
+};

package/tests/testaro.js

@@ -3,7 +3,7 @@
   This test implements the Testaro evaluative rules.
 */
 
-// CONSTANTS
+// ######## CONSTANTS
 
 const evalRules = {
   allCaps: 'leaf elements with entirely upper-case text longer than 7 characters',
@@ -19,7 +19,7 @@ const evalRules = {
   filter: 'filter styles on elements',
   focAll: 'discrepancies between focusable and Tab-focused elements',
   focInd: 'missing and nonstandard focus indicators',
-  focOp: 'discrepancies between focusability and operability',
+  focOp: 'Tab-focusable elements that are not operable',
   focVis: 'links that are invisible when focused',
   headEl: 'invalid elements within the head',
   headingAmb: 'same-level sibling headings with identical texts',
@@ -36,6 +36,7 @@ const evalRules = {
   miniText: 'text smaller than 11 pixels',
   motion: 'motion without user request',
   nonTable: 'table elements used for layout',
+  opFoc: 'Operable elements that are not Tab-focusable',
   pseudoP: 'adjacent br elements suspected of nonsemantically simulating p elements',
   radioSet: 'radio buttons not grouped into standard field sets',
   role: 'invalid and native-replacing explicit roles',
@@ -72,11 +73,11 @@ exports.reporter = async (page, options) => {
     && rules.slice(1).every(rule => evalRules[rule] || etcRules[rule])
   ) {
     // For each rule invoked:
-    const realRules = rules[0] === 'y'
+    const calledRules = rules[0] === 'y'
       ? rules.slice(1)
       : Object.keys(evalRules).filter(ruleID => ! rules.slice(1).includes(ruleID));
     const testTimes = [];
-    for (const rule of realRules) {
+    for (const rule of calledRules) {
       // Initialize an argument array.
       const ruleArgs = [page, withItems];
       // If the rule has extra arguments:
@@ -93,17 +94,19 @@ exports.reporter = async (page, options) => {
       console.log(`>>>>>> ${rule} (${what})`);
       try {
         const startTime = Date.now();
-        const report = await require(`../testaro/${rule}`).reporter(... ruleArgs);
+        const ruleReport = await require(`../testaro/${rule}`).reporter(... ruleArgs);
+        // Add data from the test to the result.
         const endTime = Date.now();
         testTimes.push([rule, Math.round((endTime - startTime) / 1000)]);
-        Object.keys(report).forEach(key => {
-          data.rules[rule][key] = report[key];
-          if (report.prevented) {
-            data.preventions.push(rule);
-          }
+        Object.keys(ruleReport).forEach(key => {
+          data.rules[rule][key] = ruleReport[key];
         });
+        data.rules[rule].totals = data.rules[rule].totals.map(total => Math.round(total));
+        if (ruleReport.prevented) {
+          data.preventions.push(rule);
+        }
         // If testing is to stop after a failure and the page failed the test:
-        if (stopOnFail && report.totals.some(total => total)) {
+        if (stopOnFail && ruleReport.totals.some(total => total)) {
           // Stop testing.
           break;
         }