Restore focus trap in iframe modals

Author: albinazs

tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/call_to_action.html

@@ -28,7 +28,7 @@ <h2 class="heading heading--two-b call-to-action__heading">{{ value.text }}</h2>
 {% if value.get_button_link_block.block_type == "modal_iframe" %}
     <!-- Modal content -->
     <div class="modal" id="iframe-embed-modal" aria-hidden="true">
-        <div class="modal__overlay" tabindex="-1" data-micromodal-close></div>
+        <div class="modal__overlay" data-micromodal-close></div>
         <div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="modal-title" >
             <header class="modal__header">
                 <h2 class="modal__heading heading heading--two" id="modal-title">Service Enquiry</h2>
@@ -47,4 +47,4 @@ <h2 class="modal__heading heading heading--two" id="modal-title">Service Enquiry
             </main>
         </div>
     </div>
-{% endif %}
+{% endif %}

tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/contact_call_to_action.html

@@ -45,7 +45,7 @@ <h2 class="heading heading--two-b contact-cta__heading">{{ cta.value.text }}</h2
         {% if cta.value.get_button_link_block.block_type == "modal_iframe" %}
         <!-- Modal content -->
             <div class="modal" id="iframe-embed-modal" aria-hidden="true">
-                <div class="modal__overlay" tabindex="-1" data-micromodal-close></div>
+                <div class="modal__overlay" data-micromodal-close></div>
                 <div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="modal-title" >
                     <header class="modal__header">
                         <h2 class="modal__heading heading heading--two" id="modal-title">Service Enquiry</h2>

tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/sticky_call_to_action.html

@@ -28,7 +28,7 @@
 {% if value.get_button_link_block.block_type == "modal_iframe" %}
     <!-- Modal content -->
     <div class="modal" id="iframe-embed-modal" aria-hidden="true">
-        <div class="modal__overlay" tabindex="-1" data-micromodal-close></div>
+        <div class="modal__overlay" data-micromodal-close></div>
         <div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="modal-title" >
             <header class="modal__header">
                 <h2 class="modal__heading heading heading--two" id="modal-title">Service Enquiry</h2>

tbx/static_src/javascript/components/modal.js

@@ -52,6 +52,8 @@ class Modal {
             const modalId = trigger.getAttribute('data-micromodal-trigger');
             if (modalId && typeof MicroModal !== 'undefined') {
                 MicroModal.show(modalId);
+                // Ensure tabbing forward from iframes stays within the modal
+                Modal.ensurePostIframeFocusTrap(modalId);
             }
         }
 
@@ -81,6 +83,35 @@ class Modal {
             }
         }
     }
+
+    // When a modal contains an iframe, browser-level tabbing inside the iframe
+    // does not bubble key events to the parent, so focus-trap libraries
+    // cannot reliably intercept the Tab press. Add a focus sentinel immediately
+    // after the iframe that redirects focus to the Close button.
+    static ensurePostIframeFocusTrap(modalId) {
+        const modal = document.getElementById(modalId);
+        if (!modal) return;
+        const container = modal.querySelector('.modal__container');
+        if (!container) return;
+
+        const iframe = container.querySelector('iframe');
+        if (!iframe) return;
+
+        // Only add once per modal instance
+        if (container.querySelector('.modal__focus-sentinel')) return;
+
+        const sentinel = document.createElement('span');
+        sentinel.tabIndex = 0;
+
+        sentinel.addEventListener('focus', () => {
+            const closeButton = modal.querySelector('[data-micromodal-close]');
+            if (closeButton) {
+                closeButton.focus();
+            }
+        });
+
+        iframe.parentNode.insertBefore(sentinel, iframe.nextSibling);
+    }
 }
 
 export default Modal;

tbx/static_src/sass/components/_modal.scss

@@ -78,6 +78,10 @@
         position: relative;
         background: transparent;
         border: 0;
+
+        button:focus {
+            @include focus-style();
+        }
     }
 
     &__container,