Problem
In main/menu.js, the closeAllSubmenus() method closes submenus by setting submenu.hidden = true and item.setAttribute('aria-expanded', 'false'). However, style.css still has CSS rules that force submenus open via .menu-item:hover and .menu-item:focus-within. After focus returns to the parent item, the submenu can remain visible even though the JS state says it is closed.
Suggested Fix
One or more of the following approaches should be applied:
- Add a CSS rule to ensure
[hidden] always wins:
.submenu[hidden] {
display: none !important;
} - In
closeAllSubmenus() (and any other single-submenu close paths), call item.blur() or move focus to a neutral element (e.g. document.body) so :focus-within does not re-open the submenu. - Clear
currentOpenSubmenu in all relevant close paths.
Affected Files
main/menu.js — closeAllSubmenus() method (around lines 112–120)style.css — .menu-item:hover .submenu / .menu-item:focus-within .submenu rules
References
Raised by @lawsie.
Problem
In
main/menu.js, thecloseAllSubmenus()method closes submenus by settingsubmenu.hidden = trueanditem.setAttribute('aria-expanded', 'false'). However,style.cssstill has CSS rules that force submenus open via.menu-item:hoverand.menu-item:focus-within. After focus returns to the parent item, the submenu can remain visible even though the JS state says it is closed.Suggested Fix
One or more of the following approaches should be applied:
[hidden]always wins:closeAllSubmenus()(and any other single-submenu close paths), callitem.blur()or move focus to a neutral element (e.g.document.body) so:focus-withindoes not re-open the submenu.currentOpenSubmenuin all relevant close paths.Affected Files
main/menu.js—closeAllSubmenus()method (around lines 112–120)style.css—.menu-item:hover .submenu/.menu-item:focus-within .submenurulesReferences
Raised by @lawsie.