Problem/Motivation

In #3436130: Ensure keyboard navigation works with the drawer, the Submenu spec says for Escape:

• Closes submenu.

For me in the "desktop" version, when a submenu is opened by hover and a second menubar (aka, "parent") item has focus, Escape does not close the submenu.

WCAG success criteria

  • 2.1.1: Keyboard (Level A)
  • Possibly also a violation of the Dismissible criterion of 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, unless the additional content communicates an input error or does not obscure or replace other content

Steps to reproduce

  1. Enable the Navigation module.
  2. Log in as admin.
  3. Tab to an item in the Navigation menu bar that has a submenu.
  4. With the focus still on the item above, hover the cursor over a second parent menu item so that the submenu of this second item opens.
  5. Press Escape.
Expected

Pressing Escape closes the submenu that is opened by hover.

Actual

Pressing Escape does not close the submenu that is opened by hover.

In the attached video, both the Shortcuts submenu and the Content submenu are opened by hover.

Escape did close the Shortcuts submenu as expected. However, I am pressing Escape while the Content submenu is open, and it's not closing.

Proposed resolution

  • Close the submenu on hover.
  • Update tests to confirm that it works correctly.

Remaining tasks

User interface changes

Introduced terminology

API changes

Data model changes

Release notes snippet

CommentFileSizeAuthor
navigation-escape-not-closing-submenu.mov365.07 KBkentr

Comments

kentr created an issue. See original summary.

kentr’s picture

kentr commented
Issue summary: View changes

Adding proposed resolution.

kentr’s picture

kentr commented
Issue tags: +Accessibility
catch’s picture

catch
he/him
Primary language English
commented
Priority: Normal » Major
kentr’s picture

kentr commented

There's a related issue noted by @rkoller originally (#61): #3436130-61: Ensure keyboard navigation works with the drawer.

One minor detail I've noticed, you are able to bypass the constraint to expand only a single submenu with a combination of arrow and tab key:

- expand the configuration submenu
- move to the people menu item and press space
- tab until you reach user interface
- press the right arrow
- tab until you reach media
- press the right arrow

I think this logic will fix both:

When opening any menu / submenu, close all other other menus / submenus at that same depth.

kentr’s picture

kentr commented
Related issues: +#3541741: [PP-1] Close only lowest-level submenu with Escape key, +#3437375: There should be only one submenu expanded in the drawer at a time

Also related:

The first might be in scope here, as they are both related to the conditions for closing a given menu / submenu.

The second might give clues on how to fix.

kentr’s picture

kentr commented

Also, #5 here might be moot if the complex arrow key functions for the menubar pattern are removed in favor of the disclosure pattern: #3541688-5: Focus does not move to submenu when opened by enter or space key.

kentr’s picture

kentr commented

Just read the disclosure pattern again and was reminded that arrow key support is optional.

Version: 11.x-dev » main

Drupal core is now using the main branch as the primary development branch. New developments and disruptive changes should now be targeted to the main branch.

Read more in the announcement.

mgifford’s picture

mgifford
he/him
Primary language English
commented

In discussion with @mherchel @rkoller & @kat-shaw we decided that this was not a barrier. So not a stable profile blocker, but we should get this fixed.

kentr’s picture

kentr commented

This is still relevant in the collapsed version of the "desktop" sidebar. "Collapsed version" means the version with only icons.

Can't repro on the expanded "desktop" version at the moment because the entire sidebar collapses when ESC is pressed.

I'm not sure if that's the desired behavior, so might be a different bug. Might have been caused by #3572628: Mobile sidebar should close by ESCAPE key.