diff --git a/js/h5p-confirmation-dialog.js b/js/h5p-confirmation-dialog.js index c948192..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'); @@ -80,6 +97,7 @@ H5P.ConfirmationDialog = (function (EventDispatcher) { // Popup text var text = document.createElement('div'); text.classList.add('h5p-confirmation-dialog-text'); + text.setAttribute('role', 'alert'); text.innerHTML = options.dialogText; body.appendChild(text); @@ -92,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 @@ -113,14 +143,15 @@ H5P.ConfirmationDialog = (function (EventDispatcher) { }; buttons.appendChild(confirmButton); - // Exit button - var exitButton = document.createElement('button'); - exitButton.classList.add('h5p-confirmation-dialog-exit'); + // 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); diff --git a/js/h5p.js b/js/h5p.js index 71484ae..551bde0 100644 --- a/js/h5p.js +++ b/js/h5p.js @@ -122,13 +122,15 @@ H5P.init = function (target) { delete contentData.contentUserData; var dialog = new H5P.Dialog('content-user-data-reset', 'Data Reset', '

' + H5P.t('contentChanged') + '

' + H5P.t('startingOver') + '

OK
', $container); H5P.jQuery(dialog).on('dialog-opened', function (event, $dialog) { - $dialog.find('.h5p-dialog-ok-button').click(function () { - dialog.close(); - }).keypress(function (event) { - if (event.which === 32) { + + var closeDialog = function (event) { + if (event.type === 'click' || event.which === 32) { dialog.close(); + H5P.deleteUserData(contentId, 'state', 0); } - }); + }; + + $dialog.find('.h5p-dialog-ok-button').click(closeDialog).keypress(closeDialog); }); dialog.open(); }