Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Activate/toggle buttons with space on keyup #858

Merged
merged 2 commits into from
Sep 13, 2018
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
141 changes: 85 additions & 56 deletions examples/button/js/button.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,84 +2,113 @@
* 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 space key.
*
* @param {KeyboardEvent} event
*/
function actionButtonKeyupHandler (event) {
if (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 space key.
*
* @param {KeyboardEvent} event
*/
function toggleButtonKeyupHandler (event) {
if (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);
kleinfreund marked this conversation as resolved.
Show resolved Hide resolved
}

window.onload = init;