Refactor modal: close icon, sr-only heading, transitions instead of animations. Clean code

albinazs · albinazs · commit 51fa248147ff · 2025-08-22T16:41:02.000+02:00
diff --git a/tbx/project_styleguide/templates/patterns/atoms/icon_buttons/icon_button--close.html b/tbx/project_styleguide/templates/patterns/atoms/icon_buttons/icon_button--close.html
diff --git a/tbx/project_styleguide/templates/patterns/atoms/icon_buttons/icon_button.html b/tbx/project_styleguide/templates/patterns/atoms/icon_buttons/icon_button.html
diff --git a/tbx/project_styleguide/templates/patterns/atoms/sprites/sprites.html b/tbx/project_styleguide/templates/patterns/atoms/sprites/sprites.html
@@ -55,6 +55,10 @@
         <path d="M3.367 10.547a10 10 0 016.772-6.771l2.927-.861a10 10 0 015.644 0l2.927.86a10 10 0 016.772 6.772l.86 2.928a10 10 0 010 5.643l-.86 2.927a10 10 0 01-6.772 6.772l-2.927.861a10 10 0 01-5.644 0l-2.927-.86a10 10 0 01-6.772-6.773l-.86-2.927a10 10 0 010-5.643l.86-2.928z" fill="none"  stroke="currentColor" stroke-width="4"/>
     </symbol>
 
+    <symbol id="close" viewBox="0 0 32 24" fill="none">
+        <path d="M4 10H28" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" transform="rotate(45 16 10)"/><path d="M4 10H28" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" transform="rotate(-45 16 10)"/>
+    </symbol>
+
     {# Logo: Torchbox #}
     <symbol id="logo-torchbox" viewBox="0 0 830 220" fill="none">
         <path d="M119.519 103.815C120.273 102.498 122.253 102.874 122.442 104.38C122.913 108.709 123.479 115.39 122.536 122.636C120.462 139.104 106.789 165.924 77.6512 173.452C76.331 173.828 75.2938 172.323 76.0481 171.099C78.6884 166.959 80.2915 161.124 80.2915 153.502C80.2915 136.093 61.4323 109.65 61.4323 109.65C61.4323 109.65 42.5731 136.093 42.5731 153.502C42.5731 161.03 44.1761 166.865 46.8164 171.005C47.665 172.229 46.6278 173.734 45.2133 173.358C15.2272 165.359 -2.21751 135.34 0.234189 105.98C1.27144 93.8401 8.06076 82.7358 12.0212 77.2778C12.8699 76.1485 14.7558 76.7132 14.8501 78.2188C15.133 84.5238 16.5474 96.0045 22.8652 105.603L23.0538 105.791C26.1655 99.204 29.466 94.4047 29.466 94.4047C32.2005 90.2641 35.4066 86.1236 38.3297 82.924C53.7 65.5148 57.0947 47.6351 47.9479 28.7202C47.2879 27.3086 48.8909 25.897 50.2111 26.744C64.1669 35.4015 103.771 65.0443 104.526 119.719V120.566C108.863 118.495 115.087 111.72 119.519 103.815Z" fill="currentColor"/><path d="M173.985 67.8179V171.335H198.352V67.8179H238.194V46.2963H134.143V67.8179H173.985Z" fill="currentColor"/><path d="M520.864 122.067V171.336H544.164V116.909C544.164 110.388 542.741 104.637 539.895 99.6566C537.05 94.6763 533.078 90.7633 527.979 87.9175C522.999 85.0717 517.248 83.6487 510.726 83.6487C504.204 83.6487 498.394 85.0717 493.295 87.9175C490.691 89.4055 488.379 91.2014 486.359 93.3054V46.2998H463.058V171.336H486.359V122.067C486.359 118.629 487.07 115.605 488.493 112.996C490.035 110.388 492.11 108.372 494.718 106.949C497.327 105.526 500.291 104.815 503.612 104.815C508.71 104.815 512.86 106.415 516.062 109.617C519.264 112.819 520.864 116.969 520.864 122.067Z" fill="currentColor"/>
diff --git a/tbx/project_styleguide/templates/patterns/molecules/iframe_modal/iframe_modal.html b/tbx/project_styleguide/templates/patterns/molecules/iframe_modal/iframe_modal.html
@@ -0,0 +1,23 @@
+<div class="modal" id="iframe-embed-modal" aria-hidden="true">
+    <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="sr-only" id="modal-title">Service Enquiry</h2>
+            <button type="button"
+                    class="modal__close-button"
+                    data-micromodal-close
+                    aria-label="Close modal">{% include "patterns/atoms/icons/icon.html" with name="close" %}</button>
+        </header>
+        <div class="modal__content" id="filters-content">
+            <iframe src="{{ iframe_src }}"
+                    width="100%"
+                    height="650px"
+                    frameborder="0"
+                    title="Service enquiry form">
+            </iframe>
+        </div>
+    </div>
+</div>
diff --git a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/sticky_call_to_action.html b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/sticky_call_to_action.html
@@ -1,7 +1,6 @@
 {% load wagtailcore_tags %}
 {# call_to_action is a required field (streamblock) in the block definition #}
 
-
 <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" %}
@@ -26,25 +25,5 @@
 </div>
 
 {% 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" 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>
-                <div class="modal__close">
-                    {% include "patterns/atoms/icon_buttons/icon_button.html" with modifier="close" data="data-micromodal-close" aria='aria-label="Close modal"' %}
-                </div>
-            </header>
-            <main class="modal__content" id="filters-content">
-                <iframe
-                    src="{{ value.get_button_link }}"
-                    width="100%"
-                    height="650px"
-                    frameborder="0"
-                    title="Modal Webform">
-                </iframe>
-            </main>
-        </div>
-    </div>
+    {% include "patterns/molecules/iframe_modal/iframe_modal.html" with iframe_src=value.get_button_link %}
 {% endif %}
diff --git a/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/sticky_call_to_action.yaml b/tbx/project_styleguide/templates/patterns/molecules/streamfield/blocks/sticky_call_to_action.yaml
@@ -3,5 +3,4 @@ context:
     sticky_text: Get in touch
     sticky_subtext: learn about our journey
     button_link:
-      - modal_iframe:
-        url: 'https://example.com'
+      - modal_iframe: 'https://example.com'
diff --git a/tbx/static_src/javascript/components/modal.js b/tbx/static_src/javascript/components/modal.js
@@ -1,22 +1,22 @@
 import MicroModal from 'micromodal'; // es6 module
 
-// Assumes a strcuture as follows
-// <div class="modal" id="filters" aria-hidden="true">
-//     <div class="modal__overlay" tabindex="-1" 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">Title<h2>
-//             <div class="modal__close">
-//                 {% include "atoms/icon_buttons/icon_button.html" with modifier="close" data="data-micromodal-close" aria='aria-label="Close modal"' %}
-//             </div>
-//         </header>
-//         <main class="modal__content" id="filters-content">
-//             Content
-//         </main>
-//         <footer class="modal__footer">
-//             <button class="modal__btn" data-micromodal-close>Close</button>
-//             </footer>
-//     </div>
+// Markup required
+// Trigger:
+// <button type="button" data-micromodal-trigger="iframe-embed-modal">Open</button>
+//
+// Modal:
+// <div class="modal" id="iframe-embed-modal" aria-hidden="true">
+//   <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 id="modal-title">Service enquiry</h2>
+//          <button type="button" data-micromodal-close aria-label="Close dialog"></button>
+//     </header>
+//     <div class="modal__content">...</div>
+//   </div>
 // </div>
 
 class Modal {
@@ -58,14 +58,11 @@ class Modal {
         }
 
         // Close modal when clicking on close buttons
-        const closeButton = event.target.closest(
-            '[data-micromodal-close], [data-listing-submit]',
-        );
+        const closeButton = event.target.closest('[data-micromodal-close]');
         if (closeButton) {
             const modal = closeButton.closest('.modal');
             if (modal) {
                 MicroModal.close(modal.id); // Close the modal
-                document.body.style.overflow = ''; // Remove overflow hidden from body
             }
         }
     }
diff --git a/tbx/static_src/sass/components/_modal.scss b/tbx/static_src/sass/components/_modal.scss
@@ -32,121 +32,87 @@
         left: 0;
         right: 0;
         bottom: 0;
-        // background-color: var(--color--background--overlay);
         background: rgba(55, 55, 55, 0.6);
         backdrop-filter: blur(10px);
+        will-change: opacity;
+        opacity: 0;
+        transition: opacity $transition;
     }
 
     &__container {
         @include z-index(modal-controls);
-        // @include hcm-border();
-        // position: relative;
         background-color: var(--color--background);
         padding: $grid;
         width: 100%;
         max-height: 100dvh;
         overflow-y: auto;
-        // margin: $grid-l;
         border: 1px solid var(--color--border--highlight);
+        will-change: opacity;
+        opacity: 0;
+        transition: opacity $transition;
 
         @include media-query(medium) {
             width: 50vw;
             min-width: 459px;
-            padding: $grid-m;
+            padding: $spacer-small;
         }
 
         @include media-query(large) {
             max-width: 758px;
-            padding: $grid-l;
+            padding: $spacer-small-plus;
         }
     }
 
     &__header {
         display: flex;
-        justify-content: space-between;
+        justify-content: flex-end;
         align-items: center;
-        margin-bottom: $grid-l;
+        margin-bottom: $spacer-small-plus;
     }
 
     &__title {
         margin-top: 0;
         margin-bottom: 0;
     }
 
-    &__close {
+    &__close-button {
         @include z-index(modal-controls);
-        position: relative;
-        background: transparent;
-        border: 0;
+        width: 24px;
+        height: 24px;
 
-        button:focus {
+        &:focus {
             @include focus-style();
         }
-    }
 
-    &__container,
-    &__overlay {
-        will-change: transform;
+        .icon {
+            width: 100%;
+            height: 100%;
+        }
     }
 
     &[aria-hidden='false'] {
         #{$root}__overlay {
-            animation: mmfadeIn 0.3s cubic-bezier(0, 0, 0.2, 1);
+            opacity: 1;
         }
 
         #{$root}__container {
-            animation: mmslideIn 0.3s cubic-bezier(0, 0, 0.2, 1),
-                mmfadeIn 0.3s cubic-bezier(0, 0, 0.2, 1);
+            opacity: 1;
         }
     }
 
     &[aria-hidden='true'] {
         #{$root}__overlay {
-            animation: mmfadeOut 0.3s cubic-bezier(0, 0, 0.2, 1);
+            opacity: 0;
         }
 
         #{$root}__container {
-            animation: mmfadeOut 0.3s cubic-bezier(0, 0, 0.2, 1);
+            opacity: 0;
         }
     }
-}
-
-@keyframes mmfadeIn {
-    from {
-        opacity: 0;
-    }
 
-    to {
-        opacity: 1;
-    }
-}
-
-@keyframes mmfadeOut {
-    from {
-        opacity: 1;
-    }
-
-    to {
-        opacity: 0;
-    }
-}
-
-@keyframes mmslideIn {
-    from {
-        transform: translateY(15%);
-    }
-
-    to {
-        transform: translateY(0);
-    }
-}
-
-@keyframes mmslideOut {
-    from {
-        transform: translateY(0);
-    }
-
-    to {
-        transform: translateY(-10%);
+    &__content {
+        @include high-contrast-mode() {
+            border: 1px solid var(--color--text);
+        }
     }
 }
diff --git a/tbx/static_src/sass/config/_variables.scss b/tbx/static_src/sass/config/_variables.scss
@@ -371,13 +371,6 @@ $grid: 30px;
 $grid-gutters: $grid;
 $grid-gutters-large: 80px;
 $grid-gutters-x-large: 120px;
-$grid-xs: calc($grid / 4); // 5px
-$grid-s: calc($grid / 2); // 10px
-$grid-s-m: calc($grid * 0.75); // 15px
-$grid-m: calc($grid * 1.5); // 30px
-$grid-l: calc($grid * 2); // 40px
-$grid-xl: calc($grid * 3); // 60px
-$grid-xxl: calc($grid * 4); // 80px
 
 // Vertical spacing
 // Any changes here will also need to be made in tailwind.config.js
