From b91cfbb2ced0bc87aa63c93f8dc628ab0600764e Mon Sep 17 00:00:00 2001 From: Alex Gibson Date: Fri, 18 Nov 2022 12:54:57 +0000 Subject: [PATCH] Ensure focus is moved to modal after animation completes (Fixes #829) --- CHANGELOG.md | 1 + assets/js/protocol/protocol-modal.js | 12 ++++++------ 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index f82bb300..0ff980ef 100644 --- a/CHANGELOG.md +++ b/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). diff --git a/assets/js/protocol/protocol-modal.js b/assets/js/protocol/protocol-modal.js index 8fc895a7..4af6c436 100644 --- a/assets/js/protocol/protocol-modal.js +++ b/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);