testaro 78.0.2 → 78.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "testaro",
-  "version": "78.0.2",
+  "version": "78.0.5",
   "description": "Run 1300 web accessibility tests from 10 tools and get a standardized report",
   "main": "index.js",
   "scripts": {
@@ -38,7 +38,7 @@
     "@siteimprove/alfa-act": "*",
     "@siteimprove/alfa-playwright": "*",
     "@siteimprove/alfa-rules": "*",
-    "accessibility-checker": "*",
+    "accessibility-checker": ">=4.0.29",
     "aria-query": "*",
     "aslint-testaro": "*",
     "axe-playwright": "*",

package/testaro/focAll.js

@@ -9,7 +9,7 @@
 
 /*
   focAll
-  This test reports discrepancies between focusable and Tab-focused element counts. The test first counts all the visible focusable (i.e. with tabIndex 0) elements (except counting each group of radio buttons as only one focusable element). Then it repeatedly presses the Tab (or Option-Tab in webkit) key until it has reached all the elements it can and counts those elements. If the two counts differ, navigation can be made more difficult. The cause may be surprising changes in content during navigation with the Tab key, or inability to reach every focusable element (or widget, such as one radio button or tab in each group) merely by pressing the Tab key.
+  This test reports discrepancies between the visible focusable elements of a page and the elements actually reached with the Tab (or, in webkit, Option-Tab) key. The test first identifies and marks all the visible focusable elements, i.e. those with a nonnegative tabIndex, except elements that browsers exclude from Tab navigation (disabled elements, inert elements, and a and area elements without href attributes). Radio buttons are grouped as browsers group them: radio buttons sharing a name and a form owner belong to one group, and the group is reachable with one Tab keypress, but each radio button without a name is independently reachable. Then the test repeatedly presses the Tab (or Option-Tab) key until it has reached all the elements it can, marking each reached element. Finally, the test reports each focusable element that was never reached (for example, because keypresses cause surprising changes in content or focus) and each reached element that was not a visible focusable element when the page was loaded (for example, because it was revealed only during navigation or was invisible although Tab-focusable). Any such element can make navigation with the Tab key difficult or impossible.
 */
 
 // IMPORTS
@@ -19,16 +19,42 @@ const {getXPathCatalogIndex} = require('../procs/xPath');
 // FUNCTIONS
 
 // Runs the test and returns the result.
-exports.reporter = async (page, report) => {
+exports.reporter = async (page, report, _, withItems) => {
   // Get locators of visible elements.
   const locAll = await page.locator('body *:visible');
-  // Get the count of focusable elements.
+  // Mark the focusable elements and get the count of Tab stops among them.
   const focusableCount = await locAll.evaluateAll(elements => {
-    const focusables = elements.filter(element => element.tabIndex === 0);
-    // Count as focusable only 1 radio button per group.
-    const radios = focusables.filter(el => el.tagName === 'INPUT' && el.type === 'radio');
-    const radioNames = new Set(radios.map(radio => radio.name));
-    return focusables.length - radios.length + radioNames.size;
+    // Get the focusable elements, i.e. those that can be reached with the Tab key.
+    const focusables = elements.filter(element => {
+      // If the element has a negative tabIndex, it is not focusable.
+      if (element.tabIndex < 0) {
+        return false;
+      }
+      // If the element or an ancestor is disabled or inert, it is not focusable.
+      if (element.matches(':disabled') || element.closest('[inert]')) {
+        return false;
+      }
+      // If the element is an a or area element without an href attribute, it is not focusable.
+      if (['A', 'AREA'].includes(element.tagName) && ! element.hasAttribute('href')) {
+        return false;
+      }
+      return true;
+    });
+    // Mark them.
+    focusables.forEach(element => {
+      element.dataset.testarofocusable = 'true';
+    });
+    // Get the radio buttons among them that browsers group, i.e. those with names.
+    const namedRadios = focusables.filter(
+      element => element.tagName === 'INPUT' && element.type === 'radio' && element.name
+    );
+    // Get the identifiers (form owner and name) of their groups.
+    const groupIDs = new Set(namedRadios.map(radio => {
+      const formIndex = radio.form ? Array.prototype.indexOf.call(document.forms, radio.form) : -1;
+      return `${formIndex}:${radio.name}`;
+    }));
+    // Return the count of Tab stops, counting each radio-button group as only 1.
+    return focusables.length - namedRadios.length + groupIDs.size;
   });
   /*
     Repeatedly perform a Tab or (in webkit) Opt-Tab keypress and count the focused elements.
@@ -43,7 +69,11 @@ exports.reporter = async (page, report) => {
   while (refocused < 100 && tabFocused < 2000) {
     await page.keyboard.press(keyName);
     const isNewFocus = await page.evaluate(() => {
-      const focus = document.activeElement;
+      let focus = document.activeElement;
+      // If the focus is in a shadow DOM, get the innermost focused element.
+      while (focus && focus.shadowRoot && focus.shadowRoot.activeElement) {
+        focus = focus.shadowRoot.activeElement;
+      }
       if (focus === null || focus.tagName === 'BODY' || focus.dataset.testarofocused) {
         return false;
       }
@@ -59,22 +89,123 @@ exports.reporter = async (page, report) => {
       refocused++;
     }
   }
+  // Get the XPaths of the elements violating the rule, in both directions.
+  const {unreached, unexpected} = await page.evaluate(() => {
+    // Get all elements, including any in open shadow roots.
+    const allElements = [];
+    const addElements = root => {
+      root.querySelectorAll('*').forEach(element => {
+        allElements.push(element);
+        if (element.shadowRoot) {
+          addElements(element.shadowRoot);
+        }
+      });
+    };
+    addElements(document);
+    // Returns the identifier of the group of a radio button.
+    const getGroupID = radio => {
+      const formIndex = radio.form ? Array.prototype.indexOf.call(document.forms, radio.form) : -1;
+      return `${formIndex}:${radio.name}`;
+    };
+    // Get the identifiers of the radio-button groups with any reached member.
+    const reachedGroupIDs = new Set(
+      allElements
+      .filter(
+        element => element.dataset.testarofocused
+        && element.tagName === 'INPUT'
+        && element.type === 'radio'
+        && element.name
+      )
+      .map(getGroupID)
+    );
+    // Initialize the violation data.
+    const unreached = [];
+    const unexpected = [];
+    // For each element:
+    allElements.forEach(element => {
+      const wasFocusable = !! element.dataset.testarofocusable;
+      const wasFocused = !! element.dataset.testarofocused;
+      // If it was focusable but was never reached:
+      if (wasFocusable && ! wasFocused) {
+        const isGroupedRadio = element.tagName === 'INPUT'
+        && element.type === 'radio'
+        && element.name;
+        // If it is not a member of a radio-button group with another reached member:
+        if (! (isGroupedRadio && reachedGroupIDs.has(getGroupID(element)))) {
+          // Add its XPath to the violation data.
+          unreached.push(window.getXPath(element) ?? '/html');
+        }
+      }
+      // Otherwise, if it was reached but was not a visible focusable element:
+      else if (wasFocused && ! wasFocusable) {
+        // Get whether it is a scrollable container, which some browsers make Tab-focusable.
+        const styleDec = window.getComputedStyle(element);
+        const isScroller = ['auto', 'scroll'].includes(styleDec.overflowY)
+        && element.scrollHeight > element.clientHeight
+        || ['auto', 'scroll'].includes(styleDec.overflowX)
+        && element.scrollWidth > element.clientWidth;
+        // If it is not a scrollable container made focusable by the browser alone:
+        if (! (isScroller && element.tabIndex < 0)) {
+          // Add its XPath to the violation data.
+          unexpected.push(window.getXPath(element) ?? '/html');
+        }
+      }
+      // Remove the marker attributes from the element.
+      delete element.dataset.testarofocusable;
+      delete element.dataset.testarofocused;
+    });
+    return {unreached, unexpected};
+  });
+  const count = unreached.length + unexpected.length;
   const data = {
     focusableCount,
     tabFocused,
-    discrepancy: tabFocused - focusableCount
+    discrepancy: tabFocused - focusableCount,
+    unreachedCount: unreached.length,
+    unexpectedCount: unexpected.length
   };
-  const count = Math.abs(data.discrepancy);
-  // Return the result.
-  return {
-    data,
-    totals: [0, 0, count, 0],
-    standardInstances: count ? [{
+  // Initialize the standard instances.
+  const standardInstances = [];
+  // If itemization is required:
+  if (withItems) {
+    // For each element that was focusable but was never reached:
+    unreached.forEach(xPath => {
+      // Add an instance to the standard instances.
+      standardInstances.push({
+        ruleID: 'focAll',
+        what: 'Element is focusable but was not reached by Tab navigation',
+        ordinalSeverity: 2,
+        count: 1,
+        catalogIndex: getXPathCatalogIndex(report, xPath)
+      });
+    });
+    // For each element that was reached but was not a visible focusable element:
+    unexpected.forEach(xPath => {
+      // Add an instance to the standard instances.
+      standardInstances.push({
+        ruleID: 'focAll',
+        what: 'Element was reached by Tab navigation but was not a visible focusable element',
+        ordinalSeverity: 2,
+        count: 1,
+        catalogIndex: getXPathCatalogIndex(report, xPath)
+      });
+    });
+  }
+  // Otherwise, if there were any violations:
+  else if (count) {
+    // Add a summary instance to the standard instances.
+    standardInstances.push({
       ruleID: 'focAll',
       what: 'Some focusable elements are not Tab-focusable or vice versa',
       ordinalSeverity: 2,
       count,
       catalogIndex: getXPathCatalogIndex(report, '/html/body')
-    }] : []
+    });
+  }
+  // Return the result.
+  return {
+    data,
+    totals: [0, 0, count, 0],
+    standardInstances
   };
 };

package/tests/htmlcs.js

@@ -62,8 +62,19 @@ exports.reporter = async (page, report, actIndex) => {
       const script = document.createElement('script');
       script.nonce = scriptNonce;
       script.textContent = scriptText;
+      // HTMLCS.js is a UMD bundle. If the page exposes an AMD loader (define.amd, e.g. Wix or RequireJS) or leaked CommonJS globals (exports, module), the UMD wrapper registers HTMLCS as a module and never attaches HTMLCS_RUNNER to window, so the run() call below throws and the tool is reported prevented. Hide those loader globals for the duration of the synchronous script execution, so the wrapper falls through to its browser-global branch.
+      const umdDefine = window.define;
+      const umdExports = window.exports;
+      const umdModule = window.module;
+      window.define = undefined;
+      window.exports = undefined;
+      window.module = undefined;
       // Add the HTMLCS script to the page.
       document.head.insertAdjacentElement('beforeend', script);
+      // Restore the loader globals.
+      window.define = umdDefine;
+      window.exports = umdExports;
+      window.module = umdModule;
       // If only some rules are to be employed:
       if (rules && Array.isArray(rules) && rules.length) {
         // Redefine WCAG 2 AAA as including only them.

package/validation/tests/jobProperties/focAll.json

@@ -52,6 +52,11 @@
           "=",
           0
         ],
+        [
+          "standardResult.instances.length",
+          "=",
+          1
+        ],
         [
           "standardResult.instances.0.ruleID",
           "=",
@@ -60,7 +65,7 @@
         [
           "standardResult.instances.0.what",
           "i",
-          "vice versa"
+          "was not reached"
         ],
         [
           "standardResult.instances.0.ordinalSeverity",
@@ -99,6 +104,11 @@
           "=",
           0
         ],
+        [
+          "standardResult.instances.length",
+          "=",
+          2
+        ],
         [
           "standardResult.instances.0.ruleID",
           "=",
@@ -107,7 +117,7 @@
         [
           "standardResult.instances.0.what",
           "i",
-          "vice versa"
+          "was not a visible focusable"
         ],
         [
           "standardResult.instances.0.ordinalSeverity",
@@ -117,7 +127,12 @@
         [
           "standardResult.instances.0.count",
           "=",
-          2
+          1
+        ],
+        [
+          "standardResult.instances.1.count",
+          "=",
+          1
         ]
       ],
       "rules": [

package/validation/tests/targets/focAll/good.html

@@ -17,7 +17,21 @@
   <body>
     <main>
       <h1>Page with full focusability</h1>
-      <p>This page contains a link to <a href="https://en.wikipedia.org">information</a>, a <button type="button">button</button>, and a <label>text input <input type="text"></label>. All three, and no other elements, can be focused with Tab-key navigation.</p>
+      <p>This page contains a link to <a href="https://en.wikipedia.org">information</a>, a <button type="button">button</button>, and a <label>text input <input type="text"></label>. It also contains two forms, each containing a radio-button group, with both groups sharing one name. Each group is one Tab stop, at its checked radio button. The three controls and the two groups, and no other elements, can be focused with Tab-key navigation.</p>
+      <form>
+        <fieldset>
+          <legend>Beverage</legend>
+          <label><input type="radio" name="choice" value="coffee" checked> Coffee</label>
+          <label><input type="radio" name="choice" value="tea"> Tea</label>
+        </fieldset>
+      </form>
+      <form>
+        <fieldset>
+          <legend>Meal</legend>
+          <label><input type="radio" name="choice" value="lunch" checked> Lunch</label>
+          <label><input type="radio" name="choice" value="dinner"> Dinner</label>
+        </fieldset>
+      </form>
     </main>
   </body>
 </html>