Move sticky CTA to end of tab order in main

Author: albinazs

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

@@ -1,8 +1,8 @@
 {% load wagtailcore_tags %}
 {# call_to_action is a required field (streamblock) in the block definition #}
 
-<!-- Sticky block -->
-<div class="call-to-action__sticky">
+
+<div class="call-to-action__sticky" data-sticky-cta>
     <div class="call-to-action__inner">
         {% if value.get_button_link_block.block_type == "modal_iframe" %}
             <button class="call-to-action__stickybutton button" data-micromodal-trigger="iframe-embed-modal">

tbx/static_src/javascript/main.js

@@ -42,4 +42,12 @@ document.addEventListener('DOMContentLoaded', () => {
     initComponent(Modal);
     initComponent(ModeSwitcher);
     new DesktopCloseMenus();
+
+    // Move sticky CTA(s) to the end of the main content for natural tab order
+    const main = document.getElementById('main-content') || document.body;
+    if (main) {
+        document.querySelectorAll('[data-sticky-cta]').forEach((element) => {
+            main.appendChild(element);
+        });
+    }
 });