From 77fb832221f8ac3a7c66b1aca582b9bf17c00a99 Mon Sep 17 00:00:00 2001
From: Thomas Marstrander <thomasmars87@gmail.com>
Date: Tue, 7 Jun 2016 14:31:41 +0200
Subject: [PATCH] Added focus capturing, redirecting it to the open
 confirmation dialog HFJ-1995

---
 js/h5p-confirmation-dialog.js | 31 +++++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/js/h5p-confirmation-dialog.js b/js/h5p-confirmation-dialog.js
index f2b6c61..cb326c6 100644
--- a/js/h5p-confirmation-dialog.js
+++ b/js/h5p-confirmation-dialog.js
@@ -158,6 +158,9 @@ H5P.ConfirmationDialog = (function (EventDispatcher) {
     // Wrapper element
     var wrapperElement;
 
+    // Focus capturing
+    var focusPredator;
+
     /**
      * Set parent of confirmation dialog
      * @param {HTMLElement} wrapper
@@ -168,6 +171,32 @@ H5P.ConfirmationDialog = (function (EventDispatcher) {
       return this;
     };
 
+    /**
+     * Capture the focus element, send it to confirmation button
+     * @param {Event} e Original focus event
+     */
+    var captureFocus = function (e) {
+      if (!popupBackground.contains(e.target)) {
+        e.preventDefault();
+        confirmButton.focus();
+      }
+    };
+
+    /**
+     * Start capturing focus of parent and send it to dialog
+     */
+    var startCapturingFocus = function () {
+      focusPredator = wrapperElement.parentNode || wrapperElement;
+      focusPredator.addEventListener('focus', captureFocus, true);
+    };
+
+    /**
+     * Clean up event listener for capturing focus
+     */
+    var stopCapturingFocus = function () {
+      focusPredator.removeEventListener('focus', captureFocus, true);
+    };
+
     /**
      * Fit popup to container. Makes sure it doesn't overflow.
      * @params {number} [offsetTop] Offset of popup
@@ -199,6 +228,7 @@ H5P.ConfirmationDialog = (function (EventDispatcher) {
      */
     this.show = function (offsetTop) {
       wrapperElement.appendChild(popupBackground);
+      startCapturingFocus();
       popupBackground.classList.remove('hidden');
       fitToContainer(offsetTop);
       setTimeout(function () {
@@ -232,6 +262,7 @@ H5P.ConfirmationDialog = (function (EventDispatcher) {
       popup.classList.add('hidden');
       setTimeout(function () {
         popupBackground.classList.add('hidden');
+        stopCapturingFocus();
         wrapperElement.removeChild(popupBackground);
       }, 100);