From 6e7e144900231c13f25dcd97a8ca7d97042e4fcf Mon Sep 17 00:00:00 2001
From: Thomas Marstrander <thomasmars87@gmail.com>
Date: Tue, 3 May 2016 11:15:21 +0200
Subject: [PATCH 1/3] Confirmation dialog - Focus confirm button on show.
 HFJ-1860

---
 js/h5p-confirmation-dialog.js | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/js/h5p-confirmation-dialog.js b/js/h5p-confirmation-dialog.js
index 15dd71e..01fa1d7 100644
--- a/js/h5p-confirmation-dialog.js
+++ b/js/h5p-confirmation-dialog.js
@@ -185,6 +185,9 @@ H5P.ConfirmationDialog = (function (EventDispatcher) {
         popup.classList.remove('hidden');
         popupBackground.classList.remove('hiding');
 
+        // Focus confirm button
+        confirmButton.focus();
+
         // Resize iFrame if necessary
         if (resizeIFrame && options.instance) {
           setTimeout(function () {
@@ -198,10 +201,6 @@ H5P.ConfirmationDialog = (function (EventDispatcher) {
 
       }, 0);
 
-      // Programmatically focus popup
-      popup.setAttribute('tabindex', '-1');
-      popup.focus();
-
       return this;
     };
 

From 7782b19e997edd23a30080f089f500de4028523c Mon Sep 17 00:00:00 2001
From: Thomas Marstrander <thomasmars87@gmail.com>
Date: Wed, 4 May 2016 11:53:46 +0200
Subject: [PATCH 2/3] Do not set offset initially, sometimes ended up
 overflowing parent element. Do calculation before setting popup offset.
 HFJ-1867

---
 js/h5p-confirmation-dialog.js | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/js/h5p-confirmation-dialog.js b/js/h5p-confirmation-dialog.js
index 01fa1d7..1d08ab6 100644
--- a/js/h5p-confirmation-dialog.js
+++ b/js/h5p-confirmation-dialog.js
@@ -154,9 +154,13 @@ H5P.ConfirmationDialog = (function (EventDispatcher) {
 
     /**
      * Fit popup to container. Makes sure it doesn't overflow.
+     * @params {number} [offsetTop] Offset of popup
      */
-    var fitToContainer = function () {
+    var fitToContainer = function (offsetTop) {
       var popupOffsetTop = parseInt(popup.style.top, 10);
+      if (offsetTop) {
+        popupOffsetTop = offsetTop;
+      }
 
       // Overflows height
       if (popupOffsetTop + popup.offsetHeight > wrapperElement.offsetHeight) {
@@ -178,9 +182,8 @@ H5P.ConfirmationDialog = (function (EventDispatcher) {
      * @returns {H5P.ConfirmationDialog}
      */
     this.show = function (offsetTop) {
-      popup.style.top = offsetTop + 'px';
       popupBackground.classList.remove('hidden');
-      fitToContainer();
+      fitToContainer(offsetTop);
       setTimeout(function () {
         popup.classList.remove('hidden');
         popupBackground.classList.remove('hiding');

From e412c3a228a484ea8cc6233cc9091c609c799216 Mon Sep 17 00:00:00 2001
From: Thomas Marstrander <thomasmars87@gmail.com>
Date: Wed, 4 May 2016 12:37:59 +0200
Subject: [PATCH 3/3] Make sure focus is set after timeout, to not skewer
 content. HFJ-1867

---
 js/h5p-confirmation-dialog.js | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/js/h5p-confirmation-dialog.js b/js/h5p-confirmation-dialog.js
index 1d08ab6..a8d4ac2 100644
--- a/js/h5p-confirmation-dialog.js
+++ b/js/h5p-confirmation-dialog.js
@@ -188,20 +188,19 @@ H5P.ConfirmationDialog = (function (EventDispatcher) {
         popup.classList.remove('hidden');
         popupBackground.classList.remove('hiding');
 
-        // Focus confirm button
-        confirmButton.focus();
+        setTimeout(function () {
+          // Focus confirm button
+          confirmButton.focus();
 
-        // Resize iFrame if necessary
-        if (resizeIFrame && options.instance) {
-          setTimeout(function () {
+          // Resize iFrame if necessary
+          if (resizeIFrame && options.instance) {
             var minHeight = parseInt(popup.offsetHeight, 10) +
               exitButtonOffset + (2 * shadowOffset);
             wrapperElement.style.minHeight = minHeight + 'px';
             options.instance.trigger('resize');
             resizeIFrame = false;
-          }, 100);
-        }
-
+          }
+        }, 100);
       }, 0);
 
       return this;