testaro 18.11.0 → 18.12.0

package/package.json

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

package/testaro/targetSize.js

@@ -6,89 +6,44 @@
 
 // ########## IMPORTS
 
-// Module to get locator data.
-const {getLocatorData} = require('../procs/getLocatorData');
+// Module to perform common operations.
+const {init, report} = require('../procs/testaro');
 // Module to classify links.
 const {isInlineLink} = require('../procs/isInlineLink');
 
 // ########## FUNCTIONS
 
+// Runs the test and returns the result.
 exports.reporter = async (page, withItems) => {
-  // Initialize the result.
-  const data = {};
-  const totals = [0, 0, 0, 0];
-  const standardInstances = [];
-  // Get locators for all eligible elements.
-  const nonlinkLocAll = page.locator('button, input');
-  const nonlinkLocsAll = await nonlinkLocAll.all();
-  const linkLocAll = page.locator('a');
-  const linkLocsAll = await linkLocAll.all();
-  const locs = nonlinkLocsAll;
-  for (const loc of linkLocsAll) {
-    if (! await isInlineLink(loc)) {
-      locs.push(loc);
-    }
-  }
-  // For each of them:
-  for (const loc of locs) {
-    // Get whether it violates the rule, and, if so, how.
-    const howBad = await loc.evaluate(element => {
-      const width = element.offsetWidth;
-      const height = element.offsetHeight;
-      if (width < 44 || height < 44) {
-        return {
-          width,
-          height
-        };
-      }
-      else {
-        return null;
-      }
+  // Initialize the locators and result.
+  const all = await init(page, 'a, button, input');
+  // For each locator:
+  for (const loc of all.allLocs) {
+    // Get the size of its element, if small.
+    const sizeData = await loc.evaluate(el => {
+      const width = el.offsetWidth;
+      const height = el.offsetHeight;
+      const tagName = el.tagName;
+      return width < 44 || height < 44 ? {tagName, width, height} : null;
     });
-    // If so:
-    if (howBad) {
-      // Add to the totals.
-      totals[0]++;
-      // If itemization is required:
-      if (withItems) {
-        // Get data on the element.
-        const elData = await getLocatorData(loc);
-        // Add an instance to the result.
-        standardInstances.push({
-          ruleID: 'targetSize',
-          what:
-          `Interactive element is only ${howBad.width} pixels wide and ${howBad.height} pixels high`,
-          ordinalSeverity: 0,
-          tagName: elData.tagName,
-          id: elData.id,
-          location: elData.location,
-          excerpt: elData.excerpt
-        });
+    // If it is small:
+    if (sizeData) {
+      // Get whether it violates the rule.
+      let isBad = true;
+      if (sizeData.tagName === 'A') {
+        isBad = await isInlineLink(loc);
+      }
+      // If it does:
+      if (isBad) {
+        // Add the locator to the array of violators.
+        all.locs.push([loc, `${sizeData.width} wide by ${sizeData.height} high`]);
       }
     }
   }
-  // If itemization is not required:
-  if (! withItems) {
-    // Add a summary instance to the result.
-    standardInstances.push({
-      ruleID: 'targetSize',
-      what: 'Interactive elements are smaller than 44 pixels wide and high',
-      ordinalSeverity: 0,
-      count: totals[0],
-      tagName: '',
-      id: '',
-      location: {
-        doc: '',
-        type: '',
-        spec: ''
-      },
-      excerpt: ''
-    });
-  }
-  // Return the result.
-  return {
-    data,
-    totals,
-    standardInstances
-  };
+  // Populate and return the result.
+  const whats = [
+    'Interactive element pixel size (__param__) is less than 44 by 44',
+    'Interactive elements are smaller than 44 pixels wide and high'
+  ];
+  return await report(withItems, all, 'targetSize', whats, 1);
 };

package/testaro/titledEl.js

@@ -6,61 +6,19 @@
 
 // ########## IMPORTS
 
-// Module to get locator data.
-const {getLocatorData} = require('../procs/getLocatorData');
+// Module to perform common operations.
+const {init, report} = require('../procs/testaro');
 
 // ########## FUNCTIONS
 
+// Runs the test and returns the result.
 exports.reporter = async (page, withItems) => {
-  // Initialize the result.
-  const data = {};
-  const standardInstances = [];
-  // Get locators for inappropriate elements with title attributes.
-  const locAll = page.locator('[title]:not(input, button, textarea, select, iframe):visible');
-  const locs = await locAll.all();
-  // For each of them:
-  for (const loc of locs) {
-    // If itemization is required:
-    if (withItems) {
-      // Get data on the element.
-      const elData = await getLocatorData(loc);
-      const rawTitle = await loc.getAttribute('title');
-      const title = rawTitle.replace(/\s+/g, ' ').slice(0, 50);
-      // Add an instance to the result.
-      standardInstances.push({
-        ruleID: 'titledEl',
-        what: `Ineligible element has a title (${title})`,
-        ordinalSeverity: 2,
-        tagName: elData.tagName,
-        id: elData.id,
-        location: elData.location,
-        excerpt: elData.excerpt
-      });
-    }
-  }
-  // Define the totals.
-  const totals = [0, 0, locs.length, 0];
-  // If itemization is not required:
-  if (! withItems) {
-    // Add a summary instance to the result.
-    standardInstances.push({
-      ruleID: 'titledEl',
-      what: 'Ineligible elements have title attributes',
-      ordinalSeverity: 2,
-      count: totals[2],
-      tagName: '',
-      id: '',
-      location: {
-        doc: '',
-        type: '',
-        spec: ''
-      },
-      excerpt: ''
-    });
-  }
-  return {
-    data,
-    totals,
-    standardInstances
-  };
+  // Initialize the locators and result.
+  const all = await init(page, '[title]:not(input, button, textarea, select, iframe):visible');
+  all.locs = all.allLocs;
+  // Populate and return the result.
+  const whats = [
+    'Ineligible element has a title attribute', 'Ineligible elements have title attributes'
+  ];
+  return await report(withItems, all, 'titledEl', whats, 2);
 };

package/validation/tests/jobs/targetSize.json

@@ -23,12 +23,12 @@
         [
           "standardResult.totals.0",
           "=",
-          4
+          0
         ],
         [
           "standardResult.totals.1",
           "=",
-          0
+          4
         ],
         [
           "standardResult.instances.0.ruleID",
@@ -38,12 +38,12 @@
         [
           "standardResult.instances.0.what",
           "i",
-          "is only"
+          "is less than"
         ],
         [
           "standardResult.instances.0.ordinalSeverity",
           "=",
-          0
+          1
         ],
         [
           "standardResult.instances.0.tagName",
@@ -78,7 +78,7 @@
         [
           "standardResult.instances.2.what",
           "i",
-          "is only"
+          "is less than"
         ],
         [
           "standardResult.instances.2.tagName",
@@ -102,8 +102,8 @@
         ],
         [
           "standardResult.instances.3.excerpt",
-          "i",
-          "Wikimedia"
+          "=",
+          "Wikimedia Foundation"
         ]
       ],
       "rules": [
@@ -118,7 +118,7 @@
       "stopOnFail": true,
       "expect": [
         [
-          "standardResult.totals.0",
+          "standardResult.totals.1",
           "=",
           4
         ],
@@ -140,7 +140,7 @@
         [
           "standardResult.instances.0.ordinalSeverity",
           "=",
-          0
+          1
         ],
         [
           "standardResult.instances.0.count",

package/validation/tests/targets/targetSize/index.html

@@ -43,6 +43,15 @@
       <ul>
         <li style="min-height: 3rem"><a class="deep" href="https://w3c.org">World Wide Web Consortium</a></li>
         <li><a href="https://wikimedia.org">Wikimedia Foundation</a></li>
+      </ul>
+      <ul>
+        <li style="min-height: 3rem">W3C: <a class="deep" href="https://w3c.org">World Wide Web Consortium</a></li>
+        <li>WF: <a href="https://wikimedia.org">Wikimedia Foundation</a></li>
+      </ul>
+      <h2>Conclusion</h2>
+      <p>2 buttons are too small.</p>
+      <p>1 input is too small.</p>
+      <p>1 link is too small.</p>
     </main>
   </body>
 </html>