testaro 14.10.0 → 14.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "testaro",
-  "version": "14.10.0",
+  "version": "14.12.0",
   "description": "Automation of accessibility testing",
   "main": "index.js",
   "scripts": {

package/testaro/focOp.js

@@ -10,9 +10,12 @@
   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.
+  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.
 */
 exports.reporter = async (page, withItems) => {
   // Get data on focusability-operability-discrepant elements.
@@ -29,10 +32,6 @@ exports.reporter = async (page, withItems) => {
           onlyOperable: {
             total: 0,
             tagNames: {}
-          },
-          focusableAndOperable: {
-            total: 0,
-            tagNames: {}
           }
         }
       }
@@ -40,22 +39,59 @@ exports.reporter = async (page, withItems) => {
     if (withItems) {
       data.items = {
         onlyFocusable: [],
-        onlyOperable: [],
-        focusableAndOperable: []
+        onlyOperable: []
       };
     }
     // FUNCTION DEFINITIONS START
     // Returns data on an element’s operability and prevents it from propagating a pointer.
     const operabilityOf = element => {
+      // 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',
+      ]);
+      // Identify whether the element has a pointer cursor.
       const hasPointer = window.getComputedStyle(element).cursor === 'pointer';
+      // Identify the bases for considering an element operable.
       const opBases = [
         opTags.has(element.tagName),
         element.hasAttribute('onclick'),
+        opRoles.has(element.getAttribute('role')),
         hasPointer && element.tagName !== 'LABEL'
       ];
+      // If the element is operable:
       const result = {operable: opBases.some(basis => basis)};
       if (result.operable) {
+        // Add its data to its result.
         result.byTag = opBases[0];
         result.byOnClick = opBases[1];
         result.byPointer = opBases[2];
@@ -65,14 +101,14 @@ exports.reporter = async (page, withItems) => {
         // Change it to the browser default to prevent pointer propagation.
         element.style.cursor = 'default';
       }
+      // Return the result.
       return result;
     };
     // Adds facts about an element to data.
     const addFacts = (element, status, byTag, byOnClick, byPointer) => {
       const statusNames = {
         f: 'onlyFocusable',
-        o: 'onlyOperable',
-        b: 'focusableAndOperable'
+        o: 'onlyOperable'
       };
       const statusName = statusNames[status];
       data.totals.types[statusName].total++;
@@ -100,17 +136,12 @@ exports.reporter = async (page, withItems) => {
     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 {
+        const {operable} = operabilityOf(element);
+        // If it is not:
+        if (! operable) {
+          // Increment the total.
+          data.totals.total++;
           // Add its data to the result.
           addFacts(element, 'f');
         }
@@ -121,7 +152,7 @@ exports.reporter = async (page, withItems) => {
         const {operable, byTag, byOnClick, byPointer} = operabilityOf(element);
         // If it is:
         if (operable) {
-          // Increment the grand total.
+          // Increment the total.
           data.totals.total++;
           // Add its data to the result.
           addFacts(element, 'o', byTag, byOnClick, byPointer);

package/testaro/lineHeight.js

@@ -0,0 +1,113 @@
+/*
+  targetSize
+  Related to Tenon rule 144.
+  This test reports text nodes whose line heights are less than 1.5 times their font sizes.
+*/
+exports.reporter = async (page, withItems) => {
+  // Identify the text nodes with substandard line heights.
+  const data = await page.evaluate(() => {
+    // Initialize the result.
+    const data = [];
+    // Collapse any adjacent text nodes.
+    document.body.normalize();
+    // Remove the irrelevant text content.
+    const extraElements = Array.from(document.body.querySelectorAll('style, script, svg'));
+    extraElements.forEach(element => {
+      element.textContent = '';
+    });
+    // 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
+    // Create a collection of the text nodes.
+    const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT);
+    const textNodes = [];
+    let more = true;
+    while(more) {
+      if (walker.nextNode()) {
+        const nodeText = walker.currentNode.nodeValue;
+        const compactNodeText = compact(nodeText);
+        if (compactNodeText) {
+          textNodes.push(walker.currentNode);
+        }
+      }
+      else {
+        more = false;
+      }
+    }
+    // For each of them:
+    textNodes.forEach(textNode => {
+      // Get the font size and line height of its parent element.
+      const parentStyleDec = window.getComputedStyle(textNode.parentElement);
+      const parentFontSizeText = parentStyleDec.fontSize;
+      const parentLineHeightText = parentStyleDec.lineHeight;
+      const parentFontSizeNum = Number.parseFloat(parentFontSizeText);
+      const parentLineHeightNum = Number.parseFloat(parentLineHeightText);
+      // If the line height is substandard:
+      if (parentLineHeightNum < 1.5 * parentFontSizeNum) {
+        // Add data on the text node to the result.
+        const parentElement = textNode.parentElement;
+        let shortText = compact(textNode.nodeValue);
+        if (shortText.length > 400) {
+          shortText = `${shortText.slice(0, 200)} … ${shortText.slice(-200)}`;
+        }
+        data.push({
+          tagName: parentElement.tagName,
+          id: parentElement.id || '',
+          fontSize: parentFontSizeNum,
+          lineHeight: parentLineHeightNum,
+          text: shortText
+        });
+      }
+    });
+    return data;
+  });
+  // Initialize the result and standard result.
+  const totals = [0, data.length, 0, 0];
+  const standardInstances = [];
+  // If itemization is required:
+  if (withItems) {
+    // Add it to the standard result.
+    data.forEach(item => {
+      standardInstances.push({
+        ruleID: 'lineHeight',
+        what:
+        `Text line height ${item.lineHeight} px is less than 1.5 times its font size ${item.fontSize} px`,
+        ordinalSeverity: 1,
+        tagName: item.tagName,
+        id: item.id,
+        location: {
+          doc: '',
+          type: '',
+          spec: ''
+        },
+        excerpt: item.text
+      });
+    });
+  }
+  // Otherwise, i.e. if itemization is not required:
+  else {
+    // Add a summary instance to the standard result.
+    standardInstances.push({
+      ruleID: 'lineHeight',
+      what: 'Text line heights are less than 1.5 times their font sizes',
+      ordinalSeverity: 1,
+      count: data.length,
+      tagName: '',
+      id: '',
+      location: {
+        doc: '',
+        type: '',
+        spec: ''
+      },
+      excerpt: ''
+    });
+    // Delete the itemization from the result.
+    data.length = 0;
+  }
+  return {
+    data,
+    totals,
+    standardInstances
+  };
+};

package/testaro/linkExt.js

@@ -1,7 +1,8 @@
 /*
   linkExt
   Related to Tenon rule 218, but stricter.
-  This test reports links with target attributes with _blank values
+  This test reports links with target attributes with _blank values, because forcibly external links
+  risk miscommunication of the externality and remove control from the user.
 */
 exports.reporter = async (page, withItems) => {
   // Identify the links with target=_blank attributes.

package/testaro/targetSize.js

@@ -0,0 +1,103 @@
+/*
+  targetSize
+  Related to Tenon rule 152, but stricter.
+  This test reports buttons, inputs, and non-inline links with widths or heights smaller than 44 pixels.
+*/
+exports.reporter = async (page, withItems) => {
+  // Identify the buttons, inputs, and non-inline links smaller than 44 pixels.
+  const data = await page.$$eval(
+    // Identify all buttons, inputs, and links.
+    'button, input, a',
+    suspects => {
+      // Initialize the result.
+      const data = {
+        total: 0,
+        items: []
+      };
+      // 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
+      // Identify the buttons, inputs, and non-inline links.
+      const eligibles = suspects.filter(suspect => {
+        if (['BUTTON', 'INPUT'].includes(suspect.tagName)) {
+          return true;
+        }
+        else {
+          const parent = suspect.parentElement;
+          return (['DIV', 'P'].includes(parent.tagName) && parent.children.length === 1);
+        }
+      });
+      // For each of them:
+      eligibles.forEach(eligible => {
+        // If its size is substandard:
+        const styleDec = window.getComputedStyle(eligible);
+        const widthString = styleDec.width;
+        const widthNum = Number.parseFloat(widthString);
+        const heightString = styleDec.height;
+        const heightNum = Number.parseFloat(heightString);
+        if (widthNum < 44 || heightNum < 44) {
+          // Add it to the result.
+          data.total++;
+          data.items.push({
+            width: widthNum,
+            height: heightNum,
+            tagName: eligible.tagName,
+            id: eligible.id || '',
+            text: compact(eligible.textContent)
+          });
+        }
+      });
+      return data;
+    }
+  );
+  // Initialize the standard result.
+  const totals = [data.total, 0, 0, 0];
+  const standardInstances = [];
+  // If itemization was requested:
+  if (withItems) {
+    // Add it to the standard result.
+    data.items.forEach(item => {
+      standardInstances.push({
+        ruleID: 'targetSize',
+        what:
+        `Interactive element has a substandard size (${item.width} px wide, ${item.height} px high)`,
+        ordinalSeverity: 0,
+        tagName: item.tagName,
+        id: item.id,
+        location: {
+          doc: '',
+          type: '',
+          spec: ''
+        },
+        excerpt: item.text
+      });
+    });
+  }
+  // Otherwise, i.e. if itemization was not requested:
+  else {
+    // Delete the items from the result.
+    data.items = [];
+    // Add a summary instance to the standard result.
+    standardInstances.push({
+      ruleID: 'targetSize',
+      what: 'Interactive elements are smaller than 44 px wide and high',
+      ordinalSeverity: 0,
+      count: data.total,
+      tagName: '',
+      id: '',
+      location: {
+        doc: '',
+        type: '',
+        spec: ''
+      },
+      excerpt: ''
+    });
+  }
+  // Return the result and standard result.
+  return {
+    data,
+    totals,
+    standardInstances
+  };
+};

package/tests/testaro.js

@@ -19,6 +19,7 @@ const evalRules = {
   focVis: 'links that are invisible when focused',
   hover: 'hover-caused content changes',
   labClash: 'labeling inconsistencies',
+  lineHeight: 'text with a line height less than 1.5 times its font size',
   linkExt: 'links that automatically open new windows',
   linkTo: 'links without destinations',
   linkUl: 'missing underlines on inline links',
@@ -30,6 +31,7 @@ const evalRules = {
   role: 'invalid and native-replacing explicit roles',
   styleDiff: 'style inconsistencies',
   tabNav: 'nonstandard keyboard navigation between elements with the tab role',
+  targetSize: 'buttons, inputs, and non-inline links smaller than 44 pixels wide and high',
   titledEl: 'title attributes on inappropriate elements',
   zIndex: 'non-default Z indexes'
 };