How to Solve Sub-Menu Accessibility Issues in Astra Theme

Hello,

I am using the free Astra theme and have a question about the menu and sub-menu. When I hover over the parent menu item with my mouse, the sub-menu is automatically expanded and displayed. In the theme customizer, I saw that you can set and configure the animation for the sub-menu. Unfortunately, this doesn’t work for me. The reason for my request is that the theme failed our accessibility check due to the hovering of the sub-menu, and I am looking for ways to solve the problem with the hovering of the sub-menu. The HTML structure of the menu looks good:

<li id="menu-item-2982" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor current-menu-parent menu-item-has-children menu-item-2982" aria-haspopup="true"><a href="https://#" class="menu-link">Schwerpunktthemen</a><button class="ast-menu-toggle" aria-expanded="false"><span class="screen-reader-text">Menü umschalten</span><span class="ast-icon icon-arrow"></span></button>
<ul class="sub-menu">
	<li id="menu-item-2538" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2531 current_page_item menu-item-2538"><a href="placeholder" aria-current="page" class="menu-link">Bildung, ?konomie und ?konomisierung</a></li>
	<li id="menu-item-2543" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2543"><a href="placehodler" class="menu-link">Bildungsreformen</a></li>
	<li id="menu-item-2544" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2544"><a href="placeholder" class="menu-link">Akteure – Handlungsfelder – Diskurse</a></li>
	<li id="menu-item-3080" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3080"><a href="placeholder" class="menu-link">Privatisierung und Vermarktlichung</a></li>
	<li id="menu-item-2603" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2603"><a href="https:placeholder" class="menu-link">Theorien, Kritiken, Narrationen</a></li>
</ul>
</li>

However, the existing attributes do not work. When I hover over the parent element or click on the button, the aria-expanded attribute is not set to true. This completely overwhelms the screen reader, and my blind colleague cannot navigate the website. I hope you have a tip on how to solve the problem.

PS: Since the website is in development, I cannot provide you with a link to the website. The website is behind a VPN barrier.

The desired and accessbility behavior of the navigation menu would be as follows. Using the Tab key, you navigate along the main menu (parent). When the Tab key is on the button element, press the Enter key. This will open the sub-menu. Use the arrow keys (up and down) to navigate within the sub-menu. If you press the Tab key again, you will either continue navigating in the main menu (parent) or switch to the sub-submenu (level 3) if one is available.

• This topic was modified 2 years ago by f3rdal.