testaro 1.0.0

package/validation/targets/menuNav/good.js

@@ -0,0 +1,365 @@
+// UTILITIES FOR EVENT HANDLERS
+
+// Returns the menu controlled by a menu button.
+const controlledMenu = button => document.getElementById(button.getAttribute('aria-controls'));
+// Returns the button controlling a menu.
+const controller = menu => document.body.querySelector(`button[aria-controls=${menu.id}`);
+// Returns whether an element is a menu item.
+const isMenuItem = element => element.getAttribute('role') === 'menuitem';
+// Returns the focus type of a menu.
+const focusTypeOf = menu => menu.hasAttribute('aria-activedescendant') ? 'fake' : 'true';
+// Closes a menu controlled by a button.
+const closeMenu = button => {
+  // If the menu is open:
+  if (button.ariaExpanded === 'true') {
+    // Close it.
+    button.setAttribute('aria-expanded', 'false');
+    const menu = controlledMenu(button);
+    menu.className = 'shut';
+    menu.tabIndex = -1;
+  }
+};
+// Returns the menu items of a menu.
+const menuItemsOf = menu => {
+  const items = [];
+  const children = Array.from(menu.children);
+  children.forEach(child => {
+    if (isMenuItem(child)) {
+      items.push(child);
+    }
+    else {
+      const grandchild = child.firstElementChild;
+      if (grandchild.getAttribute('role')) {
+        items.push(grandchild);
+      }
+    }
+  });
+  return items;
+};
+// Returns the menu that a menu item is an item of.
+const owningMenuOf = menuItem => {
+  const parent = menuItem.parentElement;
+  const parentRole = parent.getAttribute('role');
+  if (parentRole.startsWith('menu')){
+    return parent;
+  }
+  else {
+    const grandparent = parent.parentElement;
+    const grandparentRole = grandparent.getAttribute('role');
+    if (grandparentRole.startsWith('menu')) {
+      return grandparent;
+    }
+    else {
+      return null;
+    }
+  }
+};
+// Returns the index of the active menu item of a menu, or -1 if none.
+const activeIndexOf = (isButton, buttonOrMenu) => {
+  const menu = isButton ? controlledMenu(buttonOrMenu) : buttonOrMenu;
+  const items = menuItemsOf(menu);
+  // If the menu is a fake focus manager, return the index.
+  if (menu.hasAttribute('aria-activedescendant')) {
+    const activeID = menu.getAttribute('aria-activedescendant');
+    if (activeID) {
+      const itemIDs = items.map(item => item.id);
+      return itemIDs.indexOf(activeID);
+    }
+    else {
+      return -1;
+    }
+  }
+  // Otherwise, i.e. if the menu is a true focus manager, return the index.
+  else {
+    const tabIndexes = items.map(item => item.tabIndex);
+    return tabIndexes.indexOf(0);
+  }
+};
+// Makes the specified (or the last if -1) menu item active and close any sibling menus.
+const setActive = (focusType, menu, itemIndex) => {
+  // Identify the menu items.
+  const menuItems = menuItemsOf(menu);
+  // Identify the specified index.
+  const newIndex = itemIndex === -1 ? menuItems.length - 1 : itemIndex;
+  // For each menu item in the menu:
+  menuItems.forEach((item, index) => {
+    // If it has the specified index:
+    if (index === newIndex) {
+      // If the menu is a pseudofocus manager:
+      if (focusType === 'fake') {
+        // Mark the item as focal.
+        item.className = 'focal';
+        menu.setAttribute('aria-activedescendant', item.id);
+        // Ensure that the menu is in focus.
+        menu.tabIndex = 0;
+        menu.focus();
+      }
+      // Otherwise, if the menu is a true focus manager:
+      else if (focusType === 'true') {
+        // Make the item focusable.
+        item.tabIndex = 0;
+        // Focus it.
+        item.focus();
+      }
+    }
+    // Otherwise, i.e. if the menu item does not have the specified index:
+    else {
+      // If the menu is a pseudofocus manager:
+      if (focusType === 'fake') {
+        // Mark the item as nonfocal.
+        item.className = 'blurred';
+      }
+      // Otherwise, if the menu is a true focus manager:
+      else if (focusType === 'true') {
+        // Make the item nonfocusable.
+        item.tabIndex = -1;
+      }
+      // Close the menu controlled by the item if the item is a menu button.
+      closeMenu(item);
+    }
+  });
+};
+// Opens a menu controlled by a button and makes an item active.
+const openMenu = (button, newIndex) => {
+  // Open the menu (Chrome fails to support settable ariaExpanded property).
+  button.setAttribute('aria-expanded', 'true');
+  const menu = controlledMenu(button);
+  menu.className = 'open';
+  const focusType = focusTypeOf(menu);
+  // If an active index was specified:
+  if (newIndex > -2) {
+    // Make the specified menu item active.
+    setActive(focusType, menu, newIndex);
+  }
+  // Otherwise, i.e. if no active index was specified:
+  else {
+    // Make the currently active menu item, or if none the first one, active.
+    const oldIndex = activeIndexOf(true, button);
+    setActive(focusType, menu, oldIndex > -1 ? oldIndex : 0);
+  }
+};
+// Navigates within a menu according to a key press and returns the newly active index.
+const keyNav = (isBar, menu, key, focusType) => {
+  const oldIndex = activeIndexOf(false, menu);
+  const menuItems = menuItemsOf(menu);
+  const menuItemCount = menuItems.length;
+  // Initialize the chosen index as the current index.
+  let newIndex = oldIndex;
+  // If the request is for the next menu item:
+  if (key === (isBar ? 'ArrowRight' : 'ArrowDown')) {
+    // Change the index to the next menu item’s, wrapping.
+    newIndex = (oldIndex + 1) % menuItemCount;
+  }
+  // Otherwise, if the request is for the previous menu item:
+  else if (key === (isBar ? 'ArrowLeft' : 'ArrowUp')) {
+    // Change the index to the previous menu item’s, wrapping.
+    newIndex = (menuItemCount + oldIndex - 1) % menuItemCount;
+  }
+  else if (key === 'Home') {
+    newIndex = 0;
+  }
+  else if (key === 'End') {
+    newIndex = menuItemCount - 1;
+  }
+  // Otherwise, if the request is for a menu item with an initial letter:
+  else if (/^[a-zA-Z]$/.test(key)) {
+    // Change the index to the next matching menu item’s, if there is one.
+    const matches = menuItems.map((item, index) =>
+      item.textContent.toLowerCase().trim().startsWith(key.toLowerCase()) ? index : -1
+    );
+    const laterMatches = matches.filter(index => index > -1 && index > oldIndex);
+    if (laterMatches.length) {
+      newIndex = laterMatches[0];
+    }
+  }
+  // Make the menu item with the new index active.
+  if (newIndex > -1) {
+    setActive(focusType, menu, newIndex);
+  }
+  // Return the new index.
+  return newIndex;
+};
+
+// EVENT LISTENERS
+
+// Handle clicks.
+document.body.addEventListener('click', event => {
+  // Identify the click target.
+  let target = event.target;
+  // If it is a menu item:
+  if (isMenuItem(target)) {
+    // Identify the menu that owns it.
+    const menu = owningMenuOf(target);
+    // If the owning menu exists:
+    if (menu) {
+      // Make the menu item active.
+      const itemIndex = menuItemsOf(menu).indexOf(target);
+      setActive(focusTypeOf(menu), menu, itemIndex);
+      // If the menu item is also a menu button:
+      if (target.tagName === 'BUTTON' && ['menu', 'true'].includes(target.ariaHasPopup)) {
+        // If the menu it controls is closed:
+        if (target.ariaExpanded === 'false') {
+          // Open it with the first item active.
+          openMenu(target, 0);
+        }
+        // Otherwise, if the menu it controls is open:
+        else if (target.ariaExpanded === 'true') {
+          // Close it.
+          closeMenu(target);
+        }
+      }
+      // Otherwise, if the menu item is also a link:
+      else if (target.tagName === 'A') {
+        // Identify the button controlling the menu, if any.
+        const ownerButton = controller(menu);
+        // If the menu has a controlling button:
+        if (ownerButton) {
+          // If the button is also a menu item:
+          if (isMenuItem(ownerButton)) {
+            // Identify the menu that it is an item of.
+            const ownerMenu = ownerMenu(ownerButton);
+            // If it exists:
+            if (ownerMenu) {
+              // Identify the menu button’s index as a menu item.
+              const ownerIndex = menuItemsOf(ownerMenu).indexOf(ownerButton);
+              // Make it active.
+              setActive(focusTypeOf(ownerMenu), ownerMenu, ownerIndex);
+            }
+          }
+        }
+      }
+    }
+  }
+});
+// Handle key presses.
+window.addEventListener('keydown', event => {
+  const key = event.key;
+  // If no ineligible modifier key was in effect when the key was depressed:
+  if (! (event.altKey || event.ctrlKey || event.metaKey)) {
+    // Identify whether the shift key was in effect.
+    const shift = event.shiftKey;
+    // Initialize the focused element.
+    let focus = document.activeElement;
+    // If it exists and is within the body:
+    if (focus && focus !== document.body) {
+      // Change it to the effectively focused element if different.
+      if (focus.hasAttribute('aria-activedescendant')) {
+        focus = document.getElementById(focus.getAttribute('aria-activedescendant'));
+      }
+      // If it is a menu item:
+      if (focus.getAttribute('role') === 'menuitem') {
+        // Identify the menu that the item is in.
+        const menu = owningMenuOf(focus);
+        // If it exists:
+        if (menu) {
+          // Identify the role of the menu.
+          const menuRole = menu.getAttribute('role');
+          // Identify whether the menu manages pseudofocus or true focus.
+          const focusType = focusTypeOf(menu);
+          // Identify the menu button controlling the menu, if any.
+          const ownerButton = controller(menu);
+          // Initialize the type of the focused element as inoperable.
+          let itemType = 'plain';
+          // Revise the type if it is operable.
+          const tagName = focus.tagName;
+          if (tagName === 'A') {
+            itemType = 'link';
+          }
+          else if (tagName === 'BUTTON') {
+            itemType = focus.ariaExpanded ? 'menuButton' : 'button';
+          }
+          // If the key is Enter:
+          if (key === 'Enter' && ! shift) {
+            // If the menu item is a link or ordinary button:
+            if (['link', 'button'].includes(itemType)) {
+              // Simulate a click on it.
+              focus.click();
+            }
+            // Otherwise, if the menu item is a menu button:
+            else if (itemType === 'menuButton') {
+              // Its menu must be closed, so open it, with the first item active.
+              openMenu(focus, 0);
+            }
+          }
+          // Otherwise, if the key is Space:
+          else if (key === ' ' && ! shift) {
+            // If the menu item is an ordinary button:
+            if (itemType === 'button') {
+              // Prevent default scrolling.
+              event.preventDefault();
+              // Simulate a click on the button.
+              focus.click();
+            }
+            // Otherwise, if the menu item is a menu button:
+            else if (itemType === 'menuButton') {
+              // Prevent default scrolling.
+              event.preventDefault();
+              // Its menu must be closed, so open it, with the first item active.
+              openMenu(focus, 0);
+            }
+          }
+          // Otherwise, if the key is Tab and the menu is closable:
+          else if (key === 'Tab' && ownerButton) {
+            // Close the menu.
+            closeMenu(ownerButton);
+          }
+          // Otherwise, if the key is Escape and the menu is closable:
+          else if (key === 'Escape' && ! shift && ownerButton) {
+            // Close the menu.
+            closeMenu(ownerButton);
+            // Focus its menu button.
+            ownerButton.focus();
+          }
+          // Otherwise, if the key is a letter:
+          else if (/^[a-zA-Z]$/.test(key)) {
+            // Navigate within the menu according to the key.
+            keyNav(true, menu, key, focusType);
+          }
+          // Otherwise, if the key navigates among parent menu items in a menu bar:
+          else if (['ArrowLeft', 'ArrowRight'].includes(key)) {
+            // If the focused element is a menu button in a menu bar:
+            if (itemType === 'menuButton' && menuRole === 'menubar') {
+              // Navigate within the menu bar according to the key.
+              keyNav(true, menu, key, focusType);
+            }
+            // Otherwise, if the focused element is a button-controlled menu item:
+            else if (menuRole === 'menu' && ownerButton) {
+              // Close the menu.
+              closeMenu(ownerButton);
+              // Identify the menu bar.
+              const bar = owningMenuOf(ownerButton);
+              // Obey the key.
+              const newBarIndex = keyNav(true, bar, key, focusTypeOf(bar));
+              // Open the menu controlled by the newly focused menu button and focus its first item.
+              openMenu(menuItemsOf(bar)[newBarIndex], 0);
+            }
+          }
+          // Otherwise, if the key specially navigates within the menu:
+          else if (['Home', 'End'].includes(key) && ! shift) {
+            // Prevent default page scrolling.
+            event.preventDefault();
+            // Obey the key.
+            keyNav(true, menu, key, focusType);
+          }
+          // Otherwise, if the key conditionally navigates or opens a menu:
+          else if (['ArrowUp', 'ArrowDown'].includes(key) && ! shift) {
+            // If the focused element is a menu button in a menu bar:
+            if (menuRole === 'menubar' && itemType === 'menuButton') {
+              // Prevent default scrolling.
+              event.preventDefault();
+              // Open the menu button’s menu.
+              openMenu(focus, key === 'ArrowUp' ? -1 : 0);
+            }
+            // Otherwise, if the active item is not a menu button and is in a menu:
+            else if (menuRole === 'menu' && itemType !== 'menuButton') {
+              // Prevent default scrolling.
+              event.preventDefault();
+              // Obey the key.
+              keyNav(false, menu, key, focusType);
+            }
+          }
+        }
+      }
+    }
+  }
+});

package/validation/targets/menuNav/style.css

@@ -0,0 +1,22 @@
+:focus:not(ul), .focal {
+  outline: 2px #00f solid;
+  outline-offset: 2px;
+}
+.menubar {
+  min-height: 7rem;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-evenly;
+}
+.menubar li {
+  list-style-type: none;
+}
+.open {
+  display: block;
+}
+.shut {
+  display: none;
+}
+ul:focus {
+  outline: none;
+}

package/validation/targets/motion/bad.css

@@ -0,0 +1,15 @@
+@keyframes shrink {
+  from {
+    margin-right: 0%;
+    font-size: 1rem;
+  }
+  to {
+    margin-right: 50%;
+    font-size: 2rem;
+  }
+}
+.moving {
+  animation-duration: 4s;
+  animation-iteration-count: 5;
+  animation-name: shrink;
+}

package/validation/targets/motion/bad.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <title>Page with motion</title>
+    <meta name="description" content="tester">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="bad.css">
+  </head>
+  <body>
+    <main>
+      <h1>Page with motion</h1>
+      <p class="moving">This page has motion.</p>
+    </main>
+  </body>
+</html>

package/validation/targets/motion/good.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <title>Page without motion</title>
+    <meta name="description" content="tester">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  </head>
+  <body>
+    <main>
+      <h1>Page without motion</h1>
+      <p>This page has no motion.</p>
+    </main>
+  </body>
+</html>

package/validation/targets/radioSet/bad.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <title>Page with deviant radio-button grouping</title>
+    <meta name="description" content="tester">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  </head>
+  <body>
+    <main>
+      <h1>Page with deviant radio-button grouping</h1>
+      <p>This page contains radio buttons in nonstandard groups.</p>
+      <form>
+        <div><fieldset>
+          <legend>Choose a drink and a programming language</legend>
+          <p><label><input type="radio" name="drink" value="water">water</label></p>
+          <p><label><input type="radio" name="drink" value="juice">juice</label></p>
+          <p><label><input type="radio" name="lang" value="fortran">Fortran</label></p>
+          <p><label><input type="radio" name="lang" value="ada">Ada</label></p>
+        </fieldset></div>
+        <div><fieldset>
+          <p>Choose a food</p>
+          <p><label><input type="radio" name="food" value="rice">rice</label></p>
+          <p><label><input type="radio" name="food" value="apple">apple</label></p>
+        </fieldset></div>
+        <div>
+          <p>Choose a gas</p>
+          <p><label><input type="radio" name="gas" value="methane">methane</label></p>
+          <p><label><input type="radio" name="gas" value="nitrogen">nitrogen</label></p>
+        </div>
+      </form>
+    </main>
+  </body>
+</html>

package/validation/targets/radioSet/good.html

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <title>Page with standard radio-button grouping</title>
+    <meta name="description" content="tester">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  </head>
+  <body>
+    <main>
+      <h1>Page with standard radio-button grouping</h1>
+      <p>This page contains radio buttons in standard groups.</p>
+      <form>
+        <p><fieldset>
+          <legend>Choose a drink</legend>
+          <p><label><input type="radio" name="drink" value="water">water</label></p>
+          <p><label><input type="radio" name="drink" value="juice">juice</label></p>
+        </fieldset></p>
+        <p><fieldset>
+          <legend>Choose a programming language</legend>
+          <p><label><input type="radio" name="lang" value="fortran">Fortran</label></p>
+          <p><label><input type="radio" name="lang" value="ada">Ada</label></p>
+        </fieldset></p>
+      </form>
+    </main>
+  </body>
+</html>

package/validation/targets/role/bad.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <title>Page with deviant role elements</title>
+    <meta name="description" content="tester">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  </head>
+  <body>
+    <section role="main">
+      <h1>Page with deviant role elements</h1>
+      <section role="section">
+        <h2>Abstraction</h2>
+        <p>This section has an abstract role.</p>
+      </section>
+      <section>
+        <h2 role="heading">Redundancy</h2>
+        <p>This section has a redundant role.</p>
+      </section>
+      <section>
+        <h2>Conflict</h2>
+        <p>The parent section of these sections has an unnecessary explicit role.</p>
+      </section>
+    </section>
+  </body>
+</html>

package/validation/targets/role/good.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <title>Page with standard role elements</title>
+    <meta name="description" content="tester">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  </head>
+  <body>
+    <main>
+      <h1>Page with standard role elements</h1>
+      <section role="note">
+        <h2>Note</h2>
+        <p>This section has parenthetical content and a standard role indicating that.</p>
+      </section>
+      <section>
+        <h2>Basic content</h2>
+        <p>This section is non-parenthetical.</p>
+      </section>
+    </main>
+  </body>
+</html>

package/validation/targets/styleDiff/bad.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <title>Page with inconsistent styles</title>
+    <meta name="description" content="tester">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <style>
+      button {
+        min-height: 44px;
+        min-width: 44px;
+      }
+      .italic {
+        font-style: italic;
+      }
+    </style>
+  </head>
+  <body>
+    <main>
+      <h1>Page with inconsistent styles</h1>
+      <h2>Inline links</h2>
+      <p>This paragraph contains inline links to <a href="https://en.wikipedia.org">English information</a> and <a style="text-decoration: underline; text-decoration-style: double" href="https://fr.wikipedia.org">French information</a>. They have different styles.</p>
+      <h2>Block links</h2>
+      <p>The following links are not inline. They have a different styles.</p>
+      <ul>
+        <li><a style="font-weight: 700" href="https://sp.wikipedia.org">Spanish information</a></li>
+        <li><a href="https://eo.wikipedia.org">Esperanto information</a></li>
+      </ul>
+      <h2>Buttons</h2>
+      <p>This paragraph contains two buttons with a different custom styles. <button type="button">Wikipedia</button> <button type="button" style="border-width: 3px">Wiktionary</button></p>
+      <h2 class="italic">Headings</h2>
+      <p>This page contains 4 <code>h2</code> headings. This one has a deviant style.</p>
+    </main>
+  </body>
+</html>

package/validation/targets/styleDiff/good.html

@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <title>Page with consistent styles</title>
+    <meta name="description" content="tester">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <style>
+      button {
+        min-height: 44px;
+        min-width: 44px;
+      }
+      .dotted > li > a {
+        text-decoration-line: underline;
+        text-decoration-style: dotted;
+      }
+    </style>
+  </head>
+  <body>
+    <main>
+      <h1>Page with consistent styles</h1>
+      <h2>Inline links</h2>
+      <p>This paragraph contains inline links to <a href="https://en.wikipedia.org">English information</a> and <a href="https://fr.wikipedia.org">French information</a>. They both have a default style.</p>
+      <h2>Block links</h2>
+      <p>The following links are not inline. They have a uniform custom underline.</p>
+      <ul class="dotted">
+        <li><a href="https://sp.wikipedia.org">Spanish information</a></li>
+        <li><a href="https://eo.wikipedia.org">Esperanto information</a></li>
+      </ul>
+      <h2>Buttons</h2>
+      <p>This paragraph contains two buttons with a uniform custom style. <button type="button">Wikipedia</button> <button type="button">Wiktionary</button></p>
+      <h2>Headings</h2>
+      <p>This page contains 4 <code>h2</code> headings. They all have a default style.</p>
+    </main>
+  </body>
+</html>

package/validation/targets/tabNav/bad.html

@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <title>Page with deviant tab-list navigation</title>
+    <meta name="description" content="tester">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="style.css">
+    <script src="bad.js" defer></script>
+  </head>
+  <body>
+    <main>
+      <h1>Page with deviant tab-list navigation</h1>
+      <div class="tabs">
+        <p id="tabListLabel">What kind of HTML element do you want to study?</p>
+        <div role="tablist" aria-labelledby="tabListLabel">
+          <button role="tab" aria-selected="true" aria-controls="ulDoc" id="ul">
+            <code>ul</code>
+          </button>
+          <button
+            role="tab"
+            aria-selected="false"
+            aria-controls="sectionDoc"
+            id="section"
+          >
+            <code>section</code>
+          </button>
+          <button
+            role="tab"
+            aria-selected="false"
+            aria-controls="mainDoc"
+            id="main"
+          >
+            <code>main</code>
+          </button>
+        </div>
+        <div class="tabPanels">
+          <div tabindex="0" role="tabpanel" id="ulDoc" aria-labelledby="ul" hidden>
+            <p>A <code>ul</code> element encodes an unordered list.</p>
+          </div>
+          <div tabindex="0" role="tabpanel" id="sectionDoc" aria-labelledby="section" hidden>
+            <p>A <code>section</code> element encodes a generic part of a document.</p>
+          </div>
+          <div tabindex="0" role="tabpanel" id="mainDoc" aria-labelledby="main" hidden>
+            <p>A <code>main</code> element encodes the dominant content of a document.</p>
+          </div>
+        </div>
+      </div>
+    </main>
+  </body>
+</html>