Create updated tests for APG design pattern example: Command Button (#683)

IsaDC · web-flow · commit dd216174a995 · 2022-04-08T14:44:07.000-05:00
* Update timestamped example directory and references.csv

* Remove previous example

* Example: remove unneeded CSS/JS references and update page title

* Example: remove 'Related Links' nav and similar example links, as well as 'Accessibility Features', 'Keyboard Support', 'Role, Property, State, and Tabindex Attributes' and source code sections and footer nav

* Generate .html source files with scripts automatically

Co-authored-by: IsaDC &lt;IsaDC@users.noreply.github.com&gt;
diff --git a/tests/command-button/data/references.csv b/tests/command-button/data/references.csv
@@ -2,7 +2,7 @@ refId,value
 author,Isabel Del Castillo
 authorEmail,isa.delcastillo5@gmail.com
 title,Command Button Example
-reference,reference/2021-3-29_132754/button.html
+reference,reference/2022-4-8_124112/button.html
 designPattern,https://w3c.github.io/aria-practices/#button
 example,https://w3c.github.io/aria-practices/examples/button/button.html
 button,https://w3c.github.io/aria/#button
diff --git a/tests/command-button/reference/2022-4-8_124112/button.html b/tests/command-button/reference/2022-4-8_124112/button.html
@@ -1,36 +1,37 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>Command Button Example</title>
-
-  <!-- CSS and JS for this example. -->
-  <link rel="stylesheet" href="css/button.css">
-</head>
-<body>
-  <main>
-    <h1>Command Button Example</h1>
-
-    <p>
-      The following command button example demonstrates the <a href="https://w3c.github.io/aria-practices/#button">button design pattern.</a>
-    </p>
-
-    <section>
-    <div class="example-header">
-      <h2 id="ex_label">Example</h2>
-    </div>
-
-      <div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
-
-      <div id="example">
-        <p>This <q>Print</q> action button uses a <code>div</code> element.</p>
-        <a id="beforelink" href="#beforelink">Navigate forwards from here</a>
-        <div tabindex="0" role="button" id="action">Print Page</div>
-        <a id="afterlink" href="#afterlink">Navigate backwards from here</a>
-      </div>
-
-      <div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>
-    </section>
-  </main>
-</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Command Button Example</title>
+
+  <!-- CSS and JS for this example. -->
+  <link rel="stylesheet" href="css/button.css">
+  <script src="js/button.js"></script>
+</head>
+<body>
+  <main>
+    <h1>Command Button Example</h1>
+
+    <p>
+      The following command button example demonstrates the <a href="https://w3c.github.io/aria-practices/#button">button design pattern.</a>
+    </p>
+
+    <section>
+    <div class="example-header">
+      <h2 id="ex_label">Example</h2>
+    </div>
+
+      <div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
+
+      <div id="example">
+        <p>This <q>Print</q> action button uses a <code>div</code> element.</p>
+        <a id="beforelink" href="#beforelink">Navigate forwards from here</a>
+        <div tabindex="0" role="button" id="action">Print Page</div>
+        <a id="afterlink" href="#afterlink">Navigate backwards from here</a>
+      </div>
+
+      <div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>
+    </section>
+  </main>
+</body>
+</html>
diff --git a/tests/command-button/reference/2022-4-8_124112/button.setFocusAfterButton.html b/tests/command-button/reference/2022-4-8_124112/button.setFocusAfterButton.html
@@ -6,6 +6,7 @@
 
   <!-- CSS and JS for this example. -->
   <link rel="stylesheet" href="css/button.css">
+  <script src="js/button.js"></script>
 
 <!-- Generated by create-example-tests.js -->
 <script>
diff --git a/tests/command-button/reference/2022-4-8_124112/button.setFocusBeforeButton.html b/tests/command-button/reference/2022-4-8_124112/button.setFocusBeforeButton.html
@@ -6,6 +6,7 @@
 
   <!-- CSS and JS for this example. -->
   <link rel="stylesheet" href="css/button.css">
+  <script src="js/button.js"></script>
 
 <!-- Generated by create-example-tests.js -->
 <script>
diff --git a/tests/command-button/reference/2022-4-8_124112/button.setFocusOnButton.html b/tests/command-button/reference/2022-4-8_124112/button.setFocusOnButton.html
@@ -6,6 +6,7 @@
 
   <!-- CSS and JS for this example. -->
   <link rel="stylesheet" href="css/button.css">
+  <script src="js/button.js"></script>
 
 <!-- Generated by create-example-tests.js -->
 <script>
diff --git a/tests/command-button/reference/2022-4-8_124112/css/button.css b/tests/command-button/reference/2022-4-8_124112/css/button.css
@@ -2,26 +2,26 @@
   display: inline-block;
   position: relative;
   padding: 0.4em 0.7em;
-  border: 1px solid hsl(213, 71%, 49%);
+  border: 1px solid hsl(213deg 71% 49%);
   border-radius: 5px;
-  box-shadow: 0 1px 2px hsl(216, 27%, 55%);
+  box-shadow: 0 1px 2px hsl(216deg 27% 55%);
   color: #fff;
-  text-shadow: 0 -1px 1px hsl(216, 27%, 25%);
-  background-color: hsl(216, 82%, 51%);
+  text-shadow: 0 -1px 1px hsl(216deg 27% 25%);
+  background-color: hsl(216deg 82% 51%);
   background-image: linear-gradient(
     to bottom,
-    hsl(216, 82%, 53%),
-    hsl(216, 82%, 47%)
+    hsl(216deg 82% 53%),
+    hsl(216deg 82% 47%)
   );
 }
 
 [role="button"]:hover {
-  border-color: hsl(213, 71%, 29%);
-  background-color: hsl(216, 82%, 31%);
+  border-color: hsl(213deg 71% 29%);
+  background-color: hsl(216deg 82% 31%);
   background-image: linear-gradient(
     to bottom,
-    hsl(216, 82%, 33%),
-    hsl(216, 82%, 27%)
+    hsl(216deg 82% 33%),
+    hsl(216deg 82% 27%)
   );
   cursor: default;
 }
@@ -39,72 +39,72 @@
   right: calc(-1px - 3px - 3px);
   bottom: calc(-1px - 3px - 3px);
   left: calc(-1px - 3px - 3px);
-  border: 3px solid hsl(213, 71%, 49%);
+  border: 3px solid hsl(213deg 71% 49%);
 
   /* button border radius + outline width + offset */
   border-radius: calc(5px + 3px + 3px);
   content: "";
 }
 
 [role="button"]:active {
-  border-color: hsl(213, 71%, 49%);
-  background-color: hsl(216, 82%, 31%);
+  border-color: hsl(213deg 71% 49%);
+  background-color: hsl(216deg 82% 31%);
   background-image: linear-gradient(
     to bottom,
-    hsl(216, 82%, 53%),
-    hsl(216, 82%, 47%)
+    hsl(216deg 82% 53%),
+    hsl(216deg 82% 47%)
   );
-  box-shadow: inset 0 3px 5px 1px hsl(216, 82%, 30%);
+  box-shadow: inset 0 3px 5px 1px hsl(216deg 82% 30%);
 }
 
 [role="button"][aria-pressed] {
-  border-color: hsl(261, 71%, 49%);
-  box-shadow: 0 1px 2px hsl(261, 27%, 55%);
-  text-shadow: 0 -1px 1px hsl(261, 27%, 25%);
-  background-color: hsl(261, 82%, 51%);
+  border-color: hsl(261deg 71% 49%);
+  box-shadow: 0 1px 2px hsl(261deg 27% 55%);
+  text-shadow: 0 -1px 1px hsl(261deg 27% 25%);
+  background-color: hsl(261deg 82% 51%);
   background-image: linear-gradient(
     to bottom,
-    hsl(261, 82%, 53%),
-    hsl(261, 82%, 47%)
+    hsl(261deg 82% 53%),
+    hsl(261deg 82% 47%)
   );
 }
 
 [role="button"][aria-pressed]:hover {
-  border-color: hsl(261, 71%, 29%);
-  background-color: hsl(261, 82%, 31%);
+  border-color: hsl(261deg 71% 29%);
+  background-color: hsl(261deg 82% 31%);
   background-image: linear-gradient(
     to bottom,
-    hsl(261, 82%, 33%),
-    hsl(261, 82%, 27%)
+    hsl(261deg 82% 33%),
+    hsl(261deg 82% 27%)
   );
 }
 
 [role="button"][aria-pressed="true"] {
   padding-top: 0.5em;
   padding-bottom: 0.3em;
-  border-color: hsl(261, 71%, 49%);
-  background-color: hsl(261, 82%, 31%);
+  border-color: hsl(261deg 71% 49%);
+  background-color: hsl(261deg 82% 31%);
   background-image: linear-gradient(
     to bottom,
-    hsl(261, 82%, 63%),
-    hsl(261, 82%, 57%)
+    hsl(261deg 82% 63%),
+    hsl(261deg 82% 57%)
   );
-  box-shadow: inset 0 3px 5px 1px hsl(261, 82%, 30%);
+  box-shadow: inset 0 3px 5px 1px hsl(261deg 82% 30%);
 }
 
 [role="button"][aria-pressed="true"]:hover {
-  border-color: hsl(261, 71%, 49%);
-  background-color: hsl(261, 82%, 31%);
+  border-color: hsl(261deg 71% 49%);
+  background-color: hsl(261deg 82% 31%);
   background-image: linear-gradient(
     to bottom,
-    hsl(261, 82%, 43%),
-    hsl(261, 82%, 37%)
+    hsl(261deg 82% 43%),
+    hsl(261deg 82% 37%)
   );
-  box-shadow: inset 0 3px 5px 1px hsl(261, 82%, 20%);
+  box-shadow: inset 0 3px 5px 1px hsl(261deg 82% 20%);
 }
 
 [role="button"][aria-pressed]:focus::before {
-  border-color: hsl(261, 71%, 49%);
+  border-color: hsl(261deg 71% 49%);
 }
 
 [role="button"] svg {
diff --git a/tests/command-button/reference/2022-4-8_124112/js/button.js b/tests/command-button/reference/2022-4-8_124112/js/button.js
@@ -0,0 +1,118 @@
+/*
+ *   This content is licensed according to the W3C Software License at
+ *   https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
+ *
+ *   JS code for the button design pattern
+ */
+
+'use strict';
+
+var ICON_MUTE_URL = '#icon-mute';
+var ICON_SOUND_URL = '#icon-sound';
+
+function init() {
+  var actionButton = document.getElementById('action');
+  actionButton.addEventListener('click', activateActionButton);
+  actionButton.addEventListener('keydown', actionButtonKeydownHandler);
+  actionButton.addEventListener('keyup', actionButtonKeyupHandler);
+
+  var toggleButton = document.getElementById('toggle');
+  toggleButton.addEventListener('click', toggleButtonClickHandler);
+  toggleButton.addEventListener('keydown', toggleButtonKeydownHandler);
+  toggleButton.addEventListener('keyup', toggleButtonKeyupHandler);
+}
+
+/**
+ * Activates the action button with the enter key.
+ *
+ * @param {KeyboardEvent} event
+ */
+function actionButtonKeydownHandler(event) {
+  // The action button is activated by space on the keyup event, but the
+  // default action for space is already triggered on keydown. It needs to be
+  // prevented to stop scrolling the page before activating the button.
+  if (event.keyCode === 32) {
+    event.preventDefault();
+  }
+  // If enter is pressed, activate the button
+  else if (event.keyCode === 13) {
+    event.preventDefault();
+    activateActionButton();
+  }
+}
+
+/**
+ * Activates the action button with the space key.
+ *
+ * @param {KeyboardEvent} event
+ */
+function actionButtonKeyupHandler(event) {
+  if (event.keyCode === 32) {
+    event.preventDefault();
+    activateActionButton();
+  }
+}
+
+function activateActionButton() {
+  window.print();
+}
+
+/**
+ * Toggles the toggle button’s state if it’s actually a button element or has
+ * the `role` attribute set to `button`.
+ *
+ * @param {MouseEvent} event
+ */
+function toggleButtonClickHandler(event) {
+  if (
+    event.currentTarget.tagName === 'button' ||
+    event.currentTarget.getAttribute('role') === 'button'
+  ) {
+    toggleButtonState(event.currentTarget);
+  }
+}
+
+/**
+ * Toggles the toggle button’s state with the enter key.
+ *
+ * @param {KeyboardEvent} event
+ */
+function toggleButtonKeydownHandler(event) {
+  if (event.keyCode === 32) {
+    event.preventDefault();
+  } else if (event.keyCode === 13) {
+    event.preventDefault();
+    toggleButtonState(event.currentTarget);
+  }
+}
+
+/**
+ * Toggles the toggle button’s state with space key.
+ *
+ * @param {KeyboardEvent} event
+ */
+function toggleButtonKeyupHandler(event) {
+  if (event.keyCode === 32) {
+    event.preventDefault();
+    toggleButtonState(event.currentTarget);
+  }
+}
+
+/**
+ * Toggles the toggle button’s state between *pressed* and *not pressed*.
+ *
+ * @param {HTMLElement} button
+ */
+function toggleButtonState(button) {
+  var isAriaPressed = button.getAttribute('aria-pressed') === 'true';
+
+  button.setAttribute('aria-pressed', isAriaPressed ? 'false' : 'true');
+
+  var icon = button.querySelector('use');
+  icon.setAttribute(
+    'xlink:href',
+    isAriaPressed ? ICON_SOUND_URL : ICON_MUTE_URL
+  );
+}
+
+window.onload = init;
