testaro 78.0.6 → 78.4.0

package/testaro/focAndOp.js

@@ -1,5 +1,7 @@
+"use strict";
 /*
   © 2021–2024 CVS Health and/or one of its affiliates. All rights reserved.
+  © 2026 Jeff Witt.
   © 2025–2026 Jonathan Robert Pool.
 
   Licensed under the MIT License. See LICENSE file at the project root or
@@ -7,117 +9,112 @@
 
   SPDX-License-Identifier: MIT
 */
-
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.reporter = void 0;
+const testaro_1 = require("../procs/testaro");
 /*
   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.
+  Compiled to focAndOp.js by tsc (issue #73); edit this file, not the emitted one.
 */
-
-// IMPORTS
-
-const {doTest} = require('../procs/testaro');
-
 // FUNCTIONS
-
 // Runs the test and returns the result.
-exports.reporter = async (page, report, _, withItems) => {
-  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', 'SUMMARY', '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 = [];
-      // If the element is not a label:
-      if (element.tagName !== 'LABEL') {
-        const liveStyleDec = window.getComputedStyle(element);
-        // If it has a pointer cursor:
-        if (liveStyleDec.cursor === 'pointer') {
-          // Neutralize the cursor style of the parent element of the element.
-          element.parentElement.style.cursor = 'default';
-          // If, after this, the element still has a pointer cursor:
-          if (liveStyleDec.cursor === 'pointer') {
-            // Add this to the operabilities of the element.
-            opHow.push('pointer cursor');
-          }
+const reporter = async (page, report, _, withItems) => {
+    // The candidate selector yields rendered HTML elements.
+    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', 'SUMMARY', '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 = [];
+            // If the element is not a label:
+            if (element.tagName !== 'LABEL') {
+                const liveStyleDec = window.getComputedStyle(element);
+                // If it has a pointer cursor:
+                if (liveStyleDec.cursor === 'pointer') {
+                    // Neutralize the cursor style of the parent element of the element.
+                    element.parentElement.style.cursor = 'default';
+                    // If, after this, the element still has a pointer cursor:
+                    if (liveStyleDec.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`;
+            }
         }
-      }
-      // 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';
-  return await doTest(
-    page, report, withItems, 'focAndOp', 'body, body *', whats, 2, getBadWhat.toString()
-  );
+    };
+    const whats = 'Elements are Tab-focusable but not operable or vice versa';
+    return await (0, testaro_1.doTest)(page, report, withItems, 'focAndOp', 'body, body *', whats, 2, getBadWhat.toString());
 };
+exports.reporter = reporter;

package/testaro/focAndOp.ts

@@ -0,0 +1,128 @@
+/*
+  © 2021–2024 CVS Health and/or one of its affiliates. All rights reserved.
+  © 2026 Jeff Witt.
+  © 2025–2026 Jonathan Robert Pool.
+
+  Licensed under the MIT License. See LICENSE file at the project root or
+  https://opensource.org/license/mit/ for details.
+
+  SPDX-License-Identifier: MIT
+*/
+
+// IMPORTS
+
+import type {Page} from 'playwright';
+import {doTest} from '../procs/testaro';
+import type {BadWhat, Report} from '../types';
+
+/*
+  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.
+  Compiled to focAndOp.js by tsc (issue #73); edit this file, not the emitted one.
+*/
+
+// FUNCTIONS
+
+// Runs the test and returns the result.
+export const reporter = async (page: Page, report: Report, _: unknown, withItems: boolean) => {
+  // The candidate selector yields rendered HTML elements.
+  const getBadWhat = (element: HTMLElement): BadWhat => {
+    // 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', 'SUMMARY', '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 = [];
+      // If the element is not a label:
+      if (element.tagName !== 'LABEL') {
+        const liveStyleDec = window.getComputedStyle(element);
+        // If it has a pointer cursor:
+        if (liveStyleDec.cursor === 'pointer') {
+          // Neutralize the cursor style of the parent element of the element.
+          element.parentElement!.style.cursor = 'default';
+          // If, after this, the element still has a pointer cursor:
+          if (liveStyleDec.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 as string)) {
+        // 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';
+  return await doTest(
+    page, report, withItems, 'focAndOp', 'body, body *', whats, 2, getBadWhat.toString()
+  );
+};

package/testaro/focInd.d.ts

@@ -0,0 +1,3 @@
+import type { Page } from 'playwright';
+import type { Report } from '../types';
+export declare const reporter: (page: Page, report: Report, _: unknown, withItems: boolean) => Promise<import("../procs/testaro").RuleResult>;

package/testaro/focInd.js

@@ -1,5 +1,7 @@
+"use strict";
 /*
   © 2021–2023 CVS Health and/or one of its affiliates. All rights reserved.
+  © 2026 Jeff Witt.
   © 2025–2026 Jonathan Robert Pool.
 
   Licensed under the MIT License. See LICENSE file at the project root or
@@ -7,7 +9,9 @@
 
   SPDX-License-Identifier: MIT
 */
-
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.reporter = void 0;
+const testaro_1 = require("../procs/testaro");
 /*
   focInd
 
@@ -18,74 +22,69 @@
   Solid outlines are the standard and thus most familiar focus indicator. Other focus indicators are likely to be misunderstood. For example, underlines may be mistaken for selection or link indicators.
 
   WARNING: This test fails to recognize outlines when run with firefox.
+  Compiled to focInd.js by tsc (issue #73); edit this file, not the emitted one.
 */
-
-// IMPORTS
-
-const {doTest} = require('../procs/testaro');
-
 // FUNCTIONS
-
 // Runs the test and returns the result.
-exports.reporter = async (page, report, _, withItems) => {
-  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 a visible outline before being focused:
-        if (styleDec.outlineStyle !== 'none' && styleDec.outlineWidth !== '0px') {
-          // Return a violation description.
-          return 'Element is focusable but has an outline when blurred';
-        }
-        // 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' || styleDec.outlineStyle === 'none') {
-          // 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 && styleDec.outlineStyle !== 'none') {
-          // 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`;
+const reporter = async (page, report, _, withItems) => {
+    // The candidate selector yields rendered HTML elements.
+    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 a visible outline before being focused:
+                if (styleDec.outlineStyle !== 'none' && styleDec.outlineWidth !== '0px') {
+                    // Return a violation description.
+                    return 'Element is focusable but has an outline when blurred';
+                }
+                // 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' || styleDec.outlineStyle === 'none') {
+                    // 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 && styleDec.outlineStyle !== 'none') {
+                    // 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 no outline style exists:
+                    else {
+                        // Return a violation description.
+                        return 'Element when focused has an outline with no instead of solid style';
+                    }
+                }
             }
-          }
-          // Otherwise, i.e. if no outline style exists:
-          else {
-            // Return a violation description.
-            return 'Element when focused has an outline with no instead of solid style';
-          }
         }
-      }
-    }
-  };
-  const whats = 'Elements fail to have standard focus indicators';
-  return await doTest(
-    page, report, withItems, 'focInd', 'body, body *', whats, 1, getBadWhat.toString()
-  );
+    };
+    const whats = 'Elements fail to have standard focus indicators';
+    return await (0, testaro_1.doTest)(page, report, withItems, 'focInd', 'body, body *', whats, 1, getBadWhat.toString());
 };
+exports.reporter = reporter;

package/testaro/focInd.ts

@@ -0,0 +1,96 @@
+/*
+  © 2021–2023 CVS Health and/or one of its affiliates. All rights reserved.
+  © 2026 Jeff Witt.
+  © 2025–2026 Jonathan Robert Pool.
+
+  Licensed under the MIT License. See LICENSE file at the project root or
+  https://opensource.org/license/mit/ for details.
+
+  SPDX-License-Identifier: MIT
+*/
+
+// IMPORTS
+
+import type {Page} from 'playwright';
+import {doTest} from '../procs/testaro';
+import type {BadWhat, Report} from '../types';
+
+/*
+  focInd
+
+  This test reports focusable elements without standard focus indicators. The standard focus indicator is deemed to be a solid outline with a line thickness of at least 2 pixels and a non-transparent color, and only if the element, when not focused, has no outline.
+
+  The focus indicator is checked immediately after the element is focused. Thus, a delayed focus indicator is ignored. Indication delayed is treated as indication denied. The bases for this treatment are that delayed indication interferes with rapid human or mechanized document consumption and also, if it must be respected, slows accessibility testing.
+
+  Solid outlines are the standard and thus most familiar focus indicator. Other focus indicators are likely to be misunderstood. For example, underlines may be mistaken for selection or link indicators.
+
+  WARNING: This test fails to recognize outlines when run with firefox.
+  Compiled to focInd.js by tsc (issue #73); edit this file, not the emitted one.
+*/
+
+// FUNCTIONS
+
+// Runs the test and returns the result.
+export const reporter = async (page: Page, report: Report, _: unknown, withItems: boolean) => {
+  // The candidate selector yields rendered HTML elements.
+  const getBadWhat = (element: HTMLElement): BadWhat => {
+    // 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 a visible outline before being focused:
+        if (styleDec.outlineStyle !== 'none' && styleDec.outlineWidth !== '0px') {
+          // Return a violation description.
+          return 'Element is focusable but has an outline when blurred';
+        }
+        // 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' || styleDec.outlineStyle === 'none') {
+          // 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 && styleDec.outlineStyle !== 'none') {
+          // 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 no outline style exists:
+          else {
+            // Return a violation description.
+            return 'Element when focused has an outline with no instead of solid style';
+          }
+        }
+      }
+    }
+  };
+  const whats = 'Elements fail to have standard focus indicators';
+  return await doTest(
+    page, report, withItems, 'focInd', 'body, body *', whats, 1, getBadWhat.toString()
+  );
+};

package/testaro/focVis.d.ts

@@ -0,0 +1,3 @@
+import type { Page } from 'playwright';
+import type { Report } from '../types';
+export declare const reporter: (page: Page, report: Report, _: unknown, withItems: boolean) => Promise<import("../procs/testaro").RuleResult>;