Skip to content

Menu submenu does not close on Escape key when hovered

Description:

When a user hovers over a menu item that opens a submenu, pressing the Escape key does not close the submenu. This violates WCAG 2.1 Success Criterion 1.4.13: Content on Hover or Focus, which requires that additional content triggered by hover or focus must be dismissible without requiring pointer movement or loss of keyboard focus whenever it obscures other content.

In this case, the submenu remains open even after pressing Escape, preventing users from dismissing it using the keyboard. This creates an accessibility barrier for users who are unable to move their mouse pointers. For example, if a user with paralysis navigates to a new page using keyboard-only input and the mouse pointer happens to be resting over a menu item, the submenu may automatically expand. Since they cannot move the pointer away and the Escape key does not dismiss the submenu, the expanded content may obscure important page content, leaving the user unable to access or interact with it.

Steps to Reproduce:

  1. Hover over a menu item to open the submenu.
  2. Press the Escape key.
  3. Observe that the submenu remains open.

Expected Behavior:

Pressing Escape should close the submenu, allowing users to dismiss additional content easily.

Why This Violates WCAG 1.4.13:

WCAG 1.4.13 requires that content triggered by hover or focus must be:

  • Dismissible: Users must be able to dismiss the content without moving pointer or keyboard focus.
  • Hoverable: Users must be able to move the pointer over the new content without it disappearing.
  • Persistent: The content must remain visible until the user dismisses it or moves focus away.

In this case, the submenu is not dismissible via keyboard (Escape key), which creates a barrier for keyboard-only users and those using assistive technologies.

Suggested Fix:

Ensure that pressing the Escape key while the submenu is open (regardless of whether it was triggered by hover or focus) closes the submenu. This will improve accessibility and bring the component into compliance with WCAG 1.4.13.