Remove focus outline from Elementor popup menu

Introduction

Elementor is a powerful tool for creating beautiful and engaging websites. However, sometimes the changes they make to improve accessibility can have unintended consequences.

One such change is the recent update that applies focus to the first focusable element in a popup dialog menu. This is a good practice for accessibility, but it can cause a problem on iOS browsers, which add a focus outline to that focused element, even if it was navigated to using the mouse or touchscreen.

In this tutorial, I will show you how to remove the focus outline from Elementor popup menus. I will also discuss the implications of doing this, and help you make an informed decision for your website.

Method 1: Disable Elementor Accessible Navigation Toggle

This method is the simplest to implement, but it is also the least accessible. To disable the accessible navigation toggle, open the pop-up template and navigate to the Popup Settings > Advanced tab. Then, uncheck the “Accessible Navigation” toggle.

Method 2: Add a hidden focusable first item

This method is more accessible than Method 1, but it is also more complex to implement. To add a hidden focusable first item, open the pop-up template and add a new Elementor widget. This widget can be anything that is focusable, such as a <button>, link <a> or a <div tabindex="0">.

This method maintains the rule that the first focusable element should be given focus, but it does so in a way that does not break the accessibility of your pop-up menu.

Steps

1. Add a heading widget as the first element on the popup template.
2. Give it a meaningful title which would be read by screen readers, e.g. “not clickable”
3. Under the Advanced tab > Attributes, add this tabindex | 0
4. Under the Advanced tab > CSS Classes, add a class name of dd-visually-hidden
5. Finally, add the custom CSS using your favourite code snippets plugin or under the Advanced tab > Custom CSS

Custom CSS

.dd-visually-hidden{
    clip: rect(0 0 0 0); 
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap; 
    width: 1px;
}

Method 3: Add a hidden programmatically focusable element

This method involves adding a visually hidden focusable element to the end of the popup template before the close button. The element should have a tabindex of “-1”, which means that it is only tabbable using JavaScript. When the pop-up opens, we use JavaScript to focus on this element. Once the user tabs away, the element gets automatically hidden.

The benefit of this method is that it doesn’t break the “tab trap” within the popup dialog, while also only announcing the false-element once to screen readers.

Steps

1. Add a button element as the last element on the popup template before the close button
2. Add a text of close popup menu to the button
3. Under the Content tab > Link, use the dynamic tag to add a “close popup” link
4. Click on the little cog icon right next to the link, to open up the link settings, and add the following attributes: id|dd-popup__fake-item, role|button, tab-index|-1
5. Under the Advanced tab > CSS Classes for the button, add the CSS class name of dd-visually-hidden
6. Open the Popup Settings, navigate to the Advanced tab > CSS Classes and add the following class names: dd-popup-menu dd-focus--none
7. Finally, either use an HTML widget or your favourite Code Snippets plugin to add the following: remember to enclose the JavaScript within the <script></script> tag and the CSS within the <style></style> tag, if necessary

Custom JS

<script>
        jQuery(document).ready(function($) {
                $(document).on('elementor/popup/show', function() {
                    setTimeout(function() {
                        $('#dd-popup__fake-item').attr('tabindex', '0').focus();
                    }, 0);
                    setTimeout(function() {
                        $('#dd-popup__fake-item').blur().attr('tabindex', '-1');
                    }, 250);
                });
            $(document).on('elementor/popup/show', function() {
                setTimeout(function() {
                    $('.dd-popup-menu').removeClass('dd-focus--none');
                }, 100);
            });
        });
</script>

Custom CSS

.dd-visually-hidden{
    clip: rect(0 0 0 0); 
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap; 
    width: 1px;
}

.dd-focus--none :is(a, a:focus, a:focus-visible){
    outline: none !important;
}