testaro 4.7.0 → 4.7.1

package/package.json

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

package/tests/focInd.js

@@ -121,20 +121,20 @@ exports.reporter = async (page, revealAll, allowedDelay, withItems) => {
             }
           }
         }
-        // If no outline was allowed:
+        // 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'
-          && styleDec.borderWidth !== '0px'
-          || (styleDec.borderStyle !== 'none' && diff('borderWidth'))
-          || diff('outlineStyle')
-          && styleBlurred.outlineWidth !== '0px'
-          && styleDec.outlineWidth !== '0px'
-          || (styleDec.outlineStyle !== 'none' && diff('outlineWidth'))
+          = hasDiffOutline
+          || hasDiffBorder
           || diff('fontSize')
           || diff('fontStyle')
           || diff('textDecorationLine')

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,14 +37,17 @@
     {
       "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.total", "=", 7],
+        ["totals.types.indicatorMissing.total", "=", 2],
+        ["totals.types.indicatorMissing.tagNames.A", "=", 1],
         ["totals.types.indicatorMissing.tagNames.INPUT", "=", 1],
-        ["totals.types.nonOutlinePresent.total", "=", 1],
+        ["totals.types.nonOutlinePresent.total", "=", 2],
+        ["totals.types.nonOutlinePresent.tagNames.A", "=", 1],
         ["totals.types.nonOutlinePresent.tagNames.BUTTON", "=", 1],
         ["totals.types.outlinePresent.total", "=", 3],
         ["totals.types.outlinePresent.tagNames.A", "=", 1],

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

@@ -6,26 +6,47 @@
     <meta name="description" content="tester">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <style>
-      input[type=text]:focus {
-        outline: none;
-      }
-      input[type=checkbox]:focus {
+      #button:focus, #checkbox:focus {
         outline: 3px blue solid;
         outline-offset: 2px;
       }
+      #slowLink:focus, #sluggishLink:focus {
+        border: 2px green solid;
+        outline: none;
+      }
+      #checkbox {
+        transition-property: outline;
+        transition-delay: 35ms;
+        transition-duration: 40ms;
+      }
+      #slowLink {
+        transition-property: border;
+        transition-delay: 125ms;
+      }
+      #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;
       }
     </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 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>