You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
When using the Escape key to close menus, this makes it only close one menu level at a time and focus the parent menu item.
Why?
When using the Escape key to close menus:
Focus should not be lost when pressing Escape
Only the last menu opened should close (not all parents).
How?
To fix the loss of focus, this adds previousFocus to the context (Interactivity API) of submenus. This makes each level have it’s own reference. Without this one previousFocus reference is shared by all levels and when set by a nested menu it overwrites the previous value causing it to be lost.
To ensure only one menu level closes, this adds a stopPropagation call to the keydown handler (when Escape key was pressed).
Testing Instructions
Manually
Use the following HTML to create a Navigation with nested submenus:
Flaky tests detected in 07142c2.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.
stokesman
changed the title
Navigation block: Fix focus loss when pressing Escape from nested menu item
Navigation block: fix submenu Escape key behavior
Apr 6, 2025
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.
If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.
* Add coverage in e2e tests
* Fix focus loss when pressing Escape from nested menu
* Update e2e test for closing one menu level
* Have Escape key close a single menu level at a time
Co-authored-by: stokesman <presstoke@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What?
Closes #69834
When using the Escape key to close menus, this makes it only close one menu level at a time and focus the parent menu item.
Why?
When using the Escape key to close menus:
How?
previousFocus
to the context (Interactivity API) of submenus. This makes each level have it’s own reference. Without this onepreviousFocus
reference is shared by all levels and when set by a nested menu it overwrites the previous value causing it to be lost.stopPropagation
call to thekeydown
handler (when Escape key was pressed).Testing Instructions
Manually
Use the following HTML to create a Navigation with nested submenus:
HTML example
E2E
Screenshots or screencast