testaro 5.4.0 → 5.5.2

package/create.js

@@ -89,7 +89,8 @@ exports.runJob = async (scriptID, batchID) => {
                 // If there is no need to keep checking:
                 const reportNames = await fs.readdir(reportDir);
                 const timedOut = Date.now() - startTime > 1000 * timeLimit;
-                if (timedOut || reportNames.includes(`${id}.json`) || ! childAlive) {
+                const reportWritten = reportNames.includes(`${id}.json`);
+                if (timedOut || reportWritten || ! childAlive) {
                   // Stop checking.
                   clearInterval(reCheck);
                   // If the cause is a timeout:
@@ -98,7 +99,7 @@ exports.runJob = async (scriptID, batchID) => {
                     timeoutHosts.push(id);
                   }
                   // Otherwise, if the cause is a child crash:
-                  else if (! childAlive) {
+                  else if (! (childAlive || reportWritten)) {
                     // Add the host to the array of crashed hosts.
                     crashHosts.push(id);
                   }
@@ -121,7 +122,9 @@ exports.runJob = async (scriptID, batchID) => {
               console.log(`Reports not created:\n${JSON.stringify(timeoutHosts), null, 2}`);
             }
             if (crashHosts.length) {
-              console.log(`Hosts crashed:\n${JSON.stringify(crashHosts), null, 2}`);
+              console.log(
+                `Hosts crashed with or without report:\n${JSON.stringify(crashHosts, null, 2)}`
+              );
             }
           }
         };

package/data/roles.txt

@@ -0,0 +1,62 @@
+input type=checkbox	role=checkbox
+td	role=cell if the ancestor table element is exposed as a role=table
+td	role=gridcell if the ancestor table element is exposed as a role=grid or treegrid
+th	role=columnheader, rowheader or cell if the ancestor table element is exposed as a role=table
+td	role=columnheader, rowheader or gridcell if the ancestor table element is exposed as a role=grid or treegrid
+dd	role=definition	
+dt	role=term	
+hr	role=separator	
+li	role=listitem	
+ol	role=list	
+tr	role=row	
+ul	role=list	
+dfn	role=term
+nav	role=navigation	
+SVG	role=graphics-document	
+html	role=document
+main	role=main	
+math	role=math	
+menu	role=list	
+aside	role=complementary	
+table	role=table	
+tbody	role=rowgroup	
+tfoot	role=rowgroup	
+thead	role=rowgroup	
+button	role=button	
+dialog	role=dialog	
+figure	role=figure	
+output	role=status	
+article	role=article	
+details	role=group	
+section	role=region if the section element has an accessible name
+summary	role=button	
+datalist	role=listbox	
+fieldset	role=group	
+h1 to h6	role=heading, aria-level = the number in the element's tag name
+\
+progress	role=progressbar	
+textarea	role=textbox	
+a with href	role=link	
+area with href	role=link	
+img with alt=""	role=presentation
+input type=image	role=button	
+input type=radio	role=radio	
+input type=range	role=slider	
+input type=reset	role=button	
+input type=button	role=button	
+input type=number	role=spinbutton	
+input type=submit	role=button	
+img with alt="some text"	role=img	
+img without an alt attribute	role=img	
+input type=url with no list attribute	role=textbox	
+input type=tel, with no list attribute	role=textbox	
+input type=email with no list attribute	role=textbox	
+input type=search, with no list attribute	role=searchbox	
+form	If the form element has an accessible name: role=form. Otherwise, no corresponding role.	
+input type=text or with a missing or invalid type, with no list attribute	role=textbox	
+select (with a multiple attribute or a size attribute having value greater than 1)	role=listbox	
+select (with NO multiple attribute and NO size attribute having value greater than 1)	role=combobox	
+option element that is in a list of options or that represents a suggestion in a datalist	role=option	
+footer	If not a descendant of an article, aside, main, nav or section element, or an element with role=article, complementary, main, navigation or region then role=contentinfo. Otherwise no corresponding role.	
+header	If not a descendant of an article, aside, main, nav or section element, or an element with role=article, complementary, main, navigation or region then role=banner. Otherwise no corresponding role	
+input type=text, search, tel, url, email, or with a missing or invalid type, with a list attribute	role=combobox	

package/package.json

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

package/tests/focInd.js

@@ -138,7 +138,7 @@ exports.reporter = async (page, revealAll, allowedDelay, withItems) => {
           const hasIndicator
           = hasDiffOutline
           || hasDiffBorder
-          || diff('box-shadow')
+          || diff('boxShadow')
           || diff('fontSize')
           || diff('fontStyle')
           || diff('textDecorationLine')

package/tests/hover.js

@@ -28,10 +28,6 @@
   value in the same location being the target.
 */
 
-// CONSTANTS
-
-const data = {};
-
 // FUNCTIONS
 
 // Samples a population and returns the sample.
@@ -62,14 +58,13 @@ const textOf = async (element, limit) => {
   return text.trim().replace(/\s*/sg, '').slice(0, limit);
 };
 // Recursively reports impacts of hovering over triggers.
-const find = async (withItems, page, region, sample, popRatio) => {
+const find = async (data, withItems, page, region, sample, popRatio) => {
   // If any potential triggers remain:
   if (sample.length) {
     // Identify the first of them.
     const firstTrigger = sample[0];
     const tagNameJSHandle = await firstTrigger.getProperty('tagName')
     .catch(error => {
-      console.log(`ERROR getting trigger tag name (${error.message})`);
       return '';
     });
     if (tagNameJSHandle) {
@@ -89,7 +84,7 @@ const find = async (withItems, page, region, sample, popRatio) => {
         root = rootJSHandle.asElement();
       }
       // Identify all the descendants of the root.
-      const preDescendants = await root.$$('*');
+      const preDescendants = await root.$$(':visible');
       // Identify their opacities.
       const preOpacities = await page.evaluate(elements => elements.map(
         element => window.getComputedStyle(element).opacity
@@ -102,8 +97,11 @@ const find = async (withItems, page, region, sample, popRatio) => {
         });
         // Repeatedly seeks impacts.
         const getImpacts = async (interval, triesLeft) => {
+          // If the allowed trial count has not yet been exhausted:
           if (triesLeft--) {
-            const postDescendants = await root.$$('*');
+            // Get the collection of descendants of the root.
+            const postDescendants = await root.$$(':visible');
+            // Identify the prior descandants of the root still in existence.
             const remainerIndexes = await page.evaluate(args => {
               const preDescendants = args[0];
               const postDescendants = args[1];
@@ -112,6 +110,7 @@ const find = async (withItems, page, region, sample, popRatio) => {
               .filter(index => index > -1);
               return remainerIndexes;
             }, [preDescendants, postDescendants]);
+            // Get the count of elements added by the hover event.
             const additionCount = postDescendants.length - remainerIndexes.length;
             const removalCount = preDescendants.length - remainerIndexes.length;
             const remainers = [];
@@ -191,17 +190,22 @@ const find = async (withItems, page, region, sample, popRatio) => {
         console.log(`ERROR hovering (${error.message.replace(/\n.+/s, '')})`);
         data.totals.unhoverables++;
         if (withItems) {
-          const id = await firstTrigger.getAttribute('id');
-          data.items[region].unhoverables.push({
-            tagName,
-            id: id || '',
-            text: await textOf(firstTrigger, 50)
-          });
+          try {
+            const id = await firstTrigger.getAttribute('id');
+            data.items[region].unhoverables.push({
+              tagName,
+              id: id || '',
+              text: await textOf(firstTrigger, 50)
+            });
+          }
+          catch(error) {
+            console.log('ERROR itemizing unhoverable element');
+          }
         }
       }
     }
     // Process the remaining potential triggers.
-    await find(withItems, page, region, sample.slice(1), popRatio);
+    await find(data, withItems, page, region, sample.slice(1), popRatio);
   }
 };
 // Performs the hover test and reports results.
@@ -209,16 +213,18 @@ exports.reporter = async (
   page, headSize = 0, headSampleSize = -1, tailSampleSize = -1, withItems
 ) => {
   // Initialize the result.
-  data.totals = {
-    triggers: 0,
-    headTriggers: 0,
-    tailTriggers: 0,
-    impactTriggers: 0,
-    additions: 0,
-    removals: 0,
-    opacityChanges: 0,
-    opacityImpact: 0,
-    unhoverables: 0
+  const data = {
+    totals: {
+      triggers: 0,
+      headTriggers: 0,
+      tailTriggers: 0,
+      impactTriggers: 0,
+      additions: 0,
+      removals: 0,
+      opacityChanges: 0,
+      opacityImpact: 0,
+      unhoverables: 0
+    }
   };
   // If details are to be reported:
   if (withItems) {
@@ -255,10 +261,10 @@ exports.reporter = async (
   const tailSample = tailSampleSize === -1 ? tailTriggers : getSample(tailTriggers, tailSampleSize);
   // Find and document the impacts.
   if (headSample.length) {
-    await find(withItems, page, 'head', headSample, headTriggerCount / headSample.length);
+    await find(data, withItems, page, 'head', headSample, headTriggerCount / headSample.length);
   }
   if (tailSample.length) {
-    await find(withItems, page, 'tail', tailSample, tailTriggerCount / tailSample.length);
+    await find(data, withItems, page, 'tail', tailSample, tailTriggerCount / tailSample.length);
   }
   // Round the reported totals.
   Object.keys(data.totals).forEach(key => {

package/tests/role.js

@@ -133,12 +133,6 @@ exports.reporter = async page => await page.$eval('body', body => {
     dt: 'term',
     fieldset: 'group',
     figure: 'figure',
-    h1: 'heading',
-    h2: 'heading',
-    h3: 'heading',
-    h4: 'heading',
-    h5: 'heading',
-    h6: 'heading',
     hr: 'separator',
     html: 'document',
     li: 'listitem',
@@ -159,6 +153,207 @@ exports.reporter = async page => await page.$eval('body', body => {
     tr: 'row',
     ul: 'list'
   };
+  const implicitAttributes = {
+    a: [
+      {
+        role: 'link',
+        attributes: {
+          href: /./
+        }
+      }
+    ],
+    area: [
+      {
+        role: 'link',
+        attributes: {
+          href: /./
+        }
+      }
+    ],
+    h1: [
+      {
+        role: 'heading',
+        attributes: {
+          'aria-level': /^1$/
+        }
+      }
+    ],
+    h2: [
+      {
+        role: 'heading',
+        attributes: {
+          'aria-level': /^2$/
+        }
+      },
+      {
+        role: 'heading',
+        attributes: {
+          'aria-level': false
+        }
+      }
+    ],
+    h3: [
+      {
+        role: 'heading',
+        attributes: {
+          'aria-level': /^3$/
+        }
+      }
+    ],
+    h4: [
+      {
+        role: 'heading',
+        attributes: {
+          'aria-level': /^4$/
+        }
+      }
+    ],
+    h5: [
+      {
+        role: 'heading',
+        attributes: {
+          'aria-level': /^5$/
+        }
+      }
+    ],
+    h6: [
+      {
+        role: 'heading',
+        attributes: {
+          'aria-level': /^6$/
+        }
+      }
+    ],
+    input: [
+      {
+        role: 'checkbox',
+        attributes: {
+          type: /^checkbox$/
+        }
+      },
+      {
+        role: 'button',
+        attributes: {
+          type: /^(?:button|image|reset|submit)$/
+        }
+      },
+      {
+        role: 'combobox',
+        attributes: {
+          type: /^(?:email|search|tel|text|url)$/,
+          list: true
+        }
+      },
+      {
+        role: 'combobox',
+        attributes: {
+          type: false,
+          list: true
+        }
+      },
+      {
+        role: 'radio',
+        attributes: {
+          type: /^radio$/
+        }
+      },
+      {
+        role: 'searchbox',
+        attributes: {
+          type: /^search$/,
+          list: false
+        }
+      },
+      {
+        role: 'slider',
+        attributes: {
+          type: /^range$/
+        }
+      },
+      {
+        role: 'spinbutton',
+        attributes: {
+          type: /^number$/
+        }
+      },
+      {
+        role: 'textbox',
+        attributes: {
+          type: /^(?:email|tel|text|url)$/,
+          list: false
+        }
+      },
+      {
+        role: 'textbox',
+        attributes: {
+          type: false,
+          list: false
+        }
+      },
+      {
+        role: 'checkbox',
+        attributes: {
+          type: /^checkbox$/
+        }
+      },
+      {
+        role: 'checkbox',
+        attributes: {
+          type: /^checkbox$/
+        }
+      },
+    ],
+    img: [
+      {
+        role: 'presentation',
+        attributes: {
+          alt: /^$/
+        }
+      },
+      {
+        role: 'img',
+        attributes: {
+          alt: /./
+        }
+      },
+      {
+        role: 'img',
+        attributes: {
+          alt: false
+        }
+      }
+    ],
+    select: [
+      {
+        role: 'listbox',
+        attributes: {
+          multiple: true
+        }
+      },
+      {
+        role: 'listbox',
+        attributes: {
+          size: /^(?:[2-9]|[1-9]\d+)$/
+        }
+      },
+      {
+        role: 'combobox',
+        attributes: {
+          multiple: false,
+          size: false
+        }
+      },
+      {
+        role: 'combobox',
+        attributes: {
+          multiple: false,
+          size: /^1$/
+        }
+      }
+    ]
+  };
+  // Array of th and td elements with redundant roles.
+  const redundantCells = [];
   // FUNCTIONS
   const dataInit = (data, tagName, role) => {
     if (! data.tagNames[tagName]) {
@@ -171,6 +366,17 @@ exports.reporter = async page => await page.$eval('body', body => {
       };
     }
   };
+  const tallyTableRedundancy = (elements, okRoles, tagName) => {
+    elements.forEach(element => {
+      const role = element.getAttribute('role');
+      if (okRoles.includes(role)) {
+        dataInit(data, tagName, role);
+        data.redundantRoleElements++;
+        data.tagNames[tagName][role].redundant++;
+        redundantCells.push(element);
+      }
+    });
+  };
   // OPERATION
   // Remove the deprecated roles from the non-abstract roles.
   goodRoles.forEach(role => {
@@ -187,8 +393,25 @@ exports.reporter = async page => await page.$eval('body', body => {
     redundantRoleElements: 0,
     tagNames: {}
   };
-  // Identify the elements with redundant roles and bad roles.
-  roleElements.forEach(element => {
+  // Identify the th and td elements with redundant roles.
+  const gridHeaders = Array.from(
+    document.body.querySelectorAll('table[role=grid] th, table[role=treegrid] th')
+  );
+  const gridCells = Array.from(
+    document.body.querySelectorAll('table[role=grid] td, table[role=treegrid] td')
+  );
+  const tableHeaders = Array.from(
+    document.body.querySelectorAll('table[role=table] th, table:not([role]) th')
+  );
+  const tableCells = Array.from(
+    document.body.querySelectorAll('table[role=table] td, table:not([role]) td')
+  );
+  tallyTableRedundancy(gridHeaders, ['columnheader', 'rowheader', 'gridcell'], 'TH');
+  tallyTableRedundancy(gridCells, ['gridcell'], 'TD');
+  tallyTableRedundancy(tableHeaders, ['columnheader', 'rowheader', 'cell'], 'TH');
+  tallyTableRedundancy(tableCells, ['cell'], 'TD');
+  // Identify the additional elements with redundant roles and bad roles.
+  roleElements.filter(element => ! redundantCells.includes(element)).forEach(element => {
     const role = element.getAttribute('role');
     const tagName = element.tagName;
     // If the role is not absolutely valid:
@@ -196,11 +419,37 @@ exports.reporter = async page => await page.$eval('body', body => {
       // If it is bad or redundant:
       if (badRoles.has(role)) {
         dataInit(data, tagName, role);
-        // Add the facts to the result.
-        if (role === implicitRoles[tagName.toLowerCase()]) {
+        const lcTagName = tagName.toLowerCase();
+        // If it is simply redundant:
+        if (role === implicitRoles[lcTagName]) {
+          data.redundantRoleElements++;
+          data.tagNames[tagName][role].redundant++;
+        }
+        // Otherwise, if it is attributionally redundant:
+        else if (
+          implicitAttributes[lcTagName] && implicitAttributes[lcTagName].some(
+            criterion => role === criterion.role && Object.keys(criterion.attributes).every(
+              attributeName => {
+                const rule = criterion.attributes[attributeName];
+                const exists = element.hasAttribute(attributeName);
+                const value = exists ? element.getAttribute(attributeName) : null;
+                if (rule === true) {
+                  return exists;
+                }
+                else if (rule === false) {
+                  return ! exists;
+                }
+                else {
+                  return rule.test(value);
+                }
+              }
+            )
+          )
+        ) {
           data.redundantRoleElements++;
           data.tagNames[tagName][role].redundant++;
         }
+        // Otherwise, i.e. if it is absolutely invalid:
         else {
           data.badRoleElements++;
           data.tagNames[tagName][role].bad++;

package/validation/executors/debug.js

@@ -0,0 +1,62 @@
+// app.js
+// Validator for Testaro tests.
+
+const fs = require('fs').promises;
+const {handleRequest} = require(`${__dirname}/../../run`);
+const validateTests = async () => {
+  const totals = {
+    attempts: 0,
+    successes: 0
+  };
+  const scriptFileNames = await fs.readdir(`${__dirname}/../tests/scripts`);
+  for (const scriptFileName of ['hover.json']) {
+    const rawScriptJSON = await fs
+    .readFile(`${__dirname}/../tests/scripts/${scriptFileName}`, 'utf8');
+    const scriptJSON = rawScriptJSON
+    .replace(/__targets__/g, `file://${__dirname}/../tests/targets`);
+    const script = JSON.parse(scriptJSON);
+    const report = {script};
+    report.log = [];
+    report.acts = [];
+    await handleRequest(report);
+    const {log, acts} = report;
+    if (log.length === 2 && log[1].event === 'endTime' && /^\d{4}-.+$/.test(log[1].value)) {
+      console.log('Success: Log has been correctly populated');
+    }
+    else {
+      console.log('Failure: Log empty or invalid');
+      console.log(JSON.stringify(log, null, 2));
+    }
+    if (
+      acts.length === script.commands.length
+      && acts.every(
+        act => act.type && act.type === 'test'
+          ? act.result && act.result.failureCount !== undefined
+          : true
+      )
+    ) {
+      totals.attempts++;
+      totals.successes++;
+      console.log('Success: Reports have been correctly populated');
+      if (acts.every(
+        act => act.type === 'test' ? act.result.failureCount === 0 : true
+      )) {
+        totals.attempts++;
+        totals.successes++;
+        console.log('Success: No failures');
+      }
+      else {
+        totals.attempts++;
+        console.log('Failure: At least one test has at least one failure');
+        console.log(JSON.stringify(acts, null, 2));
+      }
+    }
+    else {
+      totals.attempts++;
+      console.log('Failure: Reports empty or invalid');
+      console.log(JSON.stringify(acts, null, 2));
+    }
+  }
+  console.log(`Grand totals: attempts ${totals.attempts}, successes ${totals.successes}`);
+};
+validateTests();

package/validation/tests/scripts/hover.json

@@ -16,12 +16,19 @@
       "type": "test",
       "which": "hover",
       "what": "hover",
-      "withItems": false,
+      "headSize": 3,
+      "headSampleSize": 3,
+      "tailSampleSize": 30,
+      "withItems": true,
       "expect": [
-        ["totals.triggers", "=", 0],
-        ["totals.madeVisible", "=", 0],
-        ["totals.opacityChanged", "=", 0],
-        ["totals.opacityAffected", "=", 0],
+        ["totals.triggers", "=", 2],
+        ["totals.headTriggers", "=", 2],
+        ["totals.tailTriggers", "=", 0],
+        ["totals.impactTriggers", "=", 0],
+        ["totals.additions", "=", 0],
+        ["totals.removals", "=", 0],
+        ["totals.opacityChanges", "=", 0],
+        ["totals.opacityImpact", "=", 0],
         ["totals.unhoverables", "=", 0]
       ]
     },
@@ -34,12 +41,19 @@
       "type": "test",
       "which": "hover",
       "what": "hover",
-      "withItems": false,
+      "headSize": 3,
+      "headSampleSize": 3,
+      "tailSampleSize": 30,
+      "withItems": true,
       "expect": [
-        ["totals.triggers", "=", 2],
-        ["totals.madeVisible", "=", 2],
-        ["totals.opacityChanged", "=", 1],
-        ["totals.opacityAffected", "=", 2],
+        ["totals.triggers", "=", 4],
+        ["totals.headTriggers", "=", 3],
+        ["totals.tailTriggers", "=", 1],
+        ["totals.impactTriggers", "=", 2],
+        ["totals.additions", "=", 3],
+        ["totals.removals", "=", 0],
+        ["totals.opacityChanges", "=", 1],
+        ["totals.opacityImpact", "=", 1],
         ["totals.unhoverables", "=", 1]
       ]
     }

package/validation/tests/scripts/role.json

@@ -18,7 +18,8 @@
       "what": "role",
       "expect": [
         ["roleElements", "=", 1],
-        ["badRoleElements", "=", 0]
+        ["badRoleElements", "=", 0],
+        ["redundantRoleElements", "=", 0]
       ]
     },
     {
@@ -31,11 +32,19 @@
       "which": "role",
       "what": "role",
       "expect": [
-        ["roleElements", "=", 3],
-        ["badRoleElements", "=", 3],
-        ["tagNames.SECTION.main", "=", 1],
-        ["tagNames.SECTION.section", "=", 1],
-        ["tagNames.H2.heading", "=", 1]
+        ["roleElements", "=", 9],
+        ["badRoleElements", "=", 6],
+        ["redundantRoleElements", "=", 3],
+        ["tagNames.SECTION.main.bad", "=", 1],
+        ["tagNames.SECTION.section.bad", "=", 1],
+        ["tagNames.H2.heading.bad", "=", 0],
+        ["tagNames.H2.heading.redundant", "=", 1],
+        ["tagNames.H3.heading.bad", "=", 2],
+        ["tagNames.H3.heading.redundant", "=", 1],
+        ["tagNames.INPUT.spinbutton.redundant", "=", 1],
+        ["tagNames.INPUT.textbox.bad", "=", 1],
+        ["tagNames.INPUT.textbox.redundant", "=", 0],
+        ["tagNames.INPUT.combobox.bad", "=", 1]
       ]
     }
   ]

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

@@ -9,10 +9,10 @@
   <body>
     <main>
       <h1>Page with deviant hover behavior</h1>
-      <p>This page contains a link to <a href="https://en.wikipedia.org" onmouseover="document.getElementById('translucent').style.opacity = 1">information</a>, a <button type="button" onmouseover="document.getElementById('hiddenP').style.display = 'block'">button</button>, and a <label>text input <input type="text"></label>. All three elements can be hovered over.</p>
+      <p>This page contains a link to <a href="https://en.wikipedia.org" onmouseover="document.getElementById('translucent').style.opacity = 1">information</a> and a <button type="button" onmouseover="document.getElementById('hiddenP').style.display = 'block'">bothersome button</button>. Both elements can be hovered over.</p>
       <p id="hiddenP" style="display: none">The button, when hovered over, makes this paragraph, and therefore this <a href="https://en.wikipedia.org/wiki/Web_accessibility">link on web accessibility</a> and this <button type="button">new button</button>, visible.</p>
       <p id="translucent" style="opacity: 0.4">The first link, when hovered over, changes the opacity of this paragraph from 0.4 to 1. That indirectly changes the opacity of this <span>word</span>, too.</p>
-      <p>The small button is mostly covered by a large one below.</p>
+      <p>The small button is mostly covered by a large one here, preventing the small button from receiving a hover event.</p>
       <p style="position: relative"><button style="position: absolute; left: 10rem">button</button><button style="position: absolute; left: 11rem; top: -0.5rem; font-size: x-large">bigger button</button></p>
     </main>
   </body>

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

@@ -9,7 +9,7 @@
   <body>
     <main>
       <h1>Page with standard hover behavior</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>. All three can be hovered over, and hovering over any of them does not trigger any change in content.</p>
+      <p>This paragraph contains a link to <a href="https://en.wikipedia.org">information</a> and a <button type="button">button</button>. Both of them can be hovered over, and hovering over either of them does not trigger any change in content.</p>
     </main>
   </body>
 </html>

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

@@ -11,15 +11,37 @@
       <h1>Page with deviant role elements</h1>
       <section role="section">
         <h2>Abstraction</h2>
-        <p>This section has an abstract role.</p>
+        <p>This section has an abstract role, so it is bad.</p>
       </section>
       <section>
         <h2 role="heading">Redundancy</h2>
-        <p>This section has a redundant role.</p>
+        <p>The heading of this section has a redundant role, with an inferred level.</p>
+        <section>
+          <h3 role="heading" aria-level="3">Redundancy with explicit level</h3>
+          <p>The heading of this section has a redundant role because the stated level is 3 and the implicit level is 3.</p>
+        </section>
+        <section>
+          <h3 role="heading">Failed redundancy for missing level</h3>
+          <p>The heading of this section has a heading that fails redundancy because the inferred level is 2 but the explicit level is 3. So the element role is bad.</p>
+        </section>
+        <section>
+          <h3 role="heading" aria-level="4">Failed redundancy for wrong level</h3>
+          <p>The heading of this section has a heading that fails redundancy because the attributional level is 4 but the explicit level is 3. So the element role is bad.</p>
+        </section>
       </section>
       <section>
         <h2>Conflict</h2>
-        <p>The parent section of these sections has an unnecessary explicit role, instead of an element with the same implicit role.</p>
+        <p>The parent section of these sections has an unnecessary explicit role <code>main</code>, instead of a <code>main</code> element with the same implicit role.</p>
+      </section>
+      <section>
+        <h2>Attributes</h2>
+        <h3>Valid redundancy</h3>
+        <p>This paragraph contains an input for a number. It has an implicit <code>spinbutton</code> role and the same redundant explicit role. <input type="number" role="spinbutton"></p>
+        <h3>Failed redundancy</h3>
+        <p>This paragraph contains an input for a number. It has an implicit <code>spinbutton</code> role but an explicit <code>textbox</code> role, so its role is bad. <input type="number" role="textbox"></p>
+        <h3>Attribute existence</h3>
+        <datalist id="options"><option value="a"></option><option value="b"></option></datalist>
+        <p>This input is identical, except that it omits the <code>list</code> attribute. That makes its implicit role <code>textbox</code>, so the explicit role of <code>combobox</code> is bad. <input role="combobox"></p>
       </section>
     </section>
   </body>