Replace MicroModal with custom modal class to prevent minimize errors

src/common/helpers/modal.js

-import MicroModal from "micromodal"
+import KudosModal from "../../public/KudosModal"
 
 // Handles the messages by showing the modals in order
 export function handleMessages(messages) {
 
-    let showMessage = () => {
-        MicroModal.show(messages[0].id, {
-            onClose: () => {
-                messages.shift()
-                if (messages.length) {
-                    showMessage()
-                }
-            },
-            awaitCloseAnimation: true,
-            awaitOpenAnimation: true,
-        })
-    }
+    let message = new KudosModal(messages[0].id, null,{
+        onHide: () => {
+            messages.shift()
+            if (messages.length) {
+                message.open()
+            }
+        },
+    })
 
-    showMessage()
+    message.open()
 }
\ No newline at end of file

src/public/KudosModal.js

+class KudosModal {
+
+    constructor(modal, trigger = null, options = []) {
+        this.isOpen = false
+        this.modal = document.getElementById(modal)
+        this.trigger = trigger
+        this.closeModal = this.modal.querySelectorAll('[data-modal-close]')
+        this.options = {
+            timeOut: options.timeOut ?? 300,
+            escapeClose: options.escapeClose ?? true,
+            overlayClose: options.overlayClose ?? false,
+            openClass: options.openClass ?? 'is-open',
+            overlayClass: options.overlayClass ?? 'kudos-modal-overlay',
+            onOpen: options.onOpen,
+            onOpened: options.onOpened,
+            onClose: options.onClose,
+            onClosed: options.onClosed
+        }
+        this.focusableElements = [
+            'a[href]',
+            'area[href]',
+            'input:not([disabled]):not([type="hidden"]):not([aria-hidden])',
+            'select:not([disabled]):not([aria-hidden])',
+            'textarea:not([disabled]):not([aria-hidden])',
+            'button:not([disabled]):not([aria-hidden])',
+            'iframe',
+            'object',
+            'embed',
+            '[contenteditable]',
+            '[tabindex]:not([tabindex^="-"])'
+        ]
+
+        // Bind event handlers
+        this.handleKeyPress = this.handleKeyPress.bind(this)
+        this.handleClick = this.handleClick.bind(this)
+
+        // Click event listener for trigger element
+        if (this.trigger) {
+            this.trigger.addEventListener("click", () => {
+                if (this.isOpen) {
+                    return this.close()
+                }
+                return this.open()
+            })
+        }
+
+        // Close modal button click events
+        this.closeModal.forEach(item => {
+            item.addEventListener("click", () => {
+                this.close()
+            })
+        })
+
+    }
+
+    open() {
+        this.modal.setAttribute('aria-hidden', 'false')
+        this.modal.classList.add(this.options.openClass)
+        this.modal.querySelector('.kudos-modal-container').focus()
+
+        // Add event listeners
+        this.addEventListeners()
+
+        // Create and dispatch event
+        window.dispatchEvent(new CustomEvent('kudosOpenModal', {detail: this}))
+
+        // Fire onOpen function
+        if (typeof this.options.onOpen === 'function') {
+            this.options.onOpen(this.modal)
+        }
+
+        // Timout
+        setTimeout(() => {
+            // Fire onOpened function
+            if (typeof this.options.onOpened === 'function') {
+                this.options.onOpened(this.modal)
+            }
+        }, this.options.timeOut)
+    }
+
+    close() {
+        this.modal.setAttribute('aria-hidden', 'true')
+
+        // Remove event listeners
+        this.removeEventListeners()
+
+        // Create and dispatch event
+        window.dispatchEvent(new CustomEvent('kudosCloseModal', {detail: this}))
+
+        // Fire onClose function
+        if (typeof this.options.onClose === 'function') {
+            this.options.onClose(this.modal)
+        }
+
+        // Timout
+        setTimeout(() => {
+            this.modal.classList.remove(this.options.openClass)
+
+            // Fire onClose function
+            if (typeof this.options.onClosed === 'function') {
+                this.options.onClosed(this.modal)
+            }
+        }, this.options.timeOut)
+    }
+
+    addEventListeners() {
+        window.addEventListener('keydown', this.handleKeyPress)
+        window.addEventListener('click', this.handleClick)
+    }
+
+    removeEventListeners() {
+        window.removeEventListener('keydown', this.handleKeyPress)
+        window.removeEventListener('click', this.handleClick)
+    }
+
+    getFocusableContent() {
+        return Array.from(this.modal.querySelectorAll(this.focusableElements)).filter((e) => {
+            return (e.offsetParent !== null)
+        })
+    }
+
+    handleClick(e) {
+        if (e.target.classList.contains(this.options.overlayClass)) this.handleOverlayClose()
+    }
+
+    handleKeyPress(e) {
+        if (e.key === 'Escape' || e.keyCode === 27) this.handleEscapeClose()
+        if (e.key === 'Tab' || e.keyCode === 9) this.handleTab(e)
+    }
+
+    handleOverlayClose() {
+        if (this.options.overlayClose) {
+            this.close()
+        }
+    }
+
+    handleEscapeClose() {
+        if (this.options.escapeClose) {
+            this.close()
+        }
+    }
+
+    handleTab(e) {
+        const focusableContent = this.getFocusableContent()
+
+        // Bail if no focusable content
+        if (focusableContent.length === 0) return
+
+        const firstFocusableElement = focusableContent[0]
+        const lastFocusableElement = focusableContent[focusableContent.length - 1]
+
+        if (e.shiftKey) {
+            if (document.activeElement === firstFocusableElement) {
+                lastFocusableElement.focus()
+                e.preventDefault()
+            }
+        } else {
+            if (document.activeElement === lastFocusableElement) {
+                firstFocusableElement.focus()
+                e.preventDefault()
+            }
+        }
+    }
+
+}
+
+export default KudosModal
\ No newline at end of file

src/public/kudos-public.js

 import _ from 'lodash'
 import axios from 'axios'
-import MicroModal from 'micromodal'
 import 'jquery-validation'
 import '../images/logo-colour-40.png' // used as email attachment
 import '../images/logo-colour.svg'
 import {getStyle, isVisible} from "../common/helpers/util"
 import {handleMessages} from "../common/helpers/modal"
-import {__} from "@wordpress/i18n"
-
 import {
     animateInView,
     animateProgressBar,
@@ -17,6 +14,8 @@ import {
     resetProgressBar,
     valueChange
 } from "../common/helpers/form"
+import {__} from "@wordpress/i18n"
+import KudosModal from "./KudosModal"
 
 jQuery(document).ready(($) => {
 
@@ -99,49 +98,21 @@ jQuery(document).ready(($) => {
         if (kudosButtons.length) {
 
             // Setup button action
-            kudosButtons.forEach((e) => {
-
-                const target = e.dataset.kudosTarget
-
-                e.addEventListener('click', () => {
-                    if (target) {
-                        MicroModal.show(target, {
-                            onShow(modal) {
-
-                                const form = modal.querySelector('.kudos-form')
-
-                                // Create and dispatch event
-                                window.dispatchEvent(new CustomEvent('kudosShowModal', {detail: modal}))
+            kudosButtons.forEach((button) => {
 
-                                // Animate progress bar
-                                animateProgressBar(form)
+                const modal = button.dataset.kudosTarget
 
-                                // Clear error message
-                                form.querySelector('.kudos_error_message').innerHTML = ""
-
-                                // Reset and config form
-                                if (form.length) {
-
-                                    modal.querySelector('.kudos-modal-container').dataset.currentTab = 'initial'
-                                    resetForm(form)
-                                    $(form).validate().resetForm()
-
-                                    // Set first input as focus
-                                    if ('xs' !== screenSize) {
-                                        form.querySelector('input[name="value"]').focus()
-                                    }
-                                }
-                            },
-                            onClose(modal) {
-                                setTimeout(() => {
-                                    resetProgressBar(modal)
-                                }, 300)
-                                // Create and dispatch event
-                                window.dispatchEvent(new CustomEvent('kudosCloseModal', {detail: modal}))
-                            },
-                            awaitOpenAnimation: true,
-                            awaitCloseAnimation: true,
-                        })
+                new KudosModal(modal, button, {
+                    onOpen: (modal) => {
+                        const form = modal.querySelector('.kudos-form')
+                        animateProgressBar(form)
+                        // Set first input as focus
+                        if ('xs' !== screenSize) {
+                            form.querySelector('input[name="value"]').focus()
+                        }
+                    },
+                    onClosed: (modal) => {
+                        resetProgressBar(modal)
                     }
                 })
             })
@@ -180,7 +151,7 @@ jQuery(document).ready(($) => {
 
         // Multi step form navigation.
         document.querySelectorAll('.kudos-form [data-direction]').forEach((button) => {
-            button.addEventListener('click', (e) => {
+            button.addEventListener('click', () => {
 
                 // Stop if already busy swapping tabs.
                 if (animating) return false
@@ -225,7 +196,7 @@ jQuery(document).ready(($) => {
                     const error = form.querySelector('.kudos_error_message')
                     const formData = new FormData(e.target)
                     const timestamp = e.target.dataset.ts
-                    formData.append('timestamp', timestamp);
+                    formData.append('timestamp', timestamp)
 
                     form.classList.add('kd-is-loading')
                     error.classList.add('kd-hidden')
@@ -328,5 +299,4 @@ jQuery(document).ready(($) => {
             }
         )
     }
-
 })
\ No newline at end of file

templates/public/modal/_message.html.twig

@@ -9,6 +9,6 @@
 </p>
 
 <div class="kudos-modal-buttons kd-mt-8 kd-block kd-text-right">
-    {{ button(__('Ok', 'kudos-donations'), 'primary', 'button', {'data-micromodal-close': ''}) }}
+    {{ button(__('Ok', 'kudos-donations'), 'primary', 'button', {'data-modal-close': ''}) }}
 </div>
 

templates/public/modal/base.html.twig

 <div id="kudos-modal-{{ id }}"
      class="kudos-modal {{ class }} kd-absolute kd-hidden kd-z-1050 kd-text-[16px] xl:kd-text-[18px] 2xl:kd-text-[18px]"
      role="dialog" aria-hidden="true" aria-modal="true" aria-label="{{ modal_title }}">
-    <div class="kudos-modal-overlay kd-flex kd-justify-center kd-items-center kd-fixed kd-top-0 kd-left-0 kd-w-full kd-h-full kd-bg-[#1a202ccc]"
-         tabindex="-1">
+    <div class="kudos-modal-overlay kd-flex kd-justify-center kd-items-center kd-fixed kd-top-0 kd-left-0 kd-w-full kd-h-full kd-bg-[#1a202ccc]">
         <div data-page="1"
              class="kudos-modal-container kd-bg-white kd-p-8 xs:kd-rounded-lg kd-w-full kd-h-full xs:kd-h-auto lg:kd-w-2/4 kd-max-w-lg kd-relative kd-overflow-auto xs:kd-overflow-hidden kd-origin-right
-                    before:kd-w-full before:kd-h-full before:kd-bg-white before:kd-top-0 before:kd-left-0 before:kd-absolute before:kd--z-1 before:kd-opacity-70">
+                    before:kd-w-full before:kd-h-full before:kd-bg-white before:kd-top-0 before:kd-left-0 before:kd-absolute before:kd--z-1 before:kd-opacity-70" tabindex="-1">
             <div class="kudos_modal_header kd-flex kd-items-center kd-justify-between">
                     <span class="kd-mr-3 kd-inline-block kd-flex" title="Kudos Donations">
                         <img alt="Kudos logo" class="kd-h-6" src="{{ get_asset('images/logo-colour.svg') }}">
@@ -14,7 +13,8 @@
                 {% endblock header %}
                 <span
                         class="focus:kd-ring hover:kd-text-primary-dark xs:kd-inline kd-transition-shadow kd-ease-in-out kd-ring-primary kd-ring-offset-2 kd-rounded-full kd-bg-close-button kd-w-5 kd-h-5 kd-cursor-pointer kd-self-center"
-                        data-micromodal-close
+                        data-modal-close
+                        tabindex="0 "
                         title="{{ __('Previous tab', 'kudos-donations') }}"
                 ></span>
             </div>