Merge branch 'release' into improved-file-handling

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);
 

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', '<p>' + H5P.t('contentChanged') + '</p><p>' + H5P.t('startingOver') + '</p><div class="h5p-dialog-ok-button" tabIndex="0" role="button">OK</div>', $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();
       }