Accessibility Enhancements Needed

Hi Max Mega Menu team!

First of all, I want to say thank you for the work you have done so far towards improving accessibility in your plugin. It’s the best option I have found for creating accessible mega menus.

I would like to use it on our website and I am hoping that you can please release an update with these accessibility fixes to make that possible. If you want to see the issues on a staging site, I’m happy to share the htaccess info for viewing the front end of our staging site. DM me on Make WordPress Slack for that information.

Here are fixes that are needed:

1. Add aria-controls attributes to links with a role of button referencing the ID of the submenu that they control. See MDN aria-controls documentation. These links:
   <a class="mega-menu-link" tabindex="0" aria-expanded="false" role="button">Products<span class="mega-indicator" aria-hidden="true"></a>
   It will require adding an ID to <ul class="mega-sub-menu" role="presentation">
2. Add aria-haspopup="true" to those same links. See MDN aria-haspopup documentation.
3. When expanding a submenu on desktop, the arrow stays pointing down instead of up (screenshot). This is not the case on mobile, where the arrow toggles between up and down correctly.
4. Add a tab focus lock on submenus when clicked open, or ensure that if a user tabs out of a submenu, the menu automatically closes. Currently when a submenu is opened, a keyboard user is able to tab out and beyond it, and it stays open. Additionally, the parent item has focus styles when expanded, which may cause confusion. See a screenshot showing the menu still open after focus has moved beyond it. Users should either not be able to tab beyond the submenu without closing it, or if they do, the menu should close on its own.
5. The mobile menu button also needs aria-controls and aria-haspopup="true". This button:
   <button aria-label="Menu" class="mega-toggle-animated mega-toggle-animated-slider" type="button" aria-expanded="false">
6. When the mobile menu is opened, focus is not moved into the menu. This stops users from being able to use “read” functions in their screen reader. Focus should either be moved to the first item in the menu or the container itself.
7. When the “Off Canvas” mobile menus are used, there should be a container around the menu list and the button so they are in the same container. Currently, screen readers can leave this menu without closing it and will read items that are hidden behind it on the page. This can cause confusion. The container should be a <dialog> or have a dialog role and also have aria-modal="true". See MDN aria-modal documentation and dialog documentation.
8. Users should not be able to tab out of Off Canvas mobile menus. The expectation is that there will be a tab focus lock when the menu is open, and users will be able to tab through the items in the mobile menu in a circular fashion.
9. Closing the mobile menu with the close button does not return keyboard focus to the button for opening the menu. Focus stays on the (now hidden) close button and the screen reader does not announce anything to confirm the menu has closed. See screenshot of the menu closed but focus still on the hidden button.
10. When keyboard focus is on the close button for the mobile menu, the escape key cannot be used to close the menu.
11. The list structure is incorrect/confusing if a heading is added within a column. In this example screenshot, the screen reader says “list 6 items” when the user tabs into the first item in the list. This specific menu is set up with a custom HTML block that contains a heading and 5 menu items (editor screenshot). Because Max Mega Menu adds a list item for every component added into a column, this can cause confusion or make users think a list item is missing because when tabbing through interactive elements, they always hear one fewer items than the screen reader says there will be.
    
    I understand that this can be difficult to work around in very complex Mega Menus with lots of non-interactive components, and I understand why this is the way it is. However, for simpler menus like this one, this could be resolved by adding an additional setting to the column settings panel (screenshot). If you were to add a heading field here, then, if filled in, you can add the heading before the column <ul> and you can add aria-labelledby like this:
    <h2 class="mega-submenu-column-header" id="sub-header1">Software Products</h2> <ul class="mega-sub-menu" aria-labelledby="sub-header1"> [...] </ul>
    That would get the heading out of the list so screen readers announce the correct number and provide additional context to the list for people who are tabbing through interactive components. You could potentially extend this further by adding expand/collapse buttons to these headers on mobile, though that is not necessary.

I hope you find this feedback helpful and appreciate you all prioritizing accessibility. I would love to be able to use this plugin and recommend it to others if these blockers can be resolved.

Thanks!

The page I need help with: [log in to see the link]