Fix: Escape key dismisses hover-opened submenus (WCAG 2.1 SC 1.4.13)

[Contributolo]

Problem

The Navigation (Adv) Block already handles Escape for submenus opened via toggle button click (keyCode === 27 in kb-navigation-block.js). However, submenus opened via CSS :hover cannot be dismissed with Escape.

The CSS rule responsible:

.wp-block-kadence-navigation.navigation-desktop-orientation-horizontal
    .menu-item:not(.kb-nav-link-sub-click):hover > .sub-menu {
    opacity: 1;
    visibility: visible;
}

Since :hover is a CSS pseudo-class that cannot be removed via JavaScript, pressing Escape while hovering a submenu has no effect.

This violates:

• WCAG 2.1 SC 1.4.13 (Content on Hover or Focus): "A mechanism is available to dismiss the additional content without moving pointer hover or keyboard focus."
• WCAG 2.1 SC 2.1.1 (Keyboard): All functionality must be operable through a keyboard interface.

Since June 2025, the European Accessibility Act (EAA) makes WCAG 2.1 AA compliance a legal requirement for commercial websites in the EU.

Solution

• Track hovered .menu-item-has-children elements via mouseenter/mouseleave.
• Add a document-level keydown listener for Escape that adds a kb-nav-esc-close class to the deepest hovered menu item.
• A CSS rule .menu-item.kb-nav-esc-close > ul.sub-menu { display: none !important } overrides the :hover visibility. The !important is necessary because CSS :hover cannot be programmatically disabled.
• The class is automatically removed on mouseenter (re-hover) or mouseleave (pointer exits), restoring normal behavior.
• The existing Escape handler for toggle-opened submenus (keyboard focus inside submenu) is unchanged; the new global handler skips if focus is already inside a sub-menu.

Changes

• src/assets/js/kb-navigation-block.js: Added hoveredItems tracking, initHoverEscDismiss(), and handleHoverEscDismiss().
• src/blocks/navigation/style.scss: Added .kb-nav-esc-close override rule.

Testing

1. Open a page with Navigation (Adv) Block containing submenus.
2. Hover test: Hover a menu item with children -- submenu appears. Press Escape -- submenu closes. Move pointer away and back -- submenu reopens normally.
3. Keyboard test: Tab into a submenu, press Escape -- submenu closes, focus returns to toggle button (existing behavior, unchanged).
4. Nested hover: Hover a top-level item, then hover a nested child with its own submenu. Press Escape -- only the deepest submenu closes.
5. Vertical navigation: Verify vertical orientation is unaffected (hover submenus are not used in vertical mode).

[gilbert-hernandez]

Could you please fix the indentation. there is an extra tab.

[Contributolo]

Thanks for the review! All three points addressed:

1. Fixed the extra tab on const hoveredItems.
2. Added the vertical orientation guard at the top of initHoverEscDismiss.
3. Scoped the kb-nav-esc-close rule to .navigation-desktop-orientation-horizontal, matching the existing hover rule scope.

[gilbert-hernandez]

The new CSS is global but should be limited to the horizontal orientation as hover based submenus only exist on horizontal navigations. It should look more like:

.navigation-desktop-orientation-horizontal .menu-item.kb-nav-esc-close > ul.sub-menu {
      display: none !important;                                                         
 }

[Contributolo]

Thanks for the review! All three points addressed:

1. Fixed the extra tab on const hoveredItems.
2. Added the vertical orientation guard at the top of initHoverEscDismiss.
3. Scoped the kb-nav-esc-close rule to .navigation-desktop-orientation-horizontal, matching the existing hover rule scope.

[gilbert-hernandez]

Could you also add a guard here to make sure you don't add the listeners to the vertical orientation.

// Hover submenus only exist on horizontal orientation.                           
if (nav.classList.contains('is-vertical')) {
      return;                                                                       
} 

[Contributolo]

Thanks for the review! All three points addressed:

1. Fixed the extra tab on const hoveredItems.
2. Added the vertical orientation guard at the top of initHoverEscDismiss.
3. Scoped the kb-nav-esc-close rule to .navigation-desktop-orientation-horizontal, matching the existing hover rule scope.