testaro 1.0.0

package/validation/targets/menuNav/bad.js

@@ -0,0 +1,348 @@
+// 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 (['ArrowRight', 'ArrowDown'].includes(key)) {
+    // Change the index to the next menu item’s, without wrapping.
+    newIndex = Math.min(oldIndex + 1, menuItemCount - 1);
+  }
+  // Otherwise, if the request is for the previous menu item:
+  else if (['ArrowLeft', 'ArrowUp'].includes(key)) {
+    // Change the index to the previous menu item’s, without wrapping.
+    newIndex = Math.max(0, oldIndex - 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 key specially navigates within the menu:
+          else if (['Home', 'End'].includes(key) && ! shift) {
+            // Prevent default page scrolling.
+            event.preventDefault();
+            // Navigate within the menu according to 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/good.html

@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <title>Page with standard menu 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="good.js" defer></script>
+  </head>
+  <body>
+    <main>
+      <h1>Page with standard menu navigation</h1>
+      <p>This page contains a menu bar. In it, the personalities submenu implements pseudofocus management and the technologies menu implements true focus management. <a href="https://www.w3.org/TR/wai-aria-practices-1.1/#menu">These two patterns</a> are recommended by the Accessible Rich Internet Applications Working Group.</p>
+      <p id="menuBarAbout">Choose a domain to toggle that domain&rsquo;s submenu open or closed. The submenu contains links to definitions (in a new tab).</p>
+      <ul id="menubar" role="menubar" class="menubar blockLink" aria-labelledby="menuBarAbout">
+        <li role="none">
+          <button
+            id="persButton"
+            role="menuitem"
+            type="button"
+            tabindex="0"
+            aria-haspopup="menu"
+            aria-expanded="false"
+            aria-controls="persMenu"
+          >
+            Personalities
+          </button>
+          <ul
+            id="persMenu"
+            role="menu"
+            aria-labelledby="persButton"
+            aria-activedescendant="introvert"
+            class="shut"
+            tabindex="-1"
+          >
+            <li role="none">
+              <a
+                id="introvert"
+                role="menuitem"
+                class="blurred"
+                tabindex="-1"
+                href="https://en.wiktionary.org/wiki/introvert"
+                target="_blank"
+              >
+                introvert
+              </a>
+            </li>
+            <li role="none">
+              <a
+                id="extravert"
+                role="menuitem"
+                class="blurred"
+                tabindex="-1"
+                href="https://en.wiktionary.org/wiki/extravert"
+                target="_blank"
+              >
+                extravert
+              </a>
+            </li>
+          </ul>
+        </li>
+        <li role="none">
+          <button
+            id="techButton"
+            role="menuitem"
+            type="button"
+            tabindex="-1"
+            aria-haspopup="menu"
+            aria-expanded="false"
+            aria-controls="techMenu"
+          >
+            Technologies
+          </button>
+          <ul
+            id="techMenu"
+            role="menu"
+            aria-labelledby="techButton"
+            class="shut"
+          >
+            <li role="none">
+              <a
+                tabindex="-1"
+                role="menuitem"
+                href="https://en.wikipedia.org/wiki/Prestressed_concrete"
+                target="_blank"
+              >
+                prestressed concrete
+              </a>
+            </li>
+            <li role="none">
+              <a
+                tabindex="-1"
+                role="menuitem"
+                href="https://en.wikipedia.org/wiki/Heat_pump"
+                target="_blank"
+              >
+                heat pump
+              </a>
+            </li>
+          </ul>
+        </li>
+      </ul>
+    </main>
+  </body>
+</html>