Elementor Search Widget Accessibility Enhancements

scripts.js

document.addEventListener("DOMContentLoaded", function() {
    // Get all search widgets
    const widgets = document.querySelectorAll('.elementor-search-form');

    widgets.forEach(function(widget) {
        const searchToggle = widget.querySelector('.elementor-search-form__toggle');
        const searchInput = widget.querySelector('.elementor-search-form__input');
        const searchContainer = widget.querySelector('.elementor-search-form__container');
        const closeButton = widget.querySelector('.dialog-lightbox-close-button');

        // Check if a submit button exists, if not, create and add it
        let submitButton = widget.querySelector('.search-submit-button');
        if (!submitButton) {
            submitButton = document.createElement('button');
            submitButton.type = 'submit';
            submitButton.innerText = 'Search';
            submitButton.className = 'search-submit-button';
            searchInput.parentNode.insertBefore(submitButton, searchInput.nextSibling);
        }

        // ARIA enhancements and dynamic behavior
        searchContainer.setAttribute('role', 'dialog');
        searchContainer.setAttribute('aria-modal', 'true');
        searchContainer.setAttribute('aria-labelledby', searchInput.id);
        searchToggle.setAttribute('aria-expanded', 'false');
        searchContainer.setAttribute('aria-hidden', 'true');

        // Toggle search on click
        searchToggle.addEventListener('click', function() {
            const isExpanded = searchToggle.getAttribute('aria-expanded') === 'true';
            searchContainer.style.display = isExpanded ? 'none' : 'block';
            searchContainer.setAttribute('aria-hidden', isExpanded);
            searchToggle.setAttribute('aria-expanded', !isExpanded);
            if (!isExpanded) {
                searchInput.focus();
            }
            trapFocus(searchContainer);
        });

        closeButton.addEventListener('click', function() {
            closeSearchContainer();
        });

        function trapFocus(container) {
            const focusableElements = container.querySelectorAll('input, button, [tabindex]:not([tabindex="-1"])');
            const firstFocusable = focusableElements[0];
            const lastFocusable = focusableElements[focusableElements.length - 1];

            container.addEventListener('keydown', function(e) {
                if (e.key === 'Tab') {
                    if (e.shiftKey) { // Shift + Tab
                        if (document.activeElement === firstFocusable) {
                            e.preventDefault();
                            lastFocusable.focus();
                        }
                    } else { // Tab
                        if (document.activeElement === lastFocusable) {
                            e.preventDefault();
                            firstFocusable.focus();
                        }
                    }
                } else if (e.key === 'Escape') {
                    closeSearchContainer();
                }
            });
        }

        function closeSearchContainer() {
            searchContainer.style.display = 'none';
            searchContainer.setAttribute('aria-hidden', 'true');
            searchToggle.setAttribute('aria-expanded', 'false');
            searchToggle.focus(); // Focus back to the toggle button
        }
    });
});