accessible-menu
accessible-menu copied to clipboard
Accessibility: Submenu does not close when focus moves outside the menu area
Summary
In APG, when focus moves outside the navigation area while a dropdown is open in the Disclosure Navigation Menu
, the open dropdown closes. However, this functionality does not work in accessible-menu
.
Disclosure Menu v4 Example
Steps to reproduce
What are the steps to reproduce this issue?
- Press the Enter Key to open a submenu
- Press the Tab Key to move focus away from the submenu or outside the navigation area
- The submenu remains open
Expected Behaviour
1st choice: Close the submenu when focus moves from the submenu to the next menu 2nd choice: Close the submenu when focus moves outside the navigation area while the submenu is open
Spec
https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation/
If a dropdown is open and focus is inside the navigation region, pressing Esc will close the dropdown. Moving focus out of the navigation region also closes an open dropdown. Implementing this Esc behavior is necessary to meet the WCAG 2.1 1.4.13: Content on Hover or Focus criterion.