Focus loss when closing the block toolbar with the Escape key

[afercia]

Description

When closing the block toolbar with the Escape key, focus is lost.

Expected: to return focus back to the selected block, regardless of whether it's in 'Edit' or 'Select' mode.

This is a regression as the previous behavior was returning focus to the selected block.

See also #41508 and #41509

Step-by-step reproduction instructions

• Click on an existing paragraph block (or add a new one).
• Use the keyboard Shift + Tab keys to move focus to the block toolbar.
• Optionally use the keyboard arrow keys to move through the toolbar buttons.
• Press the Escape key.
• Observe there's no focused element on the page. Focus is lost.

At this point, pressing for example Shift + Tab moves focus to the 'Options' button within the editor top bar. Pressint Tab moves focus to the post title. This is one more signal that focus was lost. The tab sequence starts from the most logical place just because modern browsers have a feature called 'sequential focus navigation starting point' but focus was actually lost.

Screenshots, screen recording, code snippet

In the animated GIF below I'm using a strong red focus outline to make things clearer.

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

[afercia]

Quickly testing previous WordPress versions, here's what pressing the Escape key does:

• WordPress 5.2: works as expected (and the toolbar stays open)
• WordPress 5.3: the toolbar closes, the editor switches to 'select mode', block is selected
• WordPress 5.4: the toolbar closes, the editor switches to 'select mode', block is selected
• WordPress 5.5: the toolbar closes, the editor switches to 'select mode', block is selected
• WordPress 5.6: the toolbar closes, focus is lost
• WordPress 5.7 - 6.0: doesn't do anything, focus stays on the toolbar
• WordPress 6.1: the toolbar closes, focus is lost

Expected:

• the block should stay in 'edit mode'
• the block toolbar should close
• focus should return to the selected block

[afercia]

Looking a bit into this, I'm not sure I'm able to fully follow the current implementation. Seems to me the desired behaviior is just not implemented. To recap, the expected interaction is:

• When the block toolbar is focused, pressing Escape should move focus back to the block.
• Otherwise, other behaviors should happen, see Writing flow: Esc should enter Nav mode consistently, avoid focus loss when clearing selection #42530
  • The editor should switch to Nav ('Select') mode.
  • The selected block should be cleared.
  • Any selection range should be cleared.
  • As a fallback, focus should be moved to the editor canvas.

Most of the code responsible for this is here.

However, I'm not sure it works as expected, now that the editor is iframed. Cc @Mamaduka @ellatrix

[jeryj]

Seems to me the desired behavior is just not implemented.

I've been looking into this as part of rendering the top toolbar in the DOM. I also did not see anything trying to implement an escape keypress to return to the editor canvas either. The unselect shortcut uses the escape keypress to deselect selected blocks, and returns focus to the editor canvas wrapper.

If we can get the concepts from #53779 merged (I'm working on a cleaner follow-up now), then it will include escape from navigation toolbars to return focus to the previous caret position or block selection within the editor.

[jeryj]

Fixed by #55712

[afercia]

Thank you for all your work on this issue @jeryj ❤️