testaro 23.0.0 → 24.0.1

package/package.json

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

package/procs/operable.js

@@ -0,0 +1,85 @@
+/*
+  operable
+
+  Returns whether the element of a locator is operable., i.e. 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.
+*/
+
+// ########## FUNCTIONS
+
+// Gets whether an element is operable.
+exports.isOperable = async loc => {
+  // Get whether and, if so, how the element is operable.
+  const operabilities = await loc.evaluate(el => {
+    // Operable tag names.
+    const opTags = new Set(['A', 'BUTTON', 'IFRAME', 'INPUT', 'SELECT', 'TEXTAREA']);
+    // 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',
+    ]);
+    // Initialize the operabilities.
+    const opHow = [];
+    // If the element is not a label and has a non-inherited pointer cursor:
+    let hasPointer = false;
+    if (el.tagName !== 'LABEL') {
+      const styleDec = window.getComputedStyle(el);
+      hasPointer = styleDec.cursor === 'pointer';
+      if (hasPointer) {
+        el.parentElement.style.cursor = 'default';
+        hasPointer = styleDec.cursor === 'pointer';
+      }
+    }
+    if (hasPointer) {
+      // Add this to the operabilities.
+      opHow.push('pointer cursor');
+    }
+    // If the element is clickable:
+    if (el.onClick) {
+      // Add this to the operabilities.
+      opHow.push('click listener');
+    }
+    // If the element has an operable explicit role:
+    const role = el.getAttribute('role');
+    if (opRoles.has(role)) {
+      // Add this to the operabilities.
+      opHow.push(`role ${role}`);
+    }
+    // If the element has an operable type:
+    const tagName = el.tagName;
+    if (opTags.has(tagName)) {
+      // Add this to the operabilities.
+      opHow.push(`tag name ${tagName}`);
+    }
+    return opHow;
+  });
+  return operabilities;
+};

package/testaro/focOp.js

@@ -2,183 +2,56 @@
   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';
-        }
+  // 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);
       }
-      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
-        });
-      }
-    }
-  }
-  // 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.
+  // Populate and return the result.
+  const whats = [
+    'Element is Tab-focusable but not operable', 'Elements are Tab-focusable but not operable'
+  ];
+  const testReport = await report(withItems, all, 'focOp', whats, 2);
+  // Reload the page, because isOperable() modified it.
   try {
     await page.reload({timeout: 15000});
   }
   catch(error) {
     console.log('ERROR: page reload timed out');
   }
-  // Return the standard result.
-  return {
-    data,
-    totals,
-    standardInstances
-  };
+  return testReport;
 };

package/testaro/opFoc.js

@@ -0,0 +1,58 @@
+/*
+  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'
+  ];
+  const testReport = await report(withItems, all, 'opFoc', whats, 3);
+  // Reload the page, because isOperable() modified it.
+  try {
+    await page.reload({timeout: 15000});
+  }
+  catch(error) {
+    console.log('ERROR: page reload timed out');
+  }
+  return testReport;
+};

package/tests/testaro.js

@@ -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',
@@ -99,11 +100,11 @@ exports.reporter = async (page, options) => {
         testTimes.push([rule, Math.round((endTime - startTime) / 1000)]);
         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);
-          }
         });
+        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 && ruleReport.totals.some(total => total)) {
           // Stop testing.