npm - testaro - Versions diffs - 1.0.0 - Mend

testaro 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (99) hide show

package/LICENSE +21 -0
package/README.md +502 -0
package/aceconfig.js +7 -0
package/commands.js +249 -0
package/index.js +1248 -0
package/package.json +39 -0
package/procs/score/asp09.js +555 -0
package/procs/test/allText.js +76 -0
package/procs/test/allVis.js +17 -0
package/procs/test/linksByType.js +90 -0
package/procs/test/textOf.txt +73 -0
package/scoring/correlation.js +74 -0
package/scoring/correlations.json +327 -0
package/scoring/data.json +26021 -0
package/scoring/dupCounts.js +39 -0
package/scoring/dupCounts.json +112 -0
package/scoring/duplications.json +253 -0
package/scoring/issues.json +304 -0
package/scoring/packageData.js +171 -0
package/scoring/packageIssues.js +34 -0
package/scoring/rulesetData.json +15 -0
package/tests/aatt.js +64 -0
package/tests/alfa.js +107 -0
package/tests/axe.js +109 -0
package/tests/bulk.js +21 -0
package/tests/embAc.js +36 -0
package/tests/focAll.js +62 -0
package/tests/focInd.js +99 -0
package/tests/focOp.js +132 -0
package/tests/hover.js +195 -0
package/tests/ibm.js +89 -0
package/tests/labClash.js +157 -0
package/tests/linkUl.js +65 -0
package/tests/menuNav.js +254 -0
package/tests/motion.js +115 -0
package/tests/radioSet.js +87 -0
package/tests/role.js +164 -0
package/tests/styleDiff.js +146 -0
package/tests/tabNav.js +282 -0
package/tests/wave.js +44 -0
package/tests/zIndex.js +49 -0
package/validation/batches/sample.json +13 -0
package/validation/executors/sample.js +11 -0
package/validation/scripts/app/sample.json +21 -0
package/validation/scripts/test/bulk.json +39 -0
package/validation/scripts/test/embAc.json +45 -0
package/validation/scripts/test/focAll.json +59 -0
package/validation/scripts/test/focInd.json +55 -0
package/validation/scripts/test/focOp.json +53 -0
package/validation/scripts/test/hover.json +47 -0
package/validation/scripts/test/labClash.json +43 -0
package/validation/scripts/test/linkUl.json +62 -0
package/validation/scripts/test/menuNav.json +97 -0
package/validation/scripts/test/motion.json +53 -0
package/validation/scripts/test/radioSet.json +43 -0
package/validation/scripts/test/role.json +42 -0
package/validation/scripts/test/styleDiff.json +61 -0
package/validation/scripts/test/tabNav.json +97 -0
package/validation/scripts/test/zIndex.json +40 -0
package/validation/targets/bulk/bad.html +48 -0
package/validation/targets/bulk/good.html +15 -0
package/validation/targets/embAc/bad.html +21 -0
package/validation/targets/embAc/good.html +15 -0
package/validation/targets/focAll/good.html +15 -0
package/validation/targets/focAll/less.html +15 -0
package/validation/targets/focAll/more.html +16 -0
package/validation/targets/focInd/bad.html +31 -0
package/validation/targets/focInd/good.html +22 -0
package/validation/targets/focOp/bad.html +18 -0
package/validation/targets/focOp/good.html +15 -0
package/validation/targets/hover/bad.html +19 -0
package/validation/targets/hover/good.html +15 -0
package/validation/targets/labClash/bad.html +20 -0
package/validation/targets/labClash/good.html +18 -0
package/validation/targets/linkUl/bad.html +16 -0
package/validation/targets/linkUl/good.html +30 -0
package/validation/targets/linkUl/na.html +20 -0
package/validation/targets/menuNav/bad.html +106 -0
package/validation/targets/menuNav/bad.js +348 -0
package/validation/targets/menuNav/good.html +106 -0
package/validation/targets/menuNav/good.js +365 -0
package/validation/targets/menuNav/style.css +22 -0
package/validation/targets/motion/bad.css +15 -0
package/validation/targets/motion/bad.html +16 -0
package/validation/targets/motion/good.html +15 -0
package/validation/targets/radioSet/bad.html +34 -0
package/validation/targets/radioSet/good.html +27 -0
package/validation/targets/role/bad.html +26 -0
package/validation/targets/role/good.html +22 -0
package/validation/targets/styleDiff/bad.html +35 -0
package/validation/targets/styleDiff/good.html +36 -0
package/validation/targets/tabNav/bad.html +51 -0
package/validation/targets/tabNav/bad.js +35 -0
package/validation/targets/tabNav/good.html +53 -0
package/validation/targets/tabNav/good.js +83 -0
package/validation/targets/tabNav/goodMoz.js +206 -0
package/validation/targets/tabNav/style.css +34 -0
package/validation/targets/zIndex/bad.html +17 -0
package/validation/targets/zIndex/good.html +15 -0

package/validation/targets/tabNav/bad.js ADDED Viewed

@@ -0,0 +1,35 @@
+// UTILITIES FOR EVENT HANDLERS
+// Returns the tab list containing a tab.
+const allTabs = button => Array.from(button.parentElement.children);
+// Returns the panel controlled by a tab.
+const controlledPanel = button => document.getElementById(button.getAttribute('aria-controls'));
+// Returns the tab panels controlled by the tabs of a tab list.
+const allPanels = button => Array.from(controlledPanel(button).parentElement.children);
+// Exposes only the tab panel controlled by a button.
+const showPanel = button => {
+  allPanels(button).forEach(panel => {
+    panel.setAttribute('hidden', '');
+  });
+  controlledPanel(button).removeAttribute('hidden');
+};
+// Makes a tab active.
+const makeActive = button => {
+  allTabs(button).forEach(tab => {
+    tab.classList.remove('active');
+  });
+  button.classList.add('active');
+};
+// EVENT LISTENERS
+// Handle tab focusing.
+const documentTabs = Array.from(document.body.querySelectorAll('[role=tab]'));
+documentTabs.forEach(tab => {
+  tab.addEventListener('focus', () => {
+    showPanel(tab);
+    if (tab.tabIndex !== 0 || ! tab.classList.contains('active')) {
+      makeActive(tab);
+    }
+  });
+});

package/validation/targets/tabNav/good.html ADDED Viewed

@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <title>Page with standard 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="good.js" defer></script>
+  </head>
+  <body>
+    <main>
+      <h1>Page with standard 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"
+            tabindex="-1"
+          >
+            <code>section</code>
+          </button>
+          <button
+            role="tab"
+            aria-selected="false"
+            aria-controls="mainDoc"
+            id="main"
+            tabindex="-1"
+          >
+            <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>

package/validation/targets/tabNav/good.js ADDED Viewed

@@ -0,0 +1,83 @@
+// UTILITIES FOR EVENT HANDLERS
+// Returns whether an element is a tab.
+const isTab = element => element.getAttribute('role') === 'tab';
+// Returns the tab list containing a tab.
+const allTabs = button => Array.from(button.parentElement.children);
+// Returns the panel controlled by a tab.
+const controlledPanel = button => document.getElementById(button.getAttribute('aria-controls'));
+// Returns the tab panels controlled by the tabs of a tab list.
+const allPanels = button => Array.from(controlledPanel(button).parentElement.children);
+// Exposes only the tab panel controlled by a button.
+const showPanel = button => {
+  allPanels(button).forEach(panel => {
+    panel.setAttribute('hidden', '');
+  });
+  controlledPanel(button).removeAttribute('hidden');
+};
+// Makes a tab active.
+const makeActive = button => {
+  allTabs(button).forEach(tab => {
+    tab.tabIndex = -1;
+    tab.classList.remove('active');
+  });
+  button.tabIndex = 0;
+  button.classList.add('active');
+};
+// Returns the destination of a keyboard navigation within a tab list.
+const destinationTab = (fromTab, key) => {
+  const tabs = allTabs(fromTab);
+  const tabCount = tabs.length;
+  const fromIndex = tabs.indexOf(fromTab);
+  // Return the destination of navigation.
+  if (key === 'ArrowRight') {
+    return tabs[(fromIndex + 1) % tabCount];
+  }
+  else if (key === 'ArrowLeft') {
+    return tabs[(tabCount + fromIndex - 1) % tabCount];
+  }
+  else if (key === 'Home') {
+    return tabs[0];
+  }
+  else if (key === 'End') {
+    return tabs[tabCount - 1];
+  }
+  else {
+    return null;
+  }
+};
+// EVENT LISTENERS
+// 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 || event.shiftKey)) {
+    // Initialize the focused element.
+    let focus = document.activeElement;
+    // If it exists and is within the body:
+    if (focus && focus !== document.body) {
+      // If it is a tab:
+      if (isTab(focus)) {
+        // Identify the destination tab.
+        const newFocus = destinationTab(focus, key);
+        // If it differs from the currently focused element:
+        if (newFocus && newFocus !== focus) {
+          // Focus it.
+          newFocus.focus();
+        }
+      }
+    }
+  }
+});
+// Handle tab focusing.
+const documentTabs = Array.from(document.body.querySelectorAll('[role=tab]'));
+documentTabs.forEach(tab => {
+  tab.addEventListener('focus', () => {
+    showPanel(tab);
+    if (tab.tabIndex !== 0 || ! tab.classList.contains('active')) {
+      makeActive(tab);
+    }
+  });
+});

package/validation/targets/tabNav/goodMoz.js ADDED Viewed

@@ -0,0 +1,206 @@
+/*
+*   This content is licensed according to the W3C Software License at
+*   https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
+*/
+const manageTabs = () => {
+  const tablist = document.querySelectorAll('[role="tablist"]')[0];
+  let tabs;
+  let panels;
+  const generateArrays = () => {
+    tabs = document.querySelectorAll('[role="tab"]');
+    panels = document.querySelectorAll('[role="tabpanel"]');
+  };
+  generateArrays();
+  // For easy reference
+  const keys = {
+    end: 35,
+    home: 36,
+    left: 37,
+    up: 38,
+    right: 39,
+    down: 40
+  };
+  // Add or substract depending on key pressed
+  const direction = {
+    37: -1,
+    38: -1,
+    39: 1,
+    40: 1
+  };
+  // When a tab is clicked, activateTab is fired to activate it
+  const clickEventListener = event => {
+    const tab = event.target;
+    activateTab(tab, false);
+  };
+  // Handle keydown on tabs
+  const keydownEventListener = event => {
+    const key = event.keyCode;
+    switch (key) {
+    case keys.end:
+      event.preventDefault();
+      // Activate last tab
+      activateTab(tabs[tabs.length - 1]);
+      break;
+    case keys.home:
+      event.preventDefault();
+      // Activate first tab
+      activateTab(tabs[0]);
+      break;
+    // Up and down are in keydown
+    // because we need to prevent page scroll >:)
+    case keys.up:
+    case keys.down:
+      determineOrientation(event);
+      break;
+    }
+  };
+  // Handle keyup on tabs
+  const keyupEventListener = event => {
+    const key = event.keyCode;
+    switch (key) {
+    case keys.left:
+    case keys.right:
+      determineOrientation(event);
+      break;
+    }
+  };
+  const addListeners = index => {
+    tabs[index].addEventListener('click', clickEventListener);
+    tabs[index].addEventListener('keydown', keydownEventListener);
+    tabs[index].addEventListener('keyup', keyupEventListener);
+    // Build an array with all tabs (<button>s) in it
+    tabs[index].index = index;
+  };
+  // Bind listeners
+  for (let i = 0; i < tabs.length; ++i) {
+    addListeners(i);
+  }
+  // When a tablist’s aria-orientation is set to vertical,
+  // only up and down arrow should function.
+  // In all other cases only left and right arrow function.
+  const determineOrientation = event => {
+    const key = event.keyCode;
+    const vertical = tablist.getAttribute('aria-orientation') == 'vertical';
+    let proceed = false;
+    if (vertical) {
+      if (key === keys.up || key === keys.down) {
+        event.preventDefault();
+        proceed = true;
+      }
+    }
+    else {
+      if (key === keys.left || key === keys.right) {
+        proceed = true;
+      }
+    }
+    if (proceed) {
+      switchTabOnArrowPress(event);
+    }
+  };
+  // Either focus the next, previous, first, or last tab
+  // depening on key pressed
+  function switchTabOnArrowPress (event) {
+    const pressed = event.keyCode;
+    for (let x = 0; x < tabs.length; x++) {
+      tabs[x].addEventListener('focus', focusEventHandler);
+    }
+    if (direction[pressed]) {
+      const target = event.target;
+      if (target.index !== undefined) {
+        if (tabs[target.index + direction[pressed]]) {
+          tabs[target.index + direction[pressed]].focus();
+        }
+        else if (pressed === keys.left || pressed === keys.up) {
+          focusLastTab();
+        }
+        else if (pressed === keys.right || pressed == keys.down) {
+          focusFirstTab();
+        }
+      }
+    }
+  }
+  // Activates any given tab panel
+  const activateTab = (tab, setFocus) => {
+    setFocus = setFocus || true;
+    // Deactivate all other tabs
+    deactivateTabs();
+    // Remove tabindex attribute
+    tab.removeAttribute('tabindex');
+    // Set the tab as selected
+    tab.setAttribute('aria-selected', 'true');
+    // Get the value of aria-controls (which is an ID)
+    var controls = tab.getAttribute('aria-controls');
+    // Remove hidden attribute from tab panel to make it visible
+    document.getElementById(controls).removeAttribute('hidden');
+    // Set focus when required
+    if (setFocus) {
+      tab.focus();
+    }
+  };
+  // Deactivate all tabs and tab panels
+  const deactivateTabs = () => {
+    for (let t = 0; t < tabs.length; t++) {
+      tabs[t].setAttribute('tabindex', '-1');
+      tabs[t].setAttribute('aria-selected', 'false');
+      tabs[t].removeEventListener('focus', focusEventHandler);
+    }
+    for (let p = 0; p < panels.length; p++) {
+      panels[p].setAttribute('hidden', 'hidden');
+    }
+  };
+  // Make a guess
+  const focusFirstTab = () => {
+    tabs[0].focus();
+  };
+  // Make a guess
+  const focusLastTab = () => {
+    tabs[tabs.length - 1].focus();
+  };
+  //
+  const focusEventHandler = event => {
+    const target = event.target;
+    setTimeout(checkTabFocus, 0, target);
+  };
+  // Only activate tab on focus if it still has focus after the delay
+  const checkTabFocus = target => {
+    const focused = document.activeElement;
+    if (target === focused) {
+      activateTab(target, false);
+    }
+  };
+};
+manageTabs();

package/validation/targets/tabNav/style.css ADDED Viewed

@@ -0,0 +1,34 @@
+button {
+  min-width: 30%;
+  border-width: 3px;
+  background-color: #eee;
+  font-size: x-large;
+}
+button.active {
+  border-bottom: none;
+}
+button.active, .tabPanels {
+  background-color: #dfd;
+}
+:focus {
+  outline: 2px #00f solid;
+  outline-offset: 2px;
+}
+[role=tablist] {
+  margin-bottom: 0;
+  min-height: 5rem;
+  display: flex;
+  align-items: stretch;
+  justify-content: space-evenly;
+}
+.tabPanels {
+  margin-top:0;
+  padding: 1rem;
+  border-width: 0 3px 3px 3px;
+}
+.tabPanels p {
+  margin-top: 0;
+}
+.tabs {
+  max-width: 40rem;
+}

package/validation/targets/zIndex/bad.html ADDED Viewed

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <title>Page with explicit z-index attributes</title>
+    <meta name="description" content="tester">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  </head>
+  <body>
+    <main>
+      <h1>Page with explicit z-index attributes</h1>
+      <p>The next paragraph contains two overlapping buttons.</p>
+      <p style="position: absolute; right: 10rem">
+        <button type="button" style="position: absolute; right: 0rem; min-width: 7rem; z-index: 1; background-color: #ff0">Button 0</button> <button type="button" style="position: absolute; right: 1rem; height: 4rem; min-width: 7rem; z-index: 2; background-color: #00ff0040">Button 1</button></p>
+    </main>
+  </body>
+</html>

package/validation/targets/zIndex/good.html ADDED Viewed

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <meta charset="utf-8">
+    <title>Page without explicit z-index attributes</title>
+    <meta name="description" content="tester">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  </head>
+  <body>
+    <main>
+      <h1>Page without explicit z-index attributes</h1>
+      <p>This paragraph contains two overlapping buttons. <button type="button" style="position: absolute; right: 10rem">Button 0</button> <button type="button" style="position: absolute; right: 11rem; height: 4rem; min-width: 4rem; background-color: #00ff0080">Button 1</button></p>
+    </main>
+  </body>
+</html>