Activate/toggle buttons with space on keyup

examples/button/js/button.js

@@ -2,84 +2,114 @@
 *   This content is licensed according to the W3C Software License at
 *   https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
 *
-*   File:   button.js
-*
-*   Desc:   JS code for Button Design Pattersn
+*   JS code for the button design pattern
 */
 
-var ICON_MUTE_URL  = 'images/mute.svg#icon-mute';
+var ICON_MUTE_URL = 'images/mute.svg#icon-mute';
 var ICON_SOUND_URL = 'images/mute.svg#icon-sound';
 
 function init () {
-  // Create variables for the various buttons
   var actionButton = document.getElementById('action');
-  var toggleButton = document.getElementById('toggle');
-
-  // Add event listeners to the various buttons
-  actionButton.addEventListener('click', actionButtonEventHandler);
-  actionButton.addEventListener('keydown', actionButtonEventHandler);
-
-  toggleButton.addEventListener('click', toggleButtonEventHandler);
-  toggleButton.addEventListener('keydown', toggleButtonEventHandler);
+  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);
 }
 
-function actionButtonEventHandler (event) {
-  var type = event.type;
-
-  // Grab the keydown and click events
-  if (type === 'keydown') {
-    // If either enter or space is pressed, execute the funtion
-    if (event.keyCode === 13 || event.keyCode === 32) {
-      window.print();
-
-      event.preventDefault();
-    }
+/**
+ * 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();
   }
-  else if (type === 'click') {
-    window.print();
+}
+
+/**
+ * Activates the action button with the enter or space key.
+ *
+ * @param {KeyboardEvent} event
+ */
+function actionButtonKeyupHandler (event) {
+  // If either enter or space is pressed, activate the button
+  if (event.keyCode === 13 || event.keyCode === 32) {
+    event.preventDefault();
+    activateActionButton();
   }
 }
 
-function toggleButtonEventHandler (event) {
-  var type = event.type;
+function activateActionButton () {
+  window.print();
+}
 
-  // Grab the keydown and click events
-  if (type === 'keydown') {
-    // If either enter or space is pressed, execute the funtion
-    if (event.keyCode === 13 || event.keyCode === 32) {
-      toggleButtonState(event);
+/**
+ * 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);
+  }
+}
 
-      event.preventDefault();
-    }
+/**
+ * Toggles the toggle button’s state with the enter key.
+ *
+ * @param {KeyboardEvent} event
+ */
+function toggleButtonKeydownHandler (event) {
+  if (event.keyCode === 32) {
+    event.preventDefault();
   }
-  else if (type === 'click') {
-    // Only allow this event if either role is correctly set
-    // or a correct element is used.
-    if (event.target.getAttribute('role') === 'button' || event.target.tagName === 'button') {
-      toggleButtonState(event);
-    }
+  else if (event.keyCode === 13) {
+    event.preventDefault();
+    toggleButtonState(event.currentTarget);
   }
 }
 
-function toggleButtonState (event) {
-  var button = event.target;
-  var currentState = button.getAttribute('aria-pressed');
-  var newState = 'true';
+/**
+ * Toggles the toggle button’s state with the enter or space key.
+ *
+ * @param {KeyboardEvent} event
+ */
+function toggleButtonKeyupHandler (event) {
+  if (event.keyCode === 13 || event.keyCode === 32) {
+    event.preventDefault();
+    toggleButtonState(event.currentTarget);
+  }
+}
 
-  var icon = button.getElementsByTagName('use')[0];
-  var currentIconState = icon.getAttribute('xlink:href');
-  var newIconState = ICON_MUTE_URL;
+/**
+ * Toggles the toggle button’s state between *pressed* and *not pressed*.
+ *
+ * @param {HTMLElement} button
+ */
+function toggleButtonState (button) {
+  var isAriaPressed = button.getAttribute('aria-pressed') === 'true';
 
-  // If aria-pressed is set to true, set newState to false
-  if (currentState === 'true') {
-    newState = 'false';
-    newIconState = ICON_SOUND_URL;
-  }
+  button.setAttribute('aria-pressed', isAriaPressed ? 'false' : 'true');
 
-  // Set the new aria-pressed state on the button
-  button.setAttribute('aria-pressed', newState);
-  icon.setAttribute('xlink:href', newIconState);
+  var icon = button.querySelector('use');
+  icon.setAttribute('xlink:href', isAriaPressed ? ICON_SOUND_URL : ICON_MUTE_URL);
 }
 
 window.onload = init;