diff --git a/js/h5p-confirmation-dialog.js b/js/h5p-confirmation-dialog.js index 9badb8e..f2b6c61 100644 --- a/js/h5p-confirmation-dialog.js +++ b/js/h5p-confirmation-dialog.js @@ -44,6 +44,16 @@ H5P.ConfirmationDialog = (function (EventDispatcher) { e.preventDefault(); } + /** + * Flow focus to element + * @param {HTMLElement} element Next element to be focused + * @param {Event} e Original tab event + */ + function flowTo(element, e) { + element.focus(); + e.preventDefault(); + } + // Offset of exit button var exitButtonOffset = 2 * 16; var shadowOffset = 8; @@ -59,7 +69,14 @@ H5P.ConfirmationDialog = (function (EventDispatcher) { // Create outer popup var popup = document.createElement('div'); popup.classList.add('h5p-confirmation-dialog-popup', 'hidden'); + popup.setAttribute('role', 'dialog'); popupBackground.appendChild(popup); + popup.onkeydown = function (e) { + if (e.which === 27) {// Esc key + // Exit dialog + dialogCanceled(e); + } + }; // Popup header var header = document.createElement('div'); @@ -93,19 +110,31 @@ H5P.ConfirmationDialog = (function (EventDispatcher) { var cancelButton = document.createElement('button'); cancelButton.classList.add('h5p-core-cancel-button'); cancelButton.textContent = options.cancelText; - cancelButton.onclick = dialogCanceled; - cancelButton.onkeydown = function (e) { - if (e.which === 32) { // Space - dialogCanceled(e); - } - }; - buttons.appendChild(cancelButton); // Confirm button var confirmButton = document.createElement('button'); confirmButton.classList.add('h5p-core-button', 'h5p-confirmation-dialog-confirm-button'); confirmButton.textContent = options.confirmText; + + // Exit button + var exitButton = document.createElement('button'); + exitButton.classList.add('h5p-confirmation-dialog-exit'); + exitButton.title = options.cancelText; + + // Cancel handler + cancelButton.onclick = dialogCanceled; + cancelButton.onkeydown = function (e) { + if (e.which === 32) { // Space + dialogCanceled(e); + } + else if (e.which === 9 && e.shiftKey) { // Shift-tab + flowTo(exitButton, e); + } + }; + buttons.appendChild(cancelButton); + + // Confirm handler confirmButton.onclick = dialogConfirmed; confirmButton.onkeydown = function (e) { if (e.which === 32) { // Space @@ -114,15 +143,15 @@ H5P.ConfirmationDialog = (function (EventDispatcher) { }; buttons.appendChild(confirmButton); - // Exit button - var exitButton = document.createElement('button'); - exitButton.classList.add('h5p-confirmation-dialog-exit'); - exitButton.title = options.cancelText; + // Exit handler exitButton.onclick = dialogCanceled; exitButton.onkeydown = function (e) { if (e.which === 32) { // Space dialogCanceled(e); } + else if (e.which === 9 && !e.shiftKey) { // Tab + flowTo(cancelButton, e); + } }; popup.appendChild(exitButton);