@guenni: danke – keine em im Code-Modus, keine PHP scripte in der functions

@team Enfold: Do you have an idea?

thx and best regards Tilman

• This reply was modified 6 days, 20 hours ago by oestersund.
• This reply was modified 6 days, 20 hours ago by oestersund.

Hi Rikard,

Thanks, it works :-)

But do we have to insert this code snippet into each of our more than 250 WordPress websites with enfold…? Or is this planned for the next enfold update?

Regards,
Bernd

can enfold block the videos on post? or not???

Sorry, again, for the lag in responding, @Guenni007, and thanks again for your efforts! I think your code wasn’t working right away for me, and I needed some other accessibility fixes for the mobile menu (like a focus trap and making the spacebar open links), so I worked with Claude to implement this code in my child theme functions file — lmk if you see any problems with it:

Stage 1 – Runs immediately on page load:
Finds the hamburger toggle
Adds role=”button”
Adds aria-expanded=”false”
Adds Space key handler
Happens before user ever interacts with it

Stage 2 – Runs when overlay is created (first click):
Adds aria-controls
Sets up focus trap
Adds aria-expanded management (toggling true/false)
Adds ESC key support
Adds Space key on menu items

/* ==========================================================================
   MOBILE MENU FOCUS TRAP WITH ROLE & ARIA-EXPANDED - TWO-STAGE INIT
   ========================================================================== */
function abode_enfold_mobile_menu_focus_trap_complete() { ?>
    <script>
    (function () {
        var toggleEnhanced = false;
        var fullInitialized = false;

        // STAGE 1: Enhance the toggle button immediately (runs on page load)
        function enhanceToggle() {
            if (toggleEnhanced) return;
            
            var toggle = document.querySelector('a[href="#"][aria-label="Menu"]');
            if (!toggle) return;
            
            toggleEnhanced = true;
            
            // Add role="button" immediately
            toggle.setAttribute('role', 'button');
            toggle.setAttribute('aria-expanded', 'false');
            
            // Add Space key handler immediately
            toggle.addEventListener('keydown', function (e) {
                if (e.key === ' ' || e.key === 'Spacebar') { 
                    e.preventDefault(); 
                    this.click(); 
                }
            });
            
            console.log('✓ Stage 1: Toggle button enhanced with role=button and Space key');
        }

        // STAGE 2: Full initialization with focus trap (runs after overlay is created)
        function fullInit() {
            if (fullInitialized) return;
            
            var toggle  = document.querySelector('a[href="#"][aria-label="Menu"]');
            var overlay = document.querySelector('.av-burger-overlay');
            var menu    = document.querySelector('#av-burger-menu-ul');
            
            if (!toggle || !overlay || !menu) return;
            
            fullInitialized = true;
            
            // Make sure toggle is enhanced (in case Stage 1 hadn't run yet)
            if (!toggleEnhanced) {
                enhanceToggle();
            }
            
            // Add aria-controls
            toggle.setAttribute('aria-controls', 'av-burger-menu-ul');
            
            console.log('✓ Stage 2: Full initialization with focus trap and aria-expanded management');

            function getLinks() {
                return Array.from(menu.querySelectorAll('a[href]')).filter(function (a) {
                    var li = a.closest('li');
                    return li && li.offsetParent !== null &&
                           getComputedStyle(a).visibility !== 'hidden' &&
                           getComputedStyle(a).display    !== 'none';
                });
            }

            function isOpen() {
                var s = window.getComputedStyle(overlay);
                return s.display !== 'none' && parseFloat(s.opacity) > 0;
            }

            // Keyboard navigation
            document.addEventListener('keydown', function (e) {
                if (!isOpen()) return;
                
                // Tab key - focus trap
                if (e.key === 'Tab') {
                    var links = getLinks();
                    if (!links.length) return;
                    if (e.shiftKey && document.activeElement === links[0]) {
                        e.preventDefault(); 
                        links[links.length - 1].focus();
                    } else if (!e.shiftKey && document.activeElement === links[links.length - 1]) {
                        e.preventDefault(); 
                        links[0].focus();
                    }
                } 
                // Space key on menu items - activate link
                else if (e.key === ' ' || e.key === 'Spacebar') {
                    var a = document.activeElement;
                    if (a && a.tagName === 'A' && menu.contains(a)) { 
                        e.preventDefault(); 
                        a.click(); 
                    }
                } 
                // Escape key - close menu
                else if (e.key === 'Escape') {
                    toggle.click();
                }
            });

            // Watch for menu open/close and update aria-expanded
            new MutationObserver(function (mutations) {
                mutations.forEach(function (m) {
                    if (m.attributeName !== 'style') return;
                    
                    if (isOpen()) {
                        // Menu opened
                        toggle.setAttribute('aria-expanded', 'true');
                        setTimeout(function () { 
                            var l = getLinks(); 
                            if (l.length) l[0].focus(); 
                        }, 400);
                    } else {
                        // Menu closed
                        toggle.setAttribute('aria-expanded', 'false');
                        setTimeout(function () { 
                            toggle.focus(); 
                        }, 100);
                    }
                });
            }).observe(overlay, { attributes: true, attributeFilter: ['style'] });
        }

        // Try to enhance toggle immediately
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', enhanceToggle);
        } else {
            enhanceToggle();
        }
        
        // Try full init at various times
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', fullInit);
        } else {
            fullInit();
        }
        setTimeout(fullInit, 500);
        setTimeout(fullInit, 1500);

        // Watch for Enfold dynamically creating the menu overlay
        new MutationObserver(function (mutations) {
            mutations.forEach(function (m) {
                m.addedNodes.forEach(function (node) {
                    if (node.nodeType === 1 && node.classList &&
                        node.classList.contains('av-burger-overlay')) {
                        setTimeout(fullInit, 100);
                    }
                });
            });
        }).observe(document.body, { childList: true, subtree: true });
    })();
    </script>
<?php }
add_action('wp_footer', 'abode_enfold_mobile_menu_focus_trap_complete', 999);

Okay, not recommended, but suggested ;-) If no caching plugin is installed, the Enfold theme displays the following message in the Performance tab:

We couldn’t detect any active caching plugin. It is recommended to use one to speed up your site. Here are a few suggestions:

No matter what I do, when the Super Cache plugin is active, I can’t save the theme. The following error occurs:

AH01071: Got error 'PHP message: PHP Fatal error: Uncaught Error: Call to undefined function get_blog_option() in /var/www/vhosts/xxxxxxxxxxxx.xx/wordpresstest.xxxxxxxxxxxx.xx/wp-content/plugins/wp-super-cache/wp-cache-phase2.php:820\nStack trace:\n#0 /var/www/vhosts/xxxxxxxxxxxx.xx/wordpresstest.xxxxxxxxxxxx.xx/wp-content/plugins/wp-super-cache/wp-cache-phase2.php(3079): get_supercache_dir()\n#1 /var/www/vhosts/xxxxxxxxxxxx.xx/wordpresstest.xxxxxxxxxxxx.xx/wp-content/themes/enfold/includes/config-enfold/functions-framework.php(215): wp_cache_clear_cache()\n#2 /var/www/vhosts/xxxxxxxxxxxx.xx/wordpresstest.xxxxxxxxxxxx.xx/wp-includes/class-wp-hook.php(341): avia_force_clear_caches()\n#3 /var/www/vhosts/xxxxxxxxxxxx.xx/wordpresstest.xxxxxxxxxxxx.xx/wp-includes/class-wp-hook.php(365): WP_Hook->apply_filters()\n#4 /var/www/vhosts/xxxxxxxxxxxx.xx/wordpresstest.xxxxxxxxxxxx.xx/wp-includes/plugin.php(522): WP_Hook->do_action()\n#5 /var/www/vhosts/xxxxxxxxxxxx.xx/wordpresstest.xxxxxxxxxxxx.xx/wp-content/themes/enfold/framewo...', referer: https://wordpresstest.xxxxxxxxxxxx.xx/wp-admin/admin.php?page=avia

I understand that the error is related to the super cache plugin. But when I reset the theme from 7.1.4 to 7.1.3, everything works fine. To me, it looks like a combination error between Enfold 7.1.4 and the super cache plugin.

Regards,
Bernd

• This reply was modified 1 week, 1 day ago by Bernd.
• This reply was modified 1 week, 1 day ago by Bernd.

Enfold Cookie dont block Youtube!!! Why???
I thouhght it does

Hey Rikard

I reset the super cache plugin from 3.0.3 to 3.0.2, 3.0.1, and finally to 3.0.0. However, the problem still persists.

If I deactivate the plugin, the problem is solved. But as far as I remember, the super cache plugin is one of the cache plugins the enfold theme recommend? We have installed it on almost all of our WordPress websites – except for those with WP-Rocket.

Regards,
Bernd

Hi Mike

Sorry to hear you have troubles logging in to my WordPress. I have not changed the provided login credentials as of Feb 9th, and I double checked, it works on my end: https://kellerhalsconsulting.com/wp-login.php So please try again.

And great to hear that you could recrate my page on your side with buttons working fine with no bouncing, so I am optimistic on my end.

Please note: I already added

//set builder mode to debug
add_action(‘avia_builder_mode’, “builder_set_debug”);
function builder_set_debug()
{
return “debug”;
}

to my file: /wp-content/themes/enfold/functions.php

Thank you for your help.

Best regards
Philipp

Hi Ismael,

thanks for your reply.

In the meantime we refactored the implementation and moved the SVG + GSAP logic outside of the content area to avoid any interaction with Enfold’s internal rendering and script handling.

With that adjustment the issue is resolved on our side, so no further investigation is required.

Appreciate your support.

Best regards,
T