testaro 4.6.0 → 4.7.1

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.0",
+  "version": "4.7.1",
   "description": "Automation of accessibility testing",
   "main": "index.js",
   "scripts": {

package/procs/linksByType.js

@@ -1,90 +1,54 @@
 // Returns an object classifying the links in a page by layout.
 exports.linksByType = async page => await page.evaluateHandle(() => {
   // FUNCTION DEFINITIONS START
-  // Returns whether an element has fluid display.
-  const hasFluidDisplay = element => {
-    const display = window.getComputedStyle(element).display;
-    return display.startsWith('inline') || display.startsWith('flex');
-  };
-  // Returns whether an element and its children have fluid display.
-  const isFluid = element => {
-    if (hasFluidDisplay(element)) {
-      return Array.from(element.children).every(child => hasFluidDisplay(child));
-    }
-    else {
-      return false;
-    }
-  };
-  // Returns whether all siblings of an element have fluid display.
-  const hasFluidSiblings = element => {
-    const preSib = element.previousElementSibling;
-    if (preSib) {
-      const postSib = element.nextElementSibling;
-      if (postSib) {
-        return isFluid(preSib) && isFluid(postSib);
-      }
-      else {
-        return isFluid(preSib);
-      }
-    }
-    else {
-      const postSib = element.nextElementSibling;
-      if (postSib) {
-        return isFluid(postSib);
-      }
-      else {
-        return true;
-      }
-    }
-  };
   // Removes spacing characters from a text.
   const despace = text => text.replace(/\s/g, '');
-  // Returns whether an element has text that is less than its nearest nonfluid ancestor’s.
-  const hasAdjacentText = element => {
-    // Recursively returns the first ancestor element with nonfluid display.
-    const blockOf = node => {
-      const parentElement = node.parentElement;
-      if (hasFluidDisplay(parentElement)) {
-        return blockOf(parentElement);
-      }
-      else {
-        return parentElement;
-      }
-    };
-    // Identify the text of the element.
-    const elementText = despace(element.textContent);
-    // Identify the text of its nearest nonfluid ancestor.
-    const blockText = despace(blockOf(element).textContent);
-    // If the element has any text:
-    if (elementText) {
-      // Return whether it is less than its nearest nonfluid ancestor’s.
-      return despace(blockText).length > elementText.length;
+  // Returns whether a list is a list entirely of links.
+  const isLinkList = list => {
+    const listItems = Array.from(list.children);
+    if (listItems.length > 1) {
+      return listItems.length > 1 && listItems.every(item => {
+        if (item.tagName === 'LI') {
+          const {children} = item;
+          if (children.length === 1) {
+            const link = children[0];
+            if (link.tagName === 'A') {
+              const itemText = despace(item.textContent);
+              const linkText = despace(link.textContent);
+              return itemText.length === linkText.length;
+            }
+            else {
+              return false;
+            }
+          }
+          else {
+            return false;
+          }
+        }
+        else {
+          return false;
+        }
+      });
     }
-    // Otherwise, i.e. if the element has no text:
     else {
-      // Return no.
       return false;
     }
   };
   // FUNCTION DEFINITIONS END
-  // Get the links in the page.
-  const links = Array
-  .from(document.body.getElementsByTagName('a'))
-  .filter(element => ! element.hasAttribute('role'));
-  // Initialize an object classifying the links.
-  const linkTypes = {
-    inline: [],
-    block: []
-  };
-  // Populate it.
-  links.forEach(link => {
-    if (isFluid(link) && hasFluidSiblings(link) && hasAdjacentText(link)) {
-      linkTypes.inline.push(link);
-    }
-    else {
-      linkTypes.block.push(link);
+  // Identify the list links in the page.
+  const lists = Array.from(document.body.querySelectorAll('ul, ol'));
+  const listLinks = [];
+  lists.forEach(list => {
+    if (isLinkList(list)) {
+      listLinks.push(... Array.from(list.querySelectorAll('a')));
     }
   });
-  // Return it.
-  return linkTypes;
+  // Identify the adjacent links in the page.
+  const allLinks = Array.from(document.body.querySelectorAll('a'));
+  const adjacentLinks = allLinks.filter(link => ! listLinks.includes(link));
+  // Return the data.
+  return {
+    adjacent: adjacentLinks,
+    list: listLinks
+  };
 });

package/run.js

@@ -36,7 +36,7 @@ const tests = {
   hover: 'hover-caused content additions',
   ibm: 'IBM Accessibility Checker',
   labClash: 'labeling inconsistencies',
-  linkUl: 'inline-link underlining',
+  linkUl: 'adjacent-link underlining',
   menuNav: 'keyboard navigation between focusable menu items',
   motion: 'motion',
   radioSet: 'fieldset grouping of radio buttons',

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/tests/linkUl.js

@@ -1,11 +1,12 @@
 /*
   linkUl
-  This test reports failures to underline inline links. Underlining and color are the
-  traditional style properties that identify links. Collections of links in blocks can be
-  recognized without underlines, but inline links are difficult or impossible to distinguish
-  visually from surrounding text if not underlined. Underlining inline links only on hover
-  provides an indicator valuable only to mouse users, and even they must traverse the text with
-  a mouse merely to discover which passages are links.
+  This test reports failures to underline links that are adjacent to nonlink text. Underlining
+  and color are the traditional style properties that identify links. Lists of links containing
+  only links can be recognized without underlines, but other links are difficult or impossible to
+  distinguish visually from surrounding text if not underlined. Underlining adjacent links only on
+  hover provides an indicator valuable only to mouse users, and even they must traverse the text
+  with a mouse merely to discover which passages are links. This tests treats links as adjacent
+  unless they are in an ordered or unordered list of at least 2 links with no other text.
 */
 exports.reporter = async (page, withItems) => {
   // Identify the links in the page, by type.
@@ -17,14 +18,14 @@ exports.reporter = async (page, withItems) => {
     // Returns a space-minimized copy of a string.
     const compact = string => string.replace(/[\t\n]/g, '').replace(/\s{2,}/g, ' ').trim();
     // FUNCTION DEFINITION END
-    // Identify the inline links.
-    const inLinks = linkTypes.inline;
-    const inLinkCount = inLinks.length;
+    // Identify the adjacent links.
+    const adjacentLinks = linkTypes.adjacent;
+    const adjacentLinkCount = adjacentLinks.length;
     let underlined = 0;
-    const ulInLinkTexts = [];
-    const nulInLinkTexts = [];
+    const ulAdjacentLinkTexts = [];
+    const nulAdjacentLinkTexts = [];
     // For each of them:
-    inLinks.forEach(link => {
+    adjacentLinks.forEach(link => {
       // Identify the text of the link if itemization is required.
       const text = withItems ? compact(link.textContent) : '';
       // If it is underlined:
@@ -33,22 +34,24 @@ exports.reporter = async (page, withItems) => {
         underlined++;
         // If required, add its text to the array of their texts.
         if (withItems) {
-          ulInLinkTexts.push(text);
+          ulAdjacentLinkTexts.push(text);
         }
       }
       // Otherwise, if it is not underlined and itemization is required:
       else if (withItems) {
         // Add its text to the array of texts of non-underlined inline links.
-        nulInLinkTexts.push(text);
+        nulAdjacentLinkTexts.push(text);
       }
     });
     // Get the percentage of underlined links among all inline links.
-    const underlinedPercent = inLinkCount ? Math.floor(100 * underlined / inLinkCount) : 'N/A';
+    const underlinedPercent = adjacentLinkCount
+    ? Math.floor(100 * underlined / adjacentLinkCount)
+    : 'N/A';
     const data = {
       totals: {
-        links: inLinks.length + linkTypes.block.length,
-        inline: {
-          total: inLinkCount,
+        links: adjacentLinks.length + linkTypes.list.length,
+        adjacent: {
+          total: adjacentLinkCount,
           underlined,
           underlinedPercent
         }
@@ -56,8 +59,8 @@ exports.reporter = async (page, withItems) => {
     };
     if (withItems) {
       data.items = {
-        underlined: ulInLinkTexts,
-        notUnderlined: nulInLinkTexts
+        underlined: ulAdjacentLinkTexts,
+        notUnderlined: nulAdjacentLinkTexts
       };
     }
     return {result: data};

package/tests/styleDiff.js

@@ -1,12 +1,12 @@
 /*
   styleDiff
   This test reports style differences among links, buttons, and headings. It assumes
-  that an accessible page employs few or only one style for inline links, and likewise
-  for non-inline links, buttons, and headings at each level. The test considers only
+  that an accessible page employs few or only one style for adjacent links, and likewise
+  for list links, buttons, and headings at each level. The test considers only
   particular style properties, listed in the 'mainStyles' and 'headingStyles' arrays.
 */
 exports.reporter = async (page, withItems) => {
-  // Get an object with arrays of block and inline links as properties.
+  // Get an object with arrays of list and adjacent links as properties.
   const linkTypes = await require('../procs/linksByType').linksByType(page);
   return await page.$eval('body', (body, args) => {
     const withItems = args[0];
@@ -51,8 +51,8 @@ exports.reporter = async (page, withItems) => {
     const elementClasses = {
       headings: {},
       other: {
-        aInline: linkTypes.inline,
-        aBlock: linkTypes.block
+        aAdjacent: linkTypes.adjacent,
+        aList: linkTypes.list
       }
     };
     // For each heading tag name:

package/tests/tabNav.js

@@ -4,70 +4,69 @@
   Standards are based on https://www.w3.org/TR/wai-aria-practices-1.1/#tabpanel.
 */
 
-// CONSTANTS
+// FUNCTIONS
 
-const data = {
-  totals: {
-    navigations: {
-      all: {
-        total: 0,
-        correct: 0,
-        incorrect: 0
-      },
-      specific: {
-        tab: {
-          total: 0,
-          correct: 0,
-          incorrect: 0
-        },
-        left: {
-          total: 0,
-          correct: 0,
-          incorrect: 0
-        },
-        right: {
-          total: 0,
-          correct: 0,
-          incorrect: 0
-        },
-        up: {
-          total: 0,
-          correct: 0,
-          incorrect: 0
-        },
-        down: {
-          total: 0,
-          correct: 0,
-          incorrect: 0
-        },
-        home: {
+// Tests tab-list navigation and reports results.
+exports.reporter = async (page, withItems) => {
+  // Initialize the results.
+  const data = {
+    totals: {
+      navigations: {
+        all: {
           total: 0,
           correct: 0,
           incorrect: 0
         },
-        end: {
-          total: 0,
-          correct: 0,
-          incorrect: 0
+        specific: {
+          tab: {
+            total: 0,
+            correct: 0,
+            incorrect: 0
+          },
+          left: {
+            total: 0,
+            correct: 0,
+            incorrect: 0
+          },
+          right: {
+            total: 0,
+            correct: 0,
+            incorrect: 0
+          },
+          up: {
+            total: 0,
+            correct: 0,
+            incorrect: 0
+          },
+          down: {
+            total: 0,
+            correct: 0,
+            incorrect: 0
+          },
+          home: {
+            total: 0,
+            correct: 0,
+            incorrect: 0
+          },
+          end: {
+            total: 0,
+            correct: 0,
+            incorrect: 0
+          }
         }
+      },
+      tabElements: {
+        total: 0,
+        correct: 0,
+        incorrect: 0
+      },
+      tabLists: {
+        total: 0,
+        correct: 0,
+        incorrect: 0
       }
-    },
-    tabElements: {
-      total: 0,
-      correct: 0,
-      incorrect: 0
-    },
-    tabLists: {
-      total: 0,
-      correct: 0,
-      incorrect: 0
     }
-  }
-};
-
-// FUNCTIONS
-
-exports.reporter = async (page, withItems) => {
+  };
   if (withItems) {
     data.tabElements = {
       incorrect: [],

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/scripts/linkUl.json

@@ -10,52 +10,52 @@
     {
       "type": "url",
       "which": "__targets__/linkUl/good.html",
-      "what": "page with underlined inline links"
+      "what": "page with underlined adjacent links"
     },
     {
       "type": "test",
       "which": "linkUl",
-      "what": "link underlining",
+      "what": "adjacent-link underlining",
       "withItems": false,
       "expect": [
         ["totals.links", "=", 6],
-        ["totals.inline.total", "=", 2],
-        ["totals.inline.underlined", "=", 2],
-        ["totals.inline.underlinedPercent", "=", 100]
+        ["totals.adjacent.total", "=", 2],
+        ["totals.adjacent.underlined", "=", 2],
+        ["totals.adjacent.underlinedPercent", "=", 100]
       ]
     },
     {
       "type": "url",
       "which": "__targets__/linkUl/bad.html",
-      "what": "page without underlined inline links"
+      "what": "page with nonunderlined adjacent links"
     },
     {
       "type": "test",
       "which": "linkUl",
-      "what": "link underlining",
+      "what": "adjacent-link underlining",
       "withItems": false,
       "expect": [
-        ["totals.links", "=", 2],
-        ["totals.inline.total", "=", 2],
-        ["totals.inline.underlined", "=", 0],
-        ["totals.inline.underlinedPercent", "=", 0]
+        ["totals.links", "=", 6],
+        ["totals.adjacent.total", "=", 6],
+        ["totals.adjacent.underlined", "=", 0],
+        ["totals.adjacent.underlinedPercent", "=", 0]
       ]
     },
     {
       "type": "url",
       "which": "__targets__/linkUl/na.html",
-      "what": "page without inline links"
+      "what": "page without adjacent links"
     },
     {
       "type": "test",
       "which": "linkUl",
-      "what": "link underlining",
+      "what": "adjacent-link underlining",
       "withItems": false,
       "expect": [
         ["totals.links", "=", 2],
-        ["totals.inline.total", "=", 0],
-        ["totals.inline.underlined", "=", 0],
-        ["totals.inline.underlinedPercent", "=", "N/A"]
+        ["totals.adjacent.total", "=", 0],
+        ["totals.adjacent.underlined", "=", 0],
+        ["totals.adjacent.underlinedPercent", "=", "N/A"]
       ]
     }
   ]

package/validation/tests/scripts/styleDiff.json

@@ -18,13 +18,13 @@
       "what": "styleDiff",
       "withItems": false,
       "expect": [
-        ["totals.aInline.total", "=", 2],
-        ["totals.aBlock.total", "=", 2],
+        ["totals.aAdjacent.total", "=", 2],
+        ["totals.aList.total", "=", 2],
         ["totals.button.total", "=", 2],
         ["totals.h1.total", "=", 1],
         ["totals.h2.total", "=", 4],
-        ["totals.aInline.subtotals"],
-        ["totals.aBlock.subtotals"],
+        ["totals.aAdjacent.subtotals"],
+        ["totals.aList.subtotals"],
         ["totals.button.subtotals"],
         ["totals.h1.subtotals"],
         ["totals.h2.subtotals"]
@@ -41,15 +41,15 @@
       "what": "styleDiff",
       "withItems": false,
       "expect": [
-        ["totals.aInline.total", "=", 2],
-        ["totals.aBlock.total", "=", 2],
+        ["totals.aAdjacent.total", "=", 2],
+        ["totals.aList.total", "=", 2],
         ["totals.button.total", "=", 2],
         ["totals.h1.total", "=", 1],
         ["totals.h2.total", "=", 4],
-        ["totals.aInline.subtotals.0", "=", 1],
-        ["totals.aInline.subtotals.1", "=", 1],
-        ["totals.aBlock.subtotals.0", "=", 1],
-        ["totals.aBlock.subtotals.1", "=", 1],
+        ["totals.aAdjacent.subtotals.0", "=", 1],
+        ["totals.aAdjacent.subtotals.1", "=", 1],
+        ["totals.aList.subtotals.0", "=", 1],
+        ["totals.aList.subtotals.1", "=", 1],
         ["totals.button.subtotals.0", "=", 1],
         ["totals.button.subtotals.1", "=", 1],
         ["totals.h1.subtotals"],

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>

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

@@ -2,15 +2,34 @@
 <html lang="en-US">
   <head>
     <meta charset="utf-8">
-    <title>Page without underlined inline links</title>
+    <title>Page without underlined adjacent links</title>
     <meta name="description" content="tester">
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <style>
+      .nude > li > a {
+        text-decoration: none;
+      }
+    </style>
   </head>
   <body>
     <main>
-      <h1>Page without underlined inline links</h1>
-      <p>This paragraph contains an inline link to <a style="text-decoration: overline" href="https://en.wikipedia.org">English information</a> that has an overline instead of an underline.</p>
-      <p>This paragraph contains an inline link to <a style="text-decoration: none" href="https://fr.wikipedia.org">French information</a> without any underline.</p>
+      <h1>Page without underlined adjacent links</h1>
+      <p>This paragraph contains an adjacent link to <a style="text-decoration: overline" href="https://en.wikipedia.org">English information</a> that has an overline instead of an underline.</p>
+      <p>This paragraph contains an adjacent link to <a style="text-decoration: none" href="https://fr.wikipedia.org">French information</a> without any underline.</p>
+      <p>This paragraph introduces a list of nonunderlined links, but it contains only 1 link, so that link fails to be classified as a list link.</p>
+      <ul class="nude"</ul>
+        <li><a href="https://eus.wikipedia.org">Basque information</a></li>
+      </ul>
+      <p>This paragraph introduces a list of nonunderlined links, but it contains an item that is not a link, so its link fails to be classified as a list link.</p>
+      <ul class="nude">
+        <li><span>Spanish information is not available</span></li>
+        <li><a href="https://eo.wikipedia.org">Esperanto information</a></li>
+      </ul>
+      <p>This paragraph introduces a list of nonunderlined links, but it contains additional text, so its links fail to be classified as a list link.</p>
+      <ul class="nude">
+        <li><a href="https://fr.wikipedia.org">French information</a> is available, as well as</li>
+        <li><a href="https://tr.wikipedia.org">Turkish information</a></li>
+      </ul>
     </main>
   </body>
 </html>

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

@@ -2,7 +2,7 @@
 <html lang="en-US">
   <head>
     <meta charset="utf-8">
-    <title>Page with underlined inline links</title>
+    <title>Page with underlined adjacent links</title>
     <meta name="description" content="tester">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <style>
@@ -13,14 +13,14 @@
   </head>
   <body>
     <main>
-      <h1>Page with underlined inline links</h1>
-      <p>This page contains inline links to <a href="https://en.wikipedia.org">English information</a> and <a style="text-decoration: underline wavy 2px" href="https://fr.wikipedia.org">French information</a>. The latter is weird, but still an underline.</p>
-      <p>The following links, however, are not inline, so can be (and are) devoid of underlines.</p>
+      <h1>Page with underlined adjacent links</h1>
+      <p>This page contains adjacent links to <a href="https://en.wikipedia.org">English information</a> and <a style="text-decoration: underline wavy 2px" href="https://fr.wikipedia.org">French information</a>. The latter is weird, but still an underline.</p>
+      <p>The following links, however, are not adjacent, so can be (and are) devoid of underlines.</p>
       <ul class="nude">
         <li><a href="https://sp.wikipedia.org">Spanish information</a></li>
         <li><a href="https://eo.wikipedia.org">Esperanto information</a></li>
       </ul>
-      <p>The following links are not inline, so can be devoid of underlines, but still have them.</p>
+      <p>The following links are not adjacent, so are permitted to be devoid of underlines, but still have them.</p>
       <ul>
         <li><a href="https://eus.wikipedia.org">Basque information</a></li>
         <li><a href="https://tr.wikipedia.org">Turkish information</a></li>

package/validation/tests/targets/linkUl/na.html

@@ -8,9 +8,9 @@
   </head>
   <body>
     <main>
-      <h1>Page without inline links</h1>
-      <p>This page contains no inline links.</p>
-      <p>The following links are not inline.</p>
+      <h1>Page without adjacent links</h1>
+      <p>This page contains list links but no adjacent links.</p>
+      <p>The following links are list links.</p>
       <ul>
         <li><a href="https://eus.wikipedia.org">Basque information</a></li>
         <li><a href="https://tr.wikipedia.org">Turkish information</a></li>