testaro 60.15.1 → 60.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "testaro",
-  "version": "60.15.1",
+  "version": "60.16.0",
   "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/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>