Accessibility on Navigation Dropdown

[dannikb]

I’m running an accessibility audit on a Pro site. One of the issues that is being flagged (using ScreamingFrog, which uses axe) is “ARIA Attributes Require Valid Values” pointing to “.x-anchor-toggle” (the navigation dropdown element).

I think the issue is that this element is using:
aria-haspopup=“true”
but aria-haspopup has a possible value of “menu,” which some versions of axe-core prefer as a more explicit value.

Is there a way to remove the “true” value and replace it with “menu” and/or should this be the default on that element?

[prakash_s]

Hello @dannikb,

Thanks for writing to us.

I would suggest you go to the Navigation Dropdown element -> Customize tab->Toggle Custom Attributes->Click on the plus icon, add these attributes

 Name: aria-haspopup
Value: menu

Please have a look at the given screenshot below.

Hope it helps
Thanks

[dannikb]

Thank you! That seems to work. However, that helped me also identify that, when in the open state, it’s using aria-hidden=“false”, but this is technically not the same as removing aria-hidden entirely. The WAI-ARIA spec notes that aria-hidden=“false” is essentially meaningless — the correct open state is to remove the attribute entirely rather than set it to “false”.

[ruenel]

Hello Danni,

Add this in your Global JS:

// Wait for the DOM to be ready
document.addEventListener('DOMContentLoaded', function() {
    // Target the toggle element
    var toggles = document.querySelectorAll('.x-anchor-toggle');
    
    toggles.forEach(function(toggle) {
        // Listen for click events on the toggle
        toggle.addEventListener('click', function() {
            // Get the target element (the dropdown menu)
            var target = document.querySelector(this.getAttribute('data-target'));
            
            if (target) {
                // Check if the dropdown is currently open
                // Assuming the toggle has a class like 'x-active' or similar
                var isOpen = this.classList.contains('x-active');
                
                if (isOpen) {
                    // When opening: Remove aria-hidden entirely
                    target.removeAttribute('aria-hidden');
                } else {
                    // When closing: Set aria-hidden to "true"
                    target.setAttribute('aria-hidden', 'true');
                }
            }
        });
    });
});

The aria-hidden=“false” will be removed once it is false.

Thanks.

[JvP]

Do you think it may be useful to add that behavior natively to Cornerstone?

[prakash_s]

Hello @JvP,

That’s certainly something that could be debated, as there are different approaches and use cases to consider. At the moment, Cornerstone page builder does not provide this behavior natively. We appreciate the suggestion and feedback, and we’ll be happy to pass it along to the team for consideration in future discussions.

Thanks

[dannikb]

Thanks for your help with this. The javascript provided did the trick. I’d second adding this natively though!

[prakash_s]

Hello @dannikb,

Glad to hear everything is working well for you! Thanks for the feedback. We’ll add your vote to the feature request as well.

Thanks