testaro 60.15.1 → 60.16.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "testaro",
-  "version": "60.15.1",
+  "version": "60.16.1",
   "description": "Run 1000 web accessibility tests from 11 tools and get a standardized report",
   "main": "index.js",
   "scripts": {

package/testaro/secHeading.js

@@ -46,7 +46,7 @@ exports.reporter = async (page, withItems) => {
       }
     }
   };
-  const selector = 'SECTION, ARTICLE, NAV, ASIDE, MAIN';
+  const selector = 'section, article, nav, aside, main';
   const whats = 'First child headings of sectioning containers are deeper than others';
   return await doTest(
     page, withItems, 'secHeading', selector, whats, 0, null, getBadWhat.toString()

package/testaro/targetSmall.js

@@ -48,15 +48,15 @@ exports.reporter = async (page, withItems) => {
     const instances = [];
     // For each visible pointer target:
     visiblePTs.forEach((element, index) => {
+      const [centerX, centerY] = ptsData[index];
+      const otherPTsData = ptsData.toSpliced(index, 1);
       // Get the minimum of the vertical distances of its centerpoint from those of the others.
-      const minYDiff = ptsData[index][1] - Math.abs(
-        Math.min(...ptsData.splice(index, 1).map(ptData => ptData[1]))
-      );
+      const minYDiff = Math.min(...otherPTsData.map(ptData => Math.abs(centerY - ptData[1])));
       // If it is close enough to make a violation possible:
       if (minYDiff < 44) {
         // Get the centerpoint coordinates of those within that vertical distance.
-        const yNearPTsData = ptsData.splice(index, 1).filter(
-          ptData => Math.abs(ptData[1] - ptsData[index][1]) < 44
+        const yNearPTsData = otherPTsData.filter(
+          ptData => Math.abs(ptData[1] - centerY) < 44
         );
         // Get the minimum of their planar distances.
         const minPlanarDistance = Math.min(...yNearPTsData.map(ptData => {

package/testaro/textSem.js

@@ -13,21 +13,32 @@
   Report semantically vague inline elements: i, b, small
 */
 
-const {init, getRuleResult} = require('../procs/testaro');
+// IMPORTS
 
+const {doTest} = require('../procs/testaro');
+
+// FUNCTIONS
+
+// Runs the test and returns the result.
 exports.reporter = async (page, withItems) => {
-  const all = await init(100, page, 'i, b, small');
-  for (const loc of all.allLocs) {
-    // Consider only elements with visible text
-    const isBad = await loc.evaluate(el => {
-      const text = (el.textContent || '').trim();
-      return !!text;
+  const getBadWhat = element => {
+    const isVisible = element.checkVisibility({
+      contentVisibilityAuto: true,
+      opacityProperty: true,
+      visibilityProperty: true
     });
-    if (isBad) all.locs.push(loc);
-  }
-  const whats = [
-    'Element is semantically vague',
-    'Semantically vague elements i, b, and/or small are used'
-  ];
-  return await getRuleResult(withItems, all, 'textSem', whats, 0);
+    // If the element is visible:
+    if (isVisible) {
+      // If it has text content:
+      if (element.textContent.trim().replace(/\s/g, '')) {
+        // Return a violation description.
+        return `Element type (${element.tagName}) is semantically vague`;
+      }
+    }
+  };
+  const selector = 'i, b, small';
+  const whats = 'Semantically vague elements i, b, and/or small are used';
+  return await doTest(
+    page, withItems, 'textSem', selector, whats, 0, null, getBadWhat.toString()
+  );
 };

package/testaro/zIndex.js

@@ -1,5 +1,6 @@
 /*
   © 2021–2023 CVS Health and/or one of its affiliates. All rights reserved.
+  © 2025 Jonathan Robert Pool
 
   Licensed under the MIT License. See LICENSE file at the project root or
   https://opensource.org/license/mit/ for details.
@@ -9,42 +10,34 @@
 
 /*
   zIndex
-  This test reports elements with non-auto z indexes. It assumes that pages are most accessible
+  This test reports elements with abnormal Z indexes. It assumes that pages are most accessible
   when they do not require users to perceive a third dimension (depth). Layers, popups, and dialogs
   that cover other content make it difficult for some or all users to interpret the content and
-  know what parts of the content can be acted on. Layering also complicates accessibility control.
+  know what parts of the content can be acted on. Layering also complicates accessibility testing.
   Tests for visibility of focus, for example, may fail if incapable of detecting that a focused
-  element is covered by another element.
+  element is covered by another element. Z indexes other than auto and 0 are considered abnormal.
 */
 
-// ########## IMPORTS
+// IMPORTS
 
-// Module to perform common operations.
-const {init, getRuleResult} = require('../procs/testaro');
+const {doTest} = require('../procs/testaro');
 
-// ########## FUNCTIONS
+// FUNCTIONS
 
 // Runs the test and returns the result.
 exports.reporter = async (page, withItems) => {
-  // Initialize the locators and result.
-  const all = await init(100, page, 'body *');
-  // For each locator:
-  for (const loc of all.allLocs) {
-    // Get whether its element violates the rule.
-    const badZ = await loc.evaluate(el => {
-      const styleDec = window.getComputedStyle(el);
-      const {zIndex} = styleDec;
-      return zIndex !== 'auto' ? zIndex : null;
-    });
-    // If it does:
-    if (badZ) {
-      // Add the locator to the array of violators.
-      all.locs.push([loc, badZ]);
+  const getBadWhat = element => {
+    // Get whether the element violates the rule.
+    const styleDec = window.getComputedStyle(element);
+    const {zIndex} = styleDec;
+    // If the Z index of the element is neither 'auto' nor 0:
+    if (! ['auto', '0'].includes(zIndex)) {
+      // Return a violation description.
+      return `z-index style property of the element is ${zIndex}`;
     }
-  }
-  // Populate and return the result.
-  const whats = [
-    'Element has a non-default Z index (__param__)', 'Elements have non-default Z indexes'
-  ];
-  return await getRuleResult(withItems, all, 'zIndex', whats, 0);
+  };
+  const whats = 'Elements have non-default Z indexes';
+  return await doTest(
+    page, withItems, 'zIndex', 'body *', whats, 0, null, getBadWhat.toString()
+  );
 };

package/validation/tests/jobProperties/targetSmall.json

@@ -5,7 +5,7 @@
     {
       "type": "launch",
       "target": {
-        "url": "file://validation/tests/targets/targetSize/index.html",
+        "url": "file://validation/tests/targetSmall/index.html",
         "what": "page with variously sized interaction targets"
       }
     },

package/validation/tests/jobProperties/targetTiny.json

@@ -5,7 +5,7 @@
     {
       "type": "launch",
       "target": {
-        "url": "file://validation/tests/targets/targetSize/index.html",
+        "url": "file://validation/tests/targets/targetSmall/index.html",
         "what": "page with variously sized interaction targets"
       }
     },

package/validation/tests/targets/{targetSize → targetSmall}/index.html

@@ -11,7 +11,7 @@
 <html lang="en-US">
   <head>
     <meta charset="utf-8">
-    <title>Page with variously sized interaction targets</title>
+    <title>Page with variously sized and spaced interaction targets</title>
     <meta name="description" content="tester">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <style>
@@ -34,6 +34,10 @@
         padding-top: 0;
         padding-bottom: 0;
       }
+      button.tiny {
+        width: 0.25rem;
+        height: 0.25rem;
+      }
       #defaultbutton {
         min-height: 25px;
       }
@@ -49,9 +53,12 @@
       <h1>Page with variously sized interaction targets</h1>
       <h2>Buttons</h2>
       <p>Here are three buttons:</p>
-      <p><button style="min-width: 3rem; min-height: 3rem" type="button">Big enough</button></p>
-      <p><button id="defaultbutton" type="button">Default (small)</button></p>
-      <p><button style="height: 1.25rem" type="button">Tiny</button></p>
+      <p><button style="min-width: 3rem; min-height: 3rem" type="button">Very big</button></p>
+      <p><button id="defaultbutton" type="button">Big</button></p>
+      <p><button style="height: 1.25rem" type="button">Moderate</button></p>
+      <p>Here are three more that are tiny:</p>
+      <p><button class="tiny" type="button">X</button><button class="tiny" type="button">Y</button><button class="tiny" type="button">Z</button></p>
+      <p><button style="width: 0.5rem; height: 0.5rem" type="button"></button></p>
       <h2>Inputs</h2>
       <p>Here are three inputs:</p>
       <p><label>Big box: <input style="min-width: 3rem; min-height: 3rem" size="20" maxlength="30"></label></p>
@@ -68,9 +75,7 @@
         <li style="min-height: 3rem">W3C: <a class="deep" href="https://w3c.org">World Wide Web Consortium (big)</a></li>
         <li>WF: <a href="https://wikimedia.org">Wikimedia Foundation (small but inline)</a></li>
         <li>WF: <a href="https://wikimedia.org">Wikimedia Foundation (tiny but inline)</a></li>
-        <h2>Violations</h2>
-        <p>Small: 2 buttons, 2 inputs, 2 links</p>
-        <p>Tiny: 1 button, 1 input, 1 link</p>
+        <p>Violations to be determined after refactoring and redefinition</p>
       </ul>
     </main>
   </body>