Skip to content

Focus loss when deleting a menu from the Navigation block Inspector #59790

@afercia

Description

@afercia

Description

When deleting a Navigation block menu from the the block inspector, the 'Delete menu' button gets removed from the DOM.

As such, when using a keyboard, the element that had focus is no longer in the DOM and a focus loss is triggered.

Once again, it is important to point out a very fundamental principle for keyboard accessibility:

Important

Never, ever, disable, remove or hide an focusable control while it has focus.

I've been observing this fundamental principle gets missed often in the editor and I'd appreciate more focus on this.

Also, keyboard testing during development and before merging any new UI would be greatly aprecciated.

Step-by-step reproduction instructions

  • Go to the Site editor and select a Navigation block that does have a menu.
  • In the block inspector, go to the Settings tab > scroll down to Advanced, open it and focus the 'Delete menu' button with the keyboard.
  • Press Enter.
  • Wait for the menu to be deleted.
  • Observe the 'Delete menu' button is removed from the DOM, together with other parts of the UI that was shown in the inspector.
  • Press the Tab key.
  • Observe that, depending on the browser in use, the tab sequence either restarts from the document root of from the top of the inspector panel.

Screenshots, screen recording, code snippet

No response

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

Metadata

Metadata

Assignees

No one assigned

    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

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions