Use buttons instead of anchors in Confirmation Dialog.

HFJ-1930

js/h5p-confirmation-dialog.js

@@ -24,6 +24,26 @@ H5P.ConfirmationDialog = (function (EventDispatcher) {
     options.cancelText = options.cancelText || H5P.t('cancelLabel');
     options.confirmText = options.confirmText || H5P.t('confirmLabel');
 
+    /**
+     * Handle confirming event
+     * @param {Event} e
+     */
+    function dialogConfirmed(e) {
+      self.hide();
+      self.trigger('confirmed');
+      e.preventDefault();
+    }
+
+    /**
+     * Handle dialog canceled
+     * @param {Event} e
+     */
+    function dialogCanceled(e) {
+      self.hide();
+      self.trigger('canceled');
+      e.preventDefault();
+    }
+
     // Offset of exit button
     var exitButtonOffset = 2 * 16;
     var shadowOffset = 8;
@@ -69,70 +89,37 @@ H5P.ConfirmationDialog = (function (EventDispatcher) {
     body.appendChild(buttons);
 
     // Cancel button
-    var cancelButton = document.createElement('a');
+    var cancelButton = document.createElement('button');
     cancelButton.classList.add('h5p-core-cancel-button');
-    cancelButton.href = '#';
     cancelButton.textContent = options.cancelText;
-    cancelButton.onclick = function (e) {
-      self.hide();
-      self.trigger('canceled');
-      e.preventDefault();
-    };
+    cancelButton.onclick = dialogCanceled;
     cancelButton.onkeydown = function (e) {
       if (e.which === 32) { // Space
-        // Prevent jumping
-        e.preventDefault();
-      }
-      else if (e.which === 13) { // Enter
-        self.hide();
-        self.trigger('canceled');
-        e.preventDefault();
+        dialogCanceled(e);
       }
     };
     buttons.appendChild(cancelButton);
 
     // Confirm button
-    var confirmButton = document.createElement('a');
+    var confirmButton = document.createElement('button');
     confirmButton.classList.add('h5p-core-button',
       'h5p-confirmation-dialog-confirm-button');
-    confirmButton.href = '#';
     confirmButton.textContent = options.confirmText;
-    confirmButton.onclick = function (e) {
-      self.hide();
-      self.trigger('confirmed');
-      e.preventDefault();
-    };
+    confirmButton.onclick = dialogConfirmed;
     confirmButton.onkeydown = function (e) {
       if (e.which === 32) { // Space
-        // Prevent jumping
-        e.preventDefault();
-      }
-      else if (e.which === 13) { // Enter
-        self.hide();
-        self.trigger('confirmed');
-        e.preventDefault();
+        dialogConfirmed(e);
       }
     };
     buttons.appendChild(confirmButton);
 
     // Exit button
-    var exitButton = document.createElement('a');
-    exitButton.href = '#';
+    var exitButton = document.createElement('button');
     exitButton.classList.add('h5p-confirmation-dialog-exit');
-    exitButton.onclick = function (e) {
-      self.hide();
-      self.trigger('canceled');
-      e.preventDefault();
-    };
+    exitButton.onclick = dialogCanceled;
     exitButton.onkeydown = function (e) {
       if (e.which === 32) { // Space
-        // Prevent jumping
-        e.preventDefault();
-      }
-      else if (e.which === 13) { // Enter
-        self.hide();
-        self.trigger('canceled');
-        e.preventDefault();
+        dialogCanceled(e);
       }
     };
     popup.appendChild(exitButton);

styles/h5p-confirmation-dialog.css

@@ -81,9 +81,9 @@
   float: right;
 }
 
-a.h5p-confirmation-dialog-exit:visited,
-a.h5p-confirmation-dialog-exit:link,
-a.h5p-confirmation-dialog-exit {
+button.h5p-confirmation-dialog-exit:visited,
+button.h5p-confirmation-dialog-exit:link,
+button.h5p-confirmation-dialog-exit {
   position: absolute;
   background: none;
   border: none;
@@ -95,8 +95,8 @@ a.h5p-confirmation-dialog-exit {
   text-decoration: none;
 }
 
-a.h5p-confirmation-dialog-exit:focus,
-a.h5p-confirmation-dialog-exit:hover {
+button.h5p-confirmation-dialog-exit:focus,
+button.h5p-confirmation-dialog-exit:hover {
   color: #555;
 }
 

styles/h5p-core-button.css

@@ -1,6 +1,6 @@
-a.h5p-core-button:visited,
-a.h5p-core-button:link,
-a.h5p-core-button {
+button.h5p-core-button:visited,
+button.h5p-core-button:link,
+button.h5p-core-button {
   font-size: 1em;
   line-height: 1.2;
   padding: 0.5em 1.25em;
@@ -20,15 +20,15 @@ a.h5p-core-button {
   vertical-align: baseline;
   text-decoration: none;
 }
-a.h5p-core-button:hover,
-a.h5p-core-button:focus {
+button.h5p-core-button:hover,
+button.h5p-core-button:focus {
   background: #1356a3;
   color: #fff;
   text-decoration: none;
   -webkit-transition: initial;
   transition: initial;
 }
-a.h5p-core-button:active {
+button.h5p-core-button:active {
   position: relative;
   background: #104888;
 
@@ -37,7 +37,7 @@ a.h5p-core-button:active {
   box-shadow: inset 0 4px 0 #0e407a;
 }
 
-a.h5p-core-button:before {
+button.h5p-core-button:before {
   font-family: 'H5P';
   padding-right: 0.15em;
   font-size: 1.5em;
@@ -45,9 +45,10 @@ a.h5p-core-button:before {
   line-height: 0.7;
 }
 
-a.h5p-core-cancel-button:visited,
-a.h5p-core-cancel-button:link,
-a.h5p-core-cancel-button {
+button.h5p-core-cancel-button:visited,
+button.h5p-core-cancel-button:link,
+button.h5p-core-cancel-button {
+  border: none;
   background: none;
   color: #a00;
   margin-right: 1em;
@@ -55,8 +56,8 @@ a.h5p-core-cancel-button {
   text-decoration: none;
 }
 
-a.h5p-core-cancel-button:hover,
-a.h5p-core-cancel-button:focus {
+button.h5p-core-cancel-button:hover,
+button.h5p-core-cancel-button:focus {
   background: none;
   border: none;
   color: #e40000;