testaro 4.6.1 → 4.7.2

package/commands.js

@@ -166,8 +166,9 @@ exports.commands = {
     focInd: [
       'Perform a focInd test',
       {
-        withItems: [true, 'boolean'],
-        revealAll: [true, 'boolean', '', 'whether to make all elements visible first']
+        revealAll: [true, 'boolean', '', 'whether to make all elements visible first'],
+        allowedDelay: [true, 'number', '', 'milliseconds to wait for an outline'],
+        withItems: [true, 'boolean']
       }
     ],
     focOp: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "testaro",
-  "version": "4.6.1",
+  "version": "4.7.2",
   "description": "Automation of accessibility testing",
   "main": "index.js",
   "scripts": {

package/tests/focInd.js

@@ -1,21 +1,24 @@
 /*
   focInd
   This test reports focusable elements without focus indicators, with non-outline focus
-  indicators, and with outline focus indicators.
-
-  It as based on the assumption that outlines are the standard and thus most familiar
-  focus indicator. Other focus indicators are assumed better than none, but more likely
-  to be misunderstood. For example, underlines may be mistaken for selection indicators.
+  indicators, and with outline focus indicators. An outline is recognized if it has non-zero
+  line thickness and non-transparent color. The test is based on the assumption that outlines are
+  the standard and thus most familiar focus indicator. Other focus indicators are assumed better
+  than none, but more likely to be misunderstood. For example, underlines may be mistaken for
+  selection indicators. Some pages delay the appearance of focus indicators. This test waits for
+  focus indicators to appear if specified and, if there is a delay, reports on its magnitude.
 
   Bug: This test fails to recognize outlines when run with firefox.
 */
-exports.reporter = async (page, withItems, revealAll) => {
+exports.reporter = async (page, revealAll, allowedDelay, withItems) => {
   // If required, make all elements visible.
   if (revealAll) {
     await require('../procs/allVis').allVis(page);
   }
   // Get data on the focusable visible elements with and without indicators.
-  const data = await page.$$eval('body *:visible', (elements, withItems) => {
+  const data = await page.$$eval('body *:visible', async (elements, args) => {
+    const allowedDelay = args[0];
+    const withItems = args[1];
     // Initialize the data.
     const data = {
       totals: {
@@ -31,6 +34,7 @@ exports.reporter = async (page, withItems, revealAll) => {
           },
           outlinePresent: {
             total: 0,
+            meanDelay: 0,
             tagNames: {}
           }
         }
@@ -43,9 +47,13 @@ exports.reporter = async (page, withItems, revealAll) => {
         outlinePresent: []
       };
     }
-    const addElementFacts = (element, status) => {
+    // Adds facts about an element to the result.
+    const addElementFacts = (element, status, delay = null) => {
       const type = data.totals.types[status];
       type.total++;
+      if (status === 'outlinePresent') {
+        type.meanDelay = Math.round(((type.total - 1) * type.meanDelay + delay) / type.total);
+      }
       const tagName = element.tagName;
       if (type.tagNames[tagName]) {
         type.tagNames[tagName]++;
@@ -54,46 +62,91 @@ exports.reporter = async (page, withItems, revealAll) => {
         type.tagNames[tagName] = 1;
       }
       if (withItems) {
-        data.items[status].push({
+        const elementData = {
           tagName,
           text: element.textContent.trim().replace(/\s{2,}/g, ' ').slice(0, 100)
-        });
+        };
+        if (status === 'outlinePresent') {
+          elementData.delay = delay;
+        }
+        data.items[status].push(elementData);
       }
     };
-    elements.forEach(element => {
+    // For each visible element descendant of the body:
+    for(const element of elements) {
+      // If it is Tab-focusable:
       if (element.tabIndex === 0) {
+        // Increment the total of focusable elements.
         data.totals.total++;
-        const styleBlurred = Object.assign({}, window.getComputedStyle(element));
+        // Get a live style declaration of its properties.
+        const styleDec = window.getComputedStyle(element);
+        // Freeze a copy to preserve the style properties when not focused.
+        const styleBlurred = Object.assign({}, styleDec);
+        // Focus it, potentially changing the properties in its style declaration.
         element.focus({preventScroll: true});
-        const styleFocused = window.getComputedStyle(element);
-        const hasOutline
-          = styleBlurred.outlineWidth === '0px'
-          && styleFocused.outlineWidth !== '0px';
-        if (hasOutline) {
-          addElementFacts(element, 'outlinePresent');
+        let hasOutline = false;
+        // If it has no outline when not focused:
+        if (styleBlurred.outlineWidth === '0px') {
+          // If an outline appeared immediately on focus:
+          if (styleDec.outlineWidth !== '0px' && styleDec.outlineColor !== 'rgba(0, 0, 0, 0)') {
+            // Add facts about the element to the result.
+            addElementFacts(element, 'outlinePresent', 0);
+            hasOutline = true;
+          }
+          // Otherwise, if a wait for an outline is allowed:
+          else if (allowedDelay) {
+            // Determine how long an outline takes to appear or whether it times out.
+            const outlineDelay = new Promise(resolve => {
+              const focusTime = Date.now();
+              const deadline = focusTime + allowedDelay;
+              const interval = setInterval(() => {
+                if (
+                  styleDec.outlineWidth !== '0px' && styleDec.outlineColor !== 'rgba(0, 0, 0, 0)'
+                ) {
+                  resolve(Date.now() - focusTime);
+                  clearInterval(interval);
+                }
+                else if (Date.now() > deadline) {
+                  resolve(null);
+                  clearInterval(interval);
+                }
+              }, 100);
+            });
+            // If it appeared before the wait limit:
+            const delay = await outlineDelay;
+            if (delay) {
+              // Add facts about the element to the result.
+              addElementFacts(element, 'outlinePresent', delay);
+              hasOutline = true;
+            }
+          }
         }
-        else {
-          const diff = prop => styleFocused[prop] !== styleBlurred[prop];
+        // If no allowed outline appeared:
+        if (! hasOutline) {
+          // Returns whether a style property differs between focused and not focused.
+          const diff = prop => styleDec[prop] !== styleBlurred[prop];
+          // Determine whether the element has another allowed focus indicator.
+          const hasDiffOutline = styleDec.outlineWidth !== '0px'
+          && styleDec.outlineColor !== 'rgba(0, 0, 0, 0)'
+          && (diff('outlineStyle') || diff('outlineWidth'));
+          const hasDiffBorder = styleDec.borderWidth !== '0px'
+          && styleDec.borderColor !== 'rgba(0, 0, 0, 0)'
+          && (diff('borderStyle') || diff('borderWidth'));
           const hasIndicator
-            = diff('borderStyle')
-            && styleBlurred.borderWidth !== '0px'
-            && styleFocused.borderWidth !== '0px'
-            || (styleFocused.borderStyle !== 'none' && diff('borderWidth'))
-            || diff('outlineStyle')
-            && styleBlurred.outlineWidth !== '0px'
-            && styleFocused.outlineWidth !== '0px'
-            || (styleFocused.outlineStyle !== 'none' && diff('outlineWidth'))
-            || diff('fontSize')
-            || diff('fontStyle')
-            || diff('textDecorationLine')
-            || diff('textDecorationStyle')
-            || diff('textDecorationThickness');
+          = hasDiffOutline
+          || hasDiffBorder
+          || diff('fontSize')
+          || diff('fontStyle')
+          || diff('textDecorationLine')
+          || diff('textDecorationStyle')
+          || diff('textDecorationThickness');
+          // Add the determination to the result.
           const status = hasIndicator ? 'nonOutlinePresent' : 'indicatorMissing';
           addElementFacts(element, status);
         }
       }
-    });
+    };
     return data;
-  }, withItems);
+  }, [allowedDelay, withItems]);
   return {result: data};
 };

package/validation/tests/scripts/focInd.json

@@ -15,9 +15,10 @@
     {
       "type": "test",
       "which": "focInd",
-      "what": "focus indication",
-      "withItems": false,
       "revealAll": false,
+      "allowedDelay": 0,
+      "withItems": false,
+      "what": "focus indication",
       "expect": [
         ["totals.total", "=", 4],
         ["totals.types.indicatorMissing.total", "=", 0],
@@ -36,15 +37,19 @@
     {
       "type": "test",
       "which": "focInd",
-      "what": "focus indication",
-      "withItems": false,
       "revealAll": false,
+      "allowedDelay": 150,
+      "withItems": true,
+      "what": "focus indication",
       "expect": [
-        ["totals.total", "=", 5],
-        ["totals.types.indicatorMissing.total", "=", 1],
-        ["totals.types.indicatorMissing.tagNames.INPUT", "=", 1],
-        ["totals.types.nonOutlinePresent.total", "=", 1],
+        ["totals.total", "=", 9],
+        ["totals.types.indicatorMissing.total", "=", 3],
+        ["totals.types.indicatorMissing.tagNames.A", "=", 1],
+        ["totals.types.indicatorMissing.tagNames.INPUT", "=", 2],
+        ["totals.types.nonOutlinePresent.total", "=", 3],
+        ["totals.types.nonOutlinePresent.tagNames.A", "=", 1],
         ["totals.types.nonOutlinePresent.tagNames.BUTTON", "=", 1],
+        ["totals.types.nonOutlinePresent.tagNames.INPUT", "=", 1],
         ["totals.types.outlinePresent.total", "=", 3],
         ["totals.types.outlinePresent.tagNames.A", "=", 1],
         ["totals.types.outlinePresent.tagNames.BUTTON", "=", 1],

package/validation/tests/targets/focInd/bad.html

@@ -6,26 +6,61 @@
     <meta name="description" content="tester">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <style>
-      input[type=text]:focus {
+      #button:focus, #checkbox:focus {
+        outline: 3px solid blue;
+        outline-offset: 2px;
+      }
+      #checkbox {
+        transition-property: outline;
+        transition-delay: 35ms;
+        transition-duration: 40ms;
+      }
+      #outlinedInput {
+        outline: 2px solid black;
+      }
+      #outlinedInput:focus {
+        outline: 2px solid brown;
+      }
+      #slowLink {
+        transition-property: border;
+        transition-delay: 125ms;
+      }
+      #slowLink:focus, #sluggishLink:focus {
+        border: 2px solid green;
         outline: none;
       }
-      input[type=checkbox]:focus {
-        outline: 3px blue solid;
-        outline-offset: 2px;
+      #sluggishLink {
+        transition-property: border;
+        transition-delay: 525ms;
       }
       #special:focus {
         outline: none;
         text-decoration-line: underline overline;
-        text-decoration-color: orange;
+        text-decoration-color: darkorange;
+      }
+      #textInput:focus {
+        outline: none;
+      }
+      #thickOutlineInput {
+        outline: 1px solid black;
+      }
+      #thickOutlineInput:focus {
+        outline: 4px solid black;
       }
     </style>
   </head>
   <body>
     <main>
       <h1>Page with mixed focus indication</h1>
-      <p>This paragraph 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>. The link and button exhibit default focus indicators, but the input has none.</p>
-      <p>This paragraph contains a checkbox with an enhanced focus-indication outline. <label><input type="checkbox"> I am human</label></p>
-      <p>This paragraph contains a button with a non-outline focus indicator. <button id="special" type="button">special button</button></p>
+      <p>This paragraph contains a link to <a href="https://en.wikipedia.org">English information</a>, which exhibits a default focus indicator.</p>
+      <p>This paragraph contains a <button id="button" type="button">button</button> with a custom outline as its focus indicator.</p>
+      <p>This paragraph contains a <label>text input <input id="textInput" type="text"></label> with the focus indicator suppressed.</p>
+      <p>This paragraph contains a <label>text input <input id="outlinedInput" type="text"></label> with a custom outline, which changes only color when the input is focused.</p>
+      <p>This paragraph contains a <label>text input <input id="thickOutlineInput" type="text"></label> with a custom outline, which changes only thickness when the input is focused.</p>
+      <p>This paragraph contains a checkbox with an enhanced focus-indication outline that finishes appearing 75 ms after the checkbox becomes focused. <label><input id="checkbox" type="checkbox"> I am a bad page.</label></p>
+      <p>This paragraph contains a link to <a id="slowLink" href="https://fr.wikipedia.org">French information</a> with a custom border as its only focus indicator. The border appears 125 ms after the link becomes focused.</p>
+      <p>This paragraph contains a link to <a id="sluggishLink" href="https://de.wikipedia.org">German information</a> with a custom border as its only focus indicator. The border appears 525 ms after the link becomes focused.</p>
+      <p>This paragraph contains a button with a focus indicator consisting solely of an underline and an overline. <button id="special" type="button">special button</button></p>
     </main>
   </body>
 </html>