tabindex removed from navButton after toggle-menu trigger

[CalEPA-Jansson]

Reproduce the bug:

1. Navigate to https://template.webstandards.ca.gov/
2. Reduce to mobile size (<=991)
3. Tab to the menu button and press Enter
4. Tab to the close menu button and press Enter
5. Attempt to tab to the menu button again

The following lines remove the ability to tab to the navButton after closing the menu (mobile). Additionally, it requires any sites utilizing a custom tab order to reapply the tabindex values after the menu is closed.

getAllBodyLinks().forEach(el => el.setAttribute("tabindex", "-1"));
getAllBodyLinks().forEach(el => el.removeAttribute("tabindex"));

[CalEPA-Jansson]

Locally, we fixed the issue by removing the above lines and adding a "blur" event to the last navigation link that forces the user's focus back to the nav button.

// Open
var navLinks = getAllNavLinks();
navLinks[navLinks.length-1]?.addEventListener('blur', function () {
    navButton.focus();
});

// Close
var navLinks = getAllNavLinks();
navLinks[navLinks.length - 1]?.removeEventListener('blur', null);

We also considered adding an element with a "lastOverlayFocus" class to the template and adding a "blur" listener to it to allow for the ability to focus beyond the nav elements, if needed.

[carterm]

@CalEPA-Jansson, we just released v6.3.1 which updates the way the menu deals with tabIndex and should resolve this issue. Please try again.

[carterm]

...and thank you for reporting this!