[Resolved] Missing atribut aria-expanded at Primary menu

[Michaela]

Expandable main menu items that contain sub-items should have the “aria-expanded” attribute set to “true” or “false” depending on the expansion state.

Please advise me how to solve this accessibility issue?

My Primary navigation settings:
Navigation Width: full
Inner Navigation Width: contained
Navigation Alignment: left
Navigation Location: below header
Navigation Dropdown: Click – Menu Item
Dropdown Direction: Right
Navigation Search: Enable

Thank you so much
Michaela

[David]

Hi there,

the aria-expanded attribute is added to the menu item toggle:

<span role="presentation" class="dropdown-menu-toggle" aria-expanded="true">

And this to date has met the a11y requirements. Are you experiencing something different ?

[Michaela]

Hi David,

I know that for mobile menu it is OK. But I need it for standard desk top menu with more than one level.

expandable main menu items that contain sub-items should have the aria-expanded attribute set to true or false depending on the expansion state.

I need to add aria-expanded attribute to each Primary menu item <li id="menu-item-117" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-117"> that contains a submenu <ul class="sub-menu">.

The Primary menu has only 2 levels, so it is issue only at 1st level menu.

Thanks
Michaela

[David]

What i mentioned here applies to both Desktop and Mobile, them drop down toggle is present with the necessary aria attributes.

Is this being flagged by any particular accessibility audit? As our current method has always met the standards in the past.

Let me know.

[Michaela]

Hello David,

sorry for the longer silence. I consulted the problem with the customer (a company for the blind). I wanted add the aria-expanded on list <li>. But customer requires the link <a> in the 1st level menu with submenu has the aria-expanded attribute. The same way as https://www.w3.org/WAI/ARIA/apg/patterns/menubar/examples/menubar-navigation/#ex_label.

I am attaching a screenshot to make it easier to understand:
https://drive.google.com/file/d/1ZYPE8DVp0fB9bGK3GOXs5DtlPsG-t0eU/view?usp=sharing
In this screenshot you can see there is no aria-expanded on link.

Is there a way to do this?

Thank you for your advise.
Michaela

[David]

Ok, so lets see if we can get the attribute added first.
Try adding this PHP Snippet to your site:

function add_aria_expanded_attribute( $atts, $item, $args, $depth ) {
    // Check if the current menu item has children
    if ( in_array( 'menu-item-has-children', $item->classes ) ) {
        // Add the aria-expanded=false attr
        $atts['aria-expanded'] = 'false';
    }
    return $atts;
}
add_filter( 'nav_menu_link_attributes', 'add_aria_expanded_attribute', 10, 4 );

If that adds the attribute we can look at how to toggle its state

[Michaela]

Hello David,

your code works. I have atribut aria-expanded at link <a>.

Please let me know what to do next.

Michaela

[David]

Now you need some Javascript, to observe the parent items and if there is a class change we toggle the aria-expanded attribute between false and true.

Try adding this script to your site:

<script>
// Find all menu-item-has-children elements
const menuItems = document.querySelectorAll('.menu-item-has-children');

// Create a new MutationObserver instance
const observer = new MutationObserver(mutations => {
  // Loop over the mutations
  mutations.forEach(mutation => {
    // Check if the mutation is a class change
    if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
      // Get the target element
      const target = mutation.target;
      // Check if it has the sfHover class
      const hasHoverClass = target.classList.contains('sfHover');
      // Get the child <a> element
      const link = target.querySelector('a');
      // Set its aria-expanded attribute accordingly
      link.setAttribute('aria-expanded', hasHoverClass ? 'true' : 'false');
    }
  });
});

// Observe each menu item for class changes
menuItems.forEach(item => observer.observe(item, { attributes: true }));
</script>

[Michaela]

It’s amazing. It works perfectly.

David, thanks a lot.

Michaela

[David]

Glad to be of help!

[Author]

Posts