Missing atribut aria-expanded at Primary menu

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 ?

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

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.

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

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

Hello David,

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

Please let me know what to do next.

Michaela

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>

It's amazing. It works perfectly.

David, thanks a lot.

Michaela

Glad to be of help!