Elementor Mini Cart Accessibility Enhancement

script.js

document.addEventListener('DOMContentLoaded', function() {
    const toggleButtons = document.querySelectorAll('.elementor-menu-cart__toggle_button');
    const closeButtons = document.querySelectorAll('.elementor-menu-cart__close-button');
    const modalContainers = document.querySelectorAll('.elementor-menu-cart__container');

    function setAccessibility(container, isOpen) {
        const focusableElements = container.querySelectorAll('a, button, input, select, textarea, [tabindex]');
        focusableElements.forEach(element => {
            element.setAttribute('tabindex', isOpen ? '0' : '-1');
        });
        container.setAttribute('aria-hidden', !isOpen);
    }

    function initializeAccessibility() {
        // Delay the initialization to ensure other scripts have manipulated the DOM if necessary
        setTimeout(() => {
            toggleButtons.forEach((toggleButton, index) => {
                const isModalOpen = toggleButton.getAttribute('aria-expanded') === 'true';
                setAccessibility(modalContainers[index], isModalOpen);
            });
        }, 500); // Delay may need to be adjusted based on specific needs
    }

    toggleButtons.forEach((toggleButton, index) => {
        toggleButton.addEventListener('click', function() {
            const currentlyExpanded = toggleButton.getAttribute('aria-expanded') === 'true';
            toggleButton.setAttribute('aria-expanded', !currentlyExpanded);
            setAccessibility(modalContainers[index], !currentlyExpanded);

            // Focus the first focusable element when the modal is opened
            if (!currentlyExpanded) {
                const firstFocusableElement = modalContainers[index].querySelector('a, button, input, select, textarea, [tabindex]');
                if (firstFocusableElement) {
                    firstFocusableElement.focus();
                }
            }
        });
    });

    closeButtons.forEach((closeButton, index) => {
        closeButton.addEventListener('click', function() {
            toggleButtons[index].focus(); // Focus back on the toggle button
            setAccessibility(modalContainers[index], false); // Make the modal container not focusable
        });

        closeButton.addEventListener('keydown', function(event) {
            // Check if the Enter key is pressed
            if (event.key === 'Enter') {
                // Trigger a click event on the close button
                closeButton.click();
            }
        });
    });

    initializeAccessibility();

    // Add aria-controls attribute to the toggle buttons
    toggleButtons.forEach((toggleButton, index) => {
        if (toggleButton && modalContainers[index]) {
            const modalId = modalContainers[index].getAttribute('id');
            toggleButton.setAttribute('aria-controls', modalId);
        }
    });

    // Check if the toggle buttons exist and then add the role
    toggleButtons.forEach(toggleButton => {
        toggleButton.setAttribute('role', 'button');
    });

    // Check if the close buttons exist, add the role and aria-label
    closeButtons.forEach(closeButton => {
        closeButton.setAttribute('role', 'button');
        closeButton.setAttribute('aria-label', 'Close');
        closeButton.tabIndex = 0;
    });

    // Add role="dialog" to the modal containers
    modalContainers.forEach(modalContainer => {
        modalContainer.setAttribute('role', 'dialog');
    });
});