diff --git a/components/n-ui/subscription-offer-prompt/index.js b/components/n-ui/subscription-offer-prompt/index.js index d432d91a3..0ddbcdd3c 100644 --- a/components/n-ui/subscription-offer-prompt/index.js +++ b/components/n-ui/subscription-offer-prompt/index.js @@ -28,12 +28,9 @@ const isLoggedIn = utils.getCookie('FTSession'); /* @param {Object} flags - */ -// TODO a11y: -// move focus to any pop up -// make ESC close it and go back to previous focused element +// TODO a11y: move focus to _any_ pop up export default function init (flags) { const messagesEnabled = flags.get('b2cMessagePrompt'); - if (isLoggedIn() || document.querySelector('.ft-subscription-panel') || !messagesEnabled || document.querySelector('.inline-barrier') || document.querySelector('.sub-header--fastft') ) { return; } diff --git a/components/n-ui/subscription-offer-prompt/lionel.js b/components/n-ui/subscription-offer-prompt/lionel.js index e240b50ff..b934bcca9 100644 --- a/components/n-ui/subscription-offer-prompt/lionel.js +++ b/components/n-ui/subscription-offer-prompt/lionel.js @@ -74,12 +74,56 @@ const createPopupHTML = values => const createSubscriptionPrompt = values => { + let focusedElementBeforePrompt; + let focusableElementsStrings = ['.subscription-prompt--subscribe-btn', '.n-sliding-popup-close']; + const subscriptionPrompt = createPopupHTML(values); - subscriptionPrompt.onClose = setPromptLastClosed; + let focusableElements = subscriptionPrompt.querySelectorAll(focusableElementsStrings); + focusableElements = Array.prototype.slice.call(focusableElements); + + subscriptionPrompt.onClose = () => { + setPromptLastClosed(); + + if(focusedElementBeforePrompt !== undefined) focusedElementBeforePrompt.focus(); + subscriptionPrompt.removeEventListener('keydown', trapTab); + focusableElements.forEach((elem) => { + elem.setAttribute('tabindex', '-1'); + }); + } document.body.appendChild(subscriptionPrompt); + + let firstTabStop = focusableElements[0]; + let lastTabStop = focusableElements[focusableElements.length - 1]; + + const trapTab = (e) => { + if(e.keyCode === 9) { + if(e.shiftKey) { + if(document.activeElement === firstTabStop) { + e.preventDefault(); + lastTabStop.focus(); + } + } else { + if(document.activeElement === lastTabStop) { + e.preventDefault(); + firstTabStop.focus(); + } + } + } + + if(e.keyCode === 27) { + slidingPopup.close(); + } + }; + + subscriptionPrompt.addEventListener('keydown', trapTab); + const slidingPopup = new SlidingPopup(subscriptionPrompt); + setTimeout(() => { slidingPopup.open(); + focusedElementBeforePrompt = document.activeElement; + firstTabStop.focus(); + broadcast('oTracking.event', { category: 'message', action: 'show',