Accessibility issues in the JS-generated ESDC site wrapper

[Jefferydo]

I’ve noticed a bunch of accessibility issues in the JS-generated ESDC site wrapper. Most of these issues are in the header element, which follows the skip links.

1. Multiple nav elements without labels:

   • Main menu (mobile)
   • Main menu (desktop)
   • Breadcrumbs
   • Footer

2. The main menu ul has role=”menubar” but the pattern is incomplete/incorrect:

   • The child li elements are missing role=”none”.
   • The menuitem role is missing aria-expanded. Instead, it's set on the toggled child ul element holding the menu (with role="menu"):
     - <ul role="menu" id="s1" class="sm list-unstyled open" aria-expanded="true" aria-hidden="false">
     • The aria-expanded attribute is supposed to go on the control, not the toggled target.

3. The visually-hidden h2 heading "Name of Web application" seems suspicious.
   

4. The mobile menu has issues:

   • Multiple nav elements are used to build a single nav region with nav elements nested inside nav elements
   • Redundant ARIA roles (e.g., nav with role=”navigation”)
   • One too many "Menu" headings. The mobile nav element opens with two visually-hidden h2 "Menu" headings.
   • Mobile menu’s close button tab order is wrong; button needs to be moved to the top of the menu to match reading order
   • Different names for the two Close buttons: "Close overlay" and "Close: Menu (Escape key). " They should be identical.
   • The first close button repeats "close" in the visually hidden text but it's already the visible name (resulting in the name "Close close overlay").
   • The mobile Main navigation menu nests details/summary elements, and applies the role="menuitem" to the summary element. According to ARIA in HTML, the summary element can't take a role. The button element can take role="menuitem".