testaro 4.7.1 → 4.9.0

package/package.json

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

package/tests/labClash.js

@@ -71,33 +71,32 @@ exports.reporter = async (page, withItems) => {
           }
         }
       }
-      // Content label if details required.
-      if (withItems) {
-        // Of button.
-        if (labelee.tagName === 'BUTTON') {
-          const content = debloat(labelee.textContent);
-          if (content) {
-            texts.content = content;
-          }
+      // Content label.
+      // Of button.
+      if (labelee.tagName === 'BUTTON') {
+        const content = debloat(labelee.textContent);
+        if (content) {
+          texts.content = content;
         }
-        // Of submit input.
-        else if (labelee.tagName === 'INPUT' && labelee.type === 'submit' && labelee.value) {
-          const content = debloat(labelee.value);
-          if (content) {
-            texts.content = content;
-          }
+      }
+      // Of submit input.
+      else if (labelee.tagName === 'INPUT' && labelee.type === 'submit' && labelee.value) {
+        const content = debloat(labelee.value);
+        if (content) {
+          texts.content = content;
+        }
+      }
+      // Of image input.
+      else if (labelee.tagName === 'INPUT' && labelee.type === 'image' && labelee.alt) {
+        const content = debloat(labelee.alt);
+        if (content) {
+          texts.content = content;
         }
       }
       const {totals} = data;
       const labelTypeCount = labelTypes.length;
       // If it is well labeled:
-      if (
-        labelTypeCount === 1
-        || ! labelTypeCount && (
-          labelee.tagName === 'BUTTON' && debloat(labelee.textContent).length
-          || labelee.tagName === 'INPUT' && labelee.type === 'submit' && labelee.value
-        )
-      ) {
+      if (labelTypeCount === 1 || (texts.content && ! labelTypeCount)) {
         // Increment the count of well-labeled items in the report.
         totals.wellLabeled++;
         // Add data on the item to the report, if required.

package/tests/role.js

@@ -22,8 +22,6 @@ exports.reporter = async page => await page.$eval('body', body => {
     'complementary',
     'contentinfo',
     'definition',
-    'dialog',
-    'document',
     'figure',
     'graphics-document',
     'gridcell',
@@ -38,7 +36,6 @@ exports.reporter = async page => await page.$eval('body', body => {
     'option',
     'progressbar',
     'radio',
-    'region',
     'row',
     'rowgroup',
     'rowheader',

package/validation/tests/scripts/focInd.json

@@ -42,13 +42,14 @@
       "withItems": true,
       "what": "focus indication",
       "expect": [
-        ["totals.total", "=", 7],
-        ["totals.types.indicatorMissing.total", "=", 2],
+        ["totals.total", "=", 9],
+        ["totals.types.indicatorMissing.total", "=", 3],
         ["totals.types.indicatorMissing.tagNames.A", "=", 1],
-        ["totals.types.indicatorMissing.tagNames.INPUT", "=", 1],
-        ["totals.types.nonOutlinePresent.total", "=", 2],
+        ["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/scripts/labClash.json

@@ -20,7 +20,7 @@
       "expect": [
         ["totals.mislabeled", "=", 0],
         ["totals.unlabeled", "=", 0],
-        ["totals.wellLabeled", "=", 6]
+        ["totals.wellLabeled", "=", 7]
       ]
     },
     {
@@ -35,7 +35,7 @@
       "withItems": false,
       "expect": [
         ["totals.mislabeled", "=", 3],
-        ["totals.unlabeled", "=", 2],
+        ["totals.unlabeled", "=", 3],
         ["totals.wellLabeled", "=", 0]
       ]
     }

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

@@ -7,22 +7,28 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <style>
       #button:focus, #checkbox:focus {
-        outline: 3px blue solid;
+        outline: 3px solid blue;
         outline-offset: 2px;
       }
-      #slowLink:focus, #sluggishLink:focus {
-        border: 2px green solid;
-        outline: none;
-      }
       #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;
+      }
       #sluggishLink {
         transition-property: border;
         transition-delay: 525ms;
@@ -35,6 +41,12 @@
       #textInput:focus {
         outline: none;
       }
+      #thickOutlineInput {
+        outline: 1px solid black;
+      }
+      #thickOutlineInput:focus {
+        outline: 4px solid black;
+      }
     </style>
   </head>
   <body>
@@ -43,6 +55,8 @@
       <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>

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

@@ -12,6 +12,10 @@
       <p>This paragraph contains an empty <button type="button" aria-label></button> button, with no accessible name.</p>
       <p>This is another <button id="labButton" type="button" aria-labelledby="buttonLabel">button</button> with its text content overridden by both an explicit label and a reference label as a <label id="buttonLabel" for="labButton">special type of button</label>.</p>
       <p>This is an implicitly and attribute-labeled <label>checkbox input <input id="cbox" type="checkbox" aria-label="a checkbox-type input"></label>.</p>
+      <p style="display: flex; align-items: center;">
+        <span>Here is an image input without a text alternative:</span>
+        <input type="image" src="delete.png" width="30rem">
+      </p>
       <p><span id="textInputLabel">Who is your favorite actor?</span> <input type="text" aria-labelledby="textInputLabel" aria-label="your favorite actor">.</p>
       <p>What do you think? Enter your thoughts into this text area, which is unlabeled.</p>
       <p><textarea aria-label></textarea></p>

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

@@ -10,6 +10,10 @@
     <main>
       <h1>Page with standard labeling</h1>
       <p>This paragraph contains a <button type="button">button</button> with its text content as accessible name, another <button id="labButton" type="button">button</button> with its text content overridden by an explicit label as a <label for="labButton">special type of button</label>, an <label>implicitly labeled text input <input type="text"></label>, and an explicitly labeled <label for="cbox">checkbox input</label>: <input id="cbox" type="checkbox">.</p>
+      <p style="display: flex; align-items: center;">
+        <span>Here is an image input with a text alternative:</span>
+        <input type="image" src="delete.png" alt="delete" width="30rem">
+      </p>
       <p>This <label>implicitly labeled text input <input id="textInput" type="text"></label> also has an explicit label, which validly provides <label for="textInput">additional information</label>.</p>
       <p><span id="what">What do you think?</span> Enter your thoughts into this text area, which is labeled by reference.</p>
       <p><textarea aria-labelledby="what"></textarea></p>

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

@@ -19,7 +19,7 @@
       </section>
       <section>
         <h2>Conflict</h2>
-        <p>The parent section of these sections has an unnecessary explicit role.</p>
+        <p>The parent section of these sections has an unnecessary explicit role, instead of an element with the same implicit role.</p>
       </section>
     </section>
   </body>