testaro 60.10.3 → 60.12.0

package/testaro/focAndOp.js

@@ -0,0 +1,146 @@
+/*
+  © 2021–2024 CVS Health and/or one of its affiliates. All rights reserved.
+  © 2025 Jonathan Robert Pool. All rights reserved.
+
+  MIT License
+
+  Permission is hereby granted, free of charge, to any person obtaining a copy
+  of this software and associated documentation files (the "Software"), to deal
+  in the Software without restriction, including without limitation the rights
+  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+  copies of the Software, and to permit persons to whom the Software is
+  furnished to do so, subject to the following conditions:
+
+  The above copyright notice and this permission notice shall be included in all
+  copies or substantial portions of the Software.
+
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+  SOFTWARE.
+*/
+
+/*
+  focAndOp
+  Related to Tenon rule 190.
+
+  This test reports discrepancies between Tab-focusability and operability. The standard practice
+  is to make focusable elements operable and operable elements focusable. If focusable elements are
+  not operable, users are likely to be surprised that nothing happens when they try to operate such
+  elements. Conversely, if operable elements are not focusable, users who navigate with a
+  keyboard are prevented from operating those elements.  The test considers an element
+  Tab-focusable if its tabIndex property has the value 0. 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.
+*/
+
+// IMPORTS
+
+const {doTest} = require('../procs/testaro');
+
+// FUNCTIONS
+
+// Runs the test and returns the result.
+exports.reporter = async (page, withItems) => {
+  // Define a violation function for execution in the browser.
+  const getBadWhat = element => {
+    // Get whether the element is visible.
+    const isVisible = element.checkVisibility({
+      contentVisibilityAuto: true,
+      opacityProperty: true,
+      visibilityProperty: true
+    });
+    // If so:
+    if (isVisible) {
+      // Get whether it is focusable.
+      const isFocusable = element.tabIndex === 0;
+      // Get the operable tagnames.
+      const opTags = new Set(['A', 'BUTTON', 'IFRAME', 'INPUT','OPTION', 'SELECT', 'TEXTAREA']);
+      // Get 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',
+      ]);
+      // Initialize the operabilities of the element.
+      const opHow = [];
+      let hasPointer = false;
+      // If the element is not a label:
+      if (element.tagName !== 'LABEL') {
+        const styleDec = window.getComputedStyle(element);
+        hasPointer = styleDec.cursor === 'pointer';
+        // If it has a pointer cursor:
+        if (hasPointer) {
+          // Neutralize the cursor style of the parent element of the element.
+          element.parentElement.style.cursor = 'default';
+          // Get whether, after this, the element still has a pointer cursor.
+          hasPointer = styleDec.cursor === 'pointer';
+          // Add this to the operabilities of the element.
+          opHow.push('pointer cursor');
+        }
+      }
+      // If the element has a click event listener:
+      if (element.onclick) {
+        // Add this to the operabilities.
+        opHow.push('click listener');
+      }
+      // If the element has an operable explicit role:
+      const role = element.getAttribute('role');
+      if (opRoles.has(role)) {
+        // Add this to the operabilities.
+        opHow.push(`role ${role}`);
+      }
+      // If the element has an operable tagname:
+      const tagName = element.tagName;
+      if (opTags.has(tagName)) {
+        // Add this to the operabilities.
+        opHow.push(`tagname ${tagName}`);
+      }
+      const isOperable = opHow.length > 0;
+      // If the element is focusable but not operable:
+      if (isFocusable && ! isOperable) {
+        // Return a severity and violation description.
+        return '2:Element is Tab-focusable but not operable';
+      }
+      // Otherwise, if it is operable but not focusable:
+      else if (isOperable && ! isFocusable) {
+        // Return a severity and violation description.
+        return `3:Element is operable (${opHow.join(', ')}) but not Tab-focusable`;
+      }
+    }
+  };
+  const whats = 'Elements are Tab-focusable but not operable or vice versa';
+  // Perform the test and return the result.
+  return doTest(
+    page, withItems, 'focAndOp', 'body *', whats, 2, null, getBadWhat.toString()
+  );
+};

package/testaro/focInd.js

@@ -1,5 +1,6 @@
 /*
   © 2021–2023 CVS Health and/or one of its affiliates. All rights reserved.
+  © 2025 Jonathan Robert Pool. All rights reserved.
 
   MIT License
 
@@ -41,90 +42,74 @@
   WARNING: This test fails to recognize outlines when run with firefox.
 */
 
-// ########## 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 *:visible');
-  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 has a nonstandard focus indicator.
-      const hasBadIndicator = await loc.evaluate(el => {
-        // Get the live style declaration of the element.
-        const styleDec = window.getComputedStyle(el);
-        // If the element has an outline:
+  // Define a violation function for execution in the browser.
+  const getBadWhat = element => {
+    // Get whether the element is visible.
+    const isVisible = element.checkVisibility({
+      contentVisibilityAuto: true,
+      opacityProperty: true,
+      visibilityProperty: true
+    });
+    // If so:
+    if (isVisible) {
+      // Get whether it is focusable.
+      const isFocusable = element.tabIndex === 0;
+      // If so:
+      if (isFocusable) {
+        // Get its live style declaration.
+        const styleDec = window.getComputedStyle(element);
+        // If the element has an outline before being focused:
         if (styleDec.outlineWidth !== '0px') {
-          // Return a violation.
-          return 'an outline when blurred';
+          // Return a violation description.
+          return 'Element is focusable but has an outline when blurred';
         }
-        // Otherwise, i.e. if the element has no outline:
-        else {
-          // Focus the element.
-          el.focus({preventScroll: true});
-          // If it now has no outline:
-          if (styleDec.outlineWidth === '0px') {
-            // Return this violation.
-            return 'no focus outline';
-          }
-          // Otherwise, if it now has an outline thinner than 2 pixels:
-          else if (Number.parseFloat(styleDec.outlineWidth) < 2) {
-            // Return this violation.
-            return 'a focus outline thinner than 2 pixels';
-          }
-          // Otherwise, if it now has a transparent outline:
-          else if (styleDec.outlineColor === 'rgba(0, 0, 0, 0)') {
-            // Return this violation.
-            return 'a transparent focus outline';
-          }
-          // Otherwise, if it now has a non-solid outline:
-          else if (styleDec.outlineStyle !== 'solid') {
-            // If the outline style exists:
-            if (styleDec.outlineStyle) {
-              // If the style is delegated to the user agent:
-              if (styleDec.outlineStyle === 'auto') {
-                // Return conformance.
-                return false;
-              }
-              // Otherwise, i.e. if the style is not delegated to the user agent:
-              else {
-                // Return this violation.
-                return `a focus outline with the ${styleDec.outlineStyle} instead of solid style`;
-              }
-            }
-            // Otherwise, i.e. if no outline style exists:
-            else {
-              // Return this violation.
-              return 'a focus outline with no style instead of solid style';
+        // Otherwise, i.e. if the element has no outline, focus the element.
+        element.focus({preventScroll: true});
+        // If it now has no outline:
+        if (styleDec.outlineWidth === '0px') {
+          // Return a violation description.
+          return 'Element when focused has no outline';
+        }
+        // Otherwise, if it now has an outline thinner than 2 pixels:
+        if (Number.parseFloat(styleDec.outlineWidth) < 2) {
+          // Return a violation description.
+          return 'Element when focused has an outline thinner than 2 pixels';
+        }
+        // Otherwise, if it now has a transparent outline:
+        if (styleDec.outlineColor === 'rgba(0, 0, 0, 0)') {
+          // Return a violation description.
+          return 'Element when focused has a transparent outline';
+        }
+        // Otherwise, if it now has a non-solid outline:
+        if (styleDec.outlineStyle !== 'solid') {
+          // If the outline style exists:
+          if (styleDec.outlineStyle) {
+            // If the style is not delegated to the user agent:
+            if (styleDec.outlineStyle !== 'auto') {
+              // Return a violation description
+              return `Element when focused has an outline with the ${styleDec.outlineStyle} instead of solid style`;
             }
           }
-          // Otherwise, i.e. if the element now has a standard outline:
+          // Otherwise, i.e. if no outline style exists:
           else {
-            // Return conformance.
-            return false;
+            // Return a violation description.
+            return 'Element when focused has an outline with no instead of solid style';
           }
         }
-      });
-      // If it does:
-      if (hasBadIndicator) {
-        // Add the locator to the array of violators.
-        all.locs.push([loc, hasBadIndicator]);
       }
     }
-  }
-  // Populate and return the result.
-  const whats = ['Element has __param__', 'Elements fail to have standard focus indicators'];
-  return await getRuleResult(withItems, all, 'focInd', whats, 1);
+  };
+  const whats = 'Elements fail to have standard focus indicators';
+  // Perform the test and return the result.
+  return doTest(
+    page, withItems, 'focInd', 'body *', whats, 1, null, getBadWhat.toString()
+  );
 };

package/testaro/lineHeight.js

@@ -32,54 +32,41 @@
   their subtrees are excluded.
 */
 
+// IMPORTS
+
+const {doTest} = require('../procs/testaro');
+
 // FUNCTIONS
 
 // Runs the test and returns the result.
 exports.reporter = async (page, withItems) => {
-  // Return totals and standard instances for the rule.
-  return await page.evaluate(withItems => {
-    // Get all elements.
-    const allElements = document.body.querySelectorAll('*');
-    // Get all violation candidates, i.e. elements that have non-empty child text nodes.
-    const candidates = Array.from(allElements).filter(el =>
-      Array.from(el.childNodes).some(child =>
-        child.nodeType === Node.TEXT_NODE &&
-        child.textContent.trim().length
-      )
+  // Define a violation function for execution in the browser.
+  const getBadWhat = element => {
+    // Get whether the element has a non-spacing child text node.
+    const hasText = Array.from(element.childNodes).some(child =>
+      child.nodeType === Node.TEXT_NODE && child.textContent.trim()
     );
-    let violationCount = 0;
-    const instances = [];
-    // For each candidate:
-    candidates.forEach(element => {
+    // If so:
+    if (hasText) {
       // Get its relevant style properties.
       const styleDec = window.getComputedStyle(element);
       const {fontSize, lineHeight} = styleDec;
       const fontSizeNum = Number.parseFloat(fontSize);
       const lineHeightNum = Number.parseFloat(lineHeight);
-      // If it violates the rule:
-      if (lineHeightNum < 1.495 * fontSizeNum) {
-        // Increment the violation count.
-        violationCount++;
-        // If itemization is required:
-        if (withItems) {
-          const fontSizeRounded = fontSizeNum.toFixed(1);
-          const lineHeightRounded = lineHeightNum.toFixed(1);
-          const what = `Element line height (${lineHeightRounded}px) is less than 1.5 times its font size (${fontSizeRounded}px)`;
-          // Add an instance to the instances.
-          instances.push(window.getInstance(element, 'lineHeight', what, 1, 1));
-        }
+      // Get whether it violates the rule.
+      const isBad = lineHeightNum < 1.495 * fontSizeNum;
+      // If it does:
+      if (isBad) {
+        const whatFontSize = `font size (${fontSizeNum.toFixed(1)}px)`;
+        const whatLineHeight = `line height (${lineHeightNum.toFixed(1)}px)`;
+        // Return a violation description.
+        return `Element ${whatLineHeight} is less than 1.5 times its ${whatFontSize}`;
       }
-    });
-    // If there were any violations and itemization is not required:
-    if (violationCount && ! withItems) {
-      const what = 'Element line heights are less than 1.5 times their font sizes';
-      // Add a summary instance to the instances.
-      instances.push(window.getInstance(null, 'lineHeight', what, violationCount, 1));
     }
-    return {
-      data: {},
-      totals: [0, violationCount, 0, 0],
-      standardInstances: instances
-    };
-  }, withItems);
+  };
+  const whats = 'Element line heights are less than 1.5 times their font sizes';
+  // Perform the test and return the result.
+  return doTest(
+    page, withItems, 'lineHeight', '*', whats, 1, null, getBadWhat.toString()
+  );
 };

package/testaro/miniText.js

@@ -1,5 +1,6 @@
 /*
   © 2022–2023 CVS Health and/or one of its affiliates. All rights reserved.
+  © 2025 Jonathan Robert Pool. All rights reserved.
 
   MIT License
 
@@ -29,34 +30,38 @@
   This test reports elements with font sizes smaller than 11 pixels.
 */
 
-// Module to perform common operations.
-const {init, getRuleResult} = require('../procs/testaro');
+// IMPORTS
 
-// ########## FUNCTIONS
+const {doTest} = require('../procs/testaro');
+
+// 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 *:not(script, style):visible', {hasText: /[^\s]+/});
-  // For each locator:
-  for (const loc of all.allLocs) {
-    // Get the font size of its element if less than 11 pixels.
-    const fontSize = await loc.evaluate(el => {
-      const styleDec = window.getComputedStyle(el);
-      const fontSizeString = styleDec.fontSize;
-      const fontSize = Number.parseFloat(fontSizeString);
-      return fontSize < 11 ? fontSize : null;
-    });
-    // If it violates the rule:
-    if (fontSize) {
-      // Add the locator to the array of violators.
-      all.locs.push([loc, fontSize]);
+  const getBadWhat = element => {
+    const rawText = element.textContent || '';
+    // If the element has text content with any non-whitespace:
+    if (/[^\s]/.test(rawText)) {
+      const isVisible = element.checkVisibility({
+        contentVisibilityAuto: true,
+        opacityProperty: true,
+        visibilityProperty: true
+      });
+      // If the element is visible:
+      if (isVisible) {
+        const styleDec = window.getComputedStyle(element);
+        // Get its font size.
+        const fontSizeString = styleDec.fontSize;
+        const fontSize = Number.parseFloat(fontSizeString);
+        // If its font size is smaller than 11 pixels:
+        if (fontSize < 11) {
+          // Return a violation description.
+          return `Element is visible but its font size is ${fontSize}px, smaller than 11px`;
+        }
+      }
     }
-  }
-  // Populate and return the result.
-  const whats = [
-    'Element has a font size of __param__ pixels, smaller than 11 pixels',
-    'Elements have font sizes smaller than 11 pixels'
-  ];
-  return await getRuleResult(withItems, all, 'miniText', whats, 2);
+  };
+  const whats = 'Visible elements have font sizes smaller than 11 pixels';
+  return doTest(
+    page, withItems, 'miniText', 'body *:not(script, style)', whats, 2, '', getBadWhat.toString()
+  );
 };

package/tests/testaro.js

@@ -385,17 +385,17 @@ const allRules = [
     defaultOn: true
   },
   {
-    id: 'focInd',
-    what: 'missing and nonstandard focus indicators',
+    id: 'focAndOp',
+    what: 'Tab-focusable elements that are not operable or vice versa',
     launchRole: 'waster',
-    timeOut: 10,
+    timeOut: 5,
     defaultOn: true
   },
   {
-    id: 'focOp',
-    what: 'Tab-focusable elements that are not operable',
+    id: 'focInd',
+    what: 'missing and nonstandard focus indicators',
     launchRole: 'waster',
-    timeOut: 5,
+    timeOut: 10,
     defaultOn: true
   },
   {
@@ -419,13 +419,6 @@ const allRules = [
     timeOut: 10,
     defaultOn: true
   },
-  {
-    id: 'opFoc',
-    what: 'operable elements that are not Tab-focusable',
-    launchRole: 'waster',
-    timeOut: 10,
-    defaultOn: true
-  },
   {
     id: 'tabNav',
     what: 'nonstandard keyboard navigation between elements with the tab role',

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

@@ -31,23 +31,16 @@
   </head>
   <body>
     <main>
-      <h1>Page with correct and erroneous datalist references</h1>
+      <h1 id="nonDatalist">Page with correct and erroneous datalist references</h1>
       <form onsubmit="alert('Thank you for your submission')">
         <datalist id="okDatalist">
           <option value="red">
           <option value="yellow">
         </datalist>
-        <datalist id="badDatalist">
-          <option value="paper">
-          <option value="plastic">
-        </datalist>
-        <datalist id="badDatalist">
-          <option value="metal">
-          <option value="stone">
-        </datalist>
         <p><label>Name a color: <input type="text" name="color" list="okDatalist"></label></p>
-        <p><label>Name a material: <input type="text" name="material" list="badDatalist"></label></p>
+        <p><label>Name a material: <input type="text" name="material" list></label></p>
         <p><label>Name a city: <input type="text" name="city" list="noDatalist"></label></p>
+        <p><label>Name a thing: <input type="text" name="thing" list="nonDatalist"></label></p>
         <p><button>Submit</button></p>
       </form>
       <p>The material and city inputs are defective.</p>

package/procs/operable.js

@@ -1,108 +0,0 @@
-/*
-  © 2023 CVS Health and/or one of its affiliates. All rights reserved.
-
-  MIT License
-
-  Permission is hereby granted, free of charge, to any person obtaining a copy
-  of this software and associated documentation files (the "Software"), to deal
-  in the Software without restriction, including without limitation the rights
-  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-  copies of the Software, and to permit persons to whom the Software is
-  furnished to do so, subject to the following conditions:
-
-  The above copyright notice and this permission notice shall be included in all
-  copies or substantial portions of the Software.
-
-  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-  SOFTWARE.
-*/
-
-/*
-  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. The isOperable function modifies the page.
-*/
-
-// ########## 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;
-};