Ensure focus is moved to modal after animation completes (Fixes #829)

CHANGELOG.md

@@ -7,6 +7,7 @@
 * **css:** Updated stylelint ruleset to match Bedrock's linting pattern. (#814)
 
 ## Bug Fixes
+* **js:** Ensure focus is moved to modal after animation completes (#829)
 * **node:** Make sure to build NPM package using production mode.
 * **html:** Added accessible attributes to menu bar (#815).
 * **css:** Add style rule for the hidden attribute in global reset (#783).

assets/js/protocol/protocol-modal.js

@@ -76,6 +76,12 @@ if (typeof window.Mzp === 'undefined') { // eslint-disable-line block-scoped-var
 
         content.classList.add('mzp-c-modal-overlay-contents');
 
+        // ensure focus is moved to the modal only after CSS animation completes.
+        // issue: https://github.com/mozilla/protocol/issues/829
+        modal.addEventListener('animationend', function () {
+            modal.focus();
+        }, false);
+
         // close modal on clicking close button or background.
         var closeButton = document.querySelector('.mzp-c-modal-button-close');
         closeButton.addEventListener('click', Modal.closeModal, false);
@@ -88,12 +94,6 @@ if (typeof window.Mzp === 'undefined') { // eslint-disable-line block-scoped-var
             }
         }, false);
 
-        // add a short delay is need before calling focus() to give
-        // time for the fade-in animation to complete (issue #749).
-        setTimeout(function() {
-            modal.focus();
-        }, 300);
-
         // close with escape key
         document.addEventListener('keyup', _onDocumentKeyUp, false);