Skip to content

Navigation Block: pressing escape key causes focus loss #69834

Closed
#69837
Closed
Navigation Block: pressing escape key causes focus loss#69834
#69837
Assignees
stokesman
Labels
[Block] NavigationAffects the Navigation Block[Focus] Accessibility (a11y)Changes that impact accessibility and need corresponding review (e.g. markup changes).[Status] In ProgressTracking issues with work in progress[Type] BugAn existing feature does not function as intended

Description

@t-hamano
t-hamano
opened on Apr 5, 2025

Description

Focus is often lost when pressing Escape in a Navigation block.

I don't know what behavior was originally expected in the Navigation block, but according to the W3G Navigation Menubar Example, it should close the current submenu and move focus to the parent menu item.

4f0e9050d4d8bf30c6f07f3b33c128ee.mp4

Step-by-step reproduction instructions

Use the following HTML to create a Navigation with nested submenus:

HTML example 
<!-- wp:navigation-submenu {"label":"Top Level Menu Item","url":"#","kind":"custom"} -->
<!-- wp:navigation-submenu {"label":"1. Submenu Item","url":"#","kind":"custom"} -->
<!-- wp:navigation-submenu {"label":"1.1. Nested Submenu Item","url":"#","kind":"custom"} -->
<!-- wp:navigation-link {"label":"1.1.1 Further nested submenu item","url":"#","kind":"custom"} /-->

<!-- wp:navigation-link {"label":"1.1.2 Further nested submenu item","url":"#","kind":"custom"} /-->
<!-- /wp:navigation-submenu -->

<!-- wp:navigation-submenu {"label":"1.2. Nested Submenu Item","url":"#","kind":"custom"} -->
<!-- wp:navigation-link {"label":"1.2.1 Further nested submenu item","url":"#","kind":"custom"} /-->

<!-- wp:navigation-link {"label":"1.2.2 Further nested submenu item","url":"#","kind":"custom"} /-->
<!-- /wp:navigation-submenu -->

<!-- wp:navigation-submenu {"label":"1.3. Nested Submenu Item","url":"#","kind":"custom"} -->
<!-- wp:navigation-link {"label":"1.3.1 Further nested submenu item","url":"#","kind":"custom"} /-->

<!-- wp:navigation-link {"label":"1.3.2 Further nested submenu item","url":"#","kind":"custom"} /-->
<!-- /wp:navigation-submenu -->
<!-- /wp:navigation-submenu -->

<!-- wp:navigation-submenu {"label":"2. Submenu Item","url":"#","kind":"custom"} -->
<!-- wp:navigation-submenu {"label":"2.1. Nested Submenu Item","url":"#","kind":"custom"} -->
<!-- wp:navigation-link {"label":"2.1.1 Further nested submenu item","url":"#","kind":"custom"} /-->

<!-- wp:navigation-link {"label":"2.1.2 Further nested submenu item","url":"#","kind":"custom"} /-->
<!-- /wp:navigation-submenu -->

<!-- wp:navigation-submenu {"label":"2.2. Nested Submenu Item","url":"#","kind":"custom"} -->
<!-- wp:navigation-link {"label":"2.2.1 Further nested submenu item","url":"#","kind":"custom"} /-->

<!-- wp:navigation-link {"label":"2.2.2 Further nested submenu item","url":"#","kind":"custom"} /-->
<!-- /wp:navigation-submenu -->

<!-- wp:navigation-submenu {"label":"2.3. Nested Submenu Item","url":"#","kind":"custom"} -->
<!-- wp:navigation-link {"label":"2.3.1 Further nested submenu item","url":"#","kind":"custom"} /-->

<!-- wp:navigation-link {"label":"2.3.2 Further nested submenu item","url":"#","kind":"custom"} /-->
<!-- /wp:navigation-submenu -->
<!-- /wp:navigation-submenu -->
<!-- /wp:navigation-submenu -->

<!-- wp:navigation-submenu {"label":"Top Level Menu Item","url":"#","kind":"custom"} -->
<!-- wp:navigation-submenu {"label":"1. Submenu Item","url":"#","kind":"custom"} -->
<!-- wp:navigation-submenu {"label":"1.1. Nested Submenu Item","url":"#","kind":"custom"} -->
<!-- wp:navigation-link {"label":"1.1.1 Further nested submenu item","url":"#","kind":"custom"} /-->

<!-- wp:navigation-link {"label":"1.1.2 Further nested submenu item","url":"#","kind":"custom"} /-->
<!-- /wp:navigation-submenu -->

<!-- wp:navigation-submenu {"label":"1.2. Nested Submenu Item","url":"#","kind":"custom"} -->
<!-- wp:navigation-link {"label":"1.2.1 Further nested submenu item","url":"#","kind":"custom"} /-->

<!-- wp:navigation-link {"label":"1.2.2 Further nested submenu item","url":"#","kind":"custom"} /-->
<!-- /wp:navigation-submenu -->

<!-- wp:navigation-submenu {"label":"1.3. Nested Submenu Item","url":"#","kind":"custom"} -->
<!-- wp:navigation-link {"label":"1.3.1 Further nested submenu item","url":"#","kind":"custom"} /-->

<!-- wp:navigation-link {"label":"1.3.2 Further nested submenu item","url":"#","kind":"custom"} /-->
<!-- /wp:navigation-submenu -->
<!-- /wp:navigation-submenu -->

<!-- wp:navigation-submenu {"label":"2. Submenu Item","url":"#","kind":"custom"} -->
<!-- wp:navigation-submenu {"label":"2.1. Nested Submenu Item","url":"#","kind":"custom"} -->
<!-- wp:navigation-link {"label":"2.1.1 Further nested submenu item","url":"#","kind":"custom"} /-->

<!-- wp:navigation-link {"label":"2.1.2 Further nested submenu item","url":"#","kind":"custom"} /-->
<!-- /wp:navigation-submenu -->

<!-- wp:navigation-submenu {"label":"2.2. Nested Submenu Item","url":"#","kind":"custom"} -->
<!-- wp:navigation-link {"label":"2.2.1 Further nested submenu item","url":"#","kind":"custom"} /-->

<!-- wp:navigation-link {"label":"2.2.2 Further nested submenu item","url":"#","kind":"custom"} /-->
<!-- /wp:navigation-submenu -->

<!-- wp:navigation-submenu {"label":"2.3. Nested Submenu Item","url":"#","kind":"custom"} -->
<!-- wp:navigation-link {"label":"2.3.1 Further nested submenu item","url":"#","kind":"custom"} /-->

<!-- wp:navigation-link {"label":"2.3.2 Further nested submenu item","url":"#","kind":"custom"} /-->
<!-- /wp:navigation-submenu -->
<!-- /wp:navigation-submenu -->
<!-- /wp:navigation-submenu -->

<!-- wp:navigation-submenu {"label":"Top Level Menu Item","url":"#","kind":"custom"} -->
<!-- wp:navigation-submenu {"label":"1. Submenu Item","url":"#","kind":"custom"} -->
<!-- wp:navigation-submenu {"label":"1.1. Nested Submenu Item","url":"#","kind":"custom"} -->
<!-- wp:navigation-link {"label":"1.1.1 Further nested submenu item","url":"#","kind":"custom"} /-->

<!-- wp:navigation-link {"label":"1.1.2 Further nested submenu item","url":"#","kind":"custom"} /-->
<!-- /wp:navigation-submenu -->

<!-- wp:navigation-submenu {"label":"1.2. Nested Submenu Item","url":"#","kind":"custom"} -->
<!-- wp:navigation-link {"label":"1.2.1 Further nested submenu item","url":"#","kind":"custom"} /-->

<!-- wp:navigation-link {"label":"1.2.2 Further nested submenu item","url":"#","kind":"custom"} /-->
<!-- /wp:navigation-submenu -->

<!-- wp:navigation-submenu {"label":"1.3. Nested Submenu Item","url":"#","kind":"custom"} -->
<!-- wp:navigation-link {"label":"1.3.1 Further nested submenu item","url":"#","kind":"custom"} /-->

<!-- wp:navigation-link {"label":"1.3.2 Further nested submenu item","url":"#","kind":"custom"} /-->
<!-- /wp:navigation-submenu -->
<!-- /wp:navigation-submenu -->

<!-- wp:navigation-submenu {"label":"2. Submenu Item","url":"#","kind":"custom"} -->
<!-- wp:navigation-submenu {"label":"2.1. Nested Submenu Item","url":"#","kind":"custom"} -->
<!-- wp:navigation-link {"label":"2.1.1 Further nested submenu item","url":"#","kind":"custom"} /-->

<!-- wp:navigation-link {"label":"2.1.2 Further nested submenu item","url":"#","kind":"custom"} /-->
<!-- /wp:navigation-submenu -->

<!-- wp:navigation-submenu {"label":"2.2. Nested Submenu Item","url":"#","kind":"custom"} -->
<!-- wp:navigation-link {"label":"2.2.1 Further nested submenu item","url":"#","kind":"custom"} /-->

<!-- wp:navigation-link {"label":"2.2.2 Further nested submenu item","url":"#","kind":"custom"} /-->
<!-- /wp:navigation-submenu -->

<!-- wp:navigation-submenu {"label":"2.3. Nested Submenu Item","url":"#","kind":"custom"} -->
<!-- wp:navigation-link {"label":"2.3.1 Further nested submenu item","url":"#","kind":"custom"} /-->

<!-- wp:navigation-link {"label":"2.3.2 Further nested submenu item","url":"#","kind":"custom"} /-->
<!-- /wp:navigation-submenu -->
<!-- /wp:navigation-submenu -->
<!-- /wp:navigation-submenu -->
  • Launch your screen reader.
  • Access submenus using keyboard only.
  • Press the Escape key.
  • Confirm that the focus is lost.

Screenshots, screen recording, code snippet

9c753a4b6bdb8504052e616fc78bdbf2.mp4

Environment info

No response

Please confirm that you have searched existing issues in the repo.

  • Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

  • Yes

Please confirm which theme type you used for testing.

  • Block
  • Classic
  • Hybrid (e.g. classic with theme.json)
  • Not sure

Metadata

Metadata

Assignees

Labels

[Block] NavigationAffects the Navigation Block[Focus] Accessibility (a11y)Changes that impact accessibility and need corresponding review (e.g. markup changes).[Status] In ProgressTracking issues with work in progress[Type] BugAn existing feature does not function as intended

Type

No type

Fields

No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions