Regression in Shift+Tab during writing mode

[stokesman]

Description

In 6.2.2 pressing Shift+Tab moves focus to the block toolbar. In trunk, it moves to the editor toolbar.

Step-by-step reproduction instructions

1. In the Post Editor insert or focus a block and begin typing
2. Press Shift+Tab
3. Observe that focus moved to the editor toolbar

Screenshots, screen recording, code snippet

Expected behavior in 6.2.2

https://github.com/WordPress/gutenberg/assets/9000376/ce64f88e-9c89-438b-9327-4997a202d7cd

Regression in trunk

https://github.com/WordPress/gutenberg/assets/9000376/ca9130f0-c5f8-4316-99c2-7b44a2302039

Environment info

Chrome on macOS

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

[t-hamano]

I was able to reproduce it too, tested on Windows 11.

https://github.com/WordPress/gutenberg/assets/54422211/e28bd7e4-e07b-44d5-82e7-77d93edc765e

[jeryj]

I can take a look at this. I probably accidentally broke it with https://github.com/WordPress/gutenberg/pull/51548. Thanks for catching this!

[jeryj]

Nevermind - it seems unrelated to my changes. I'll keep debugging it, but I'm not sure what would have caused it at this point.

[t-hamano]

I used git bisect to identify the commit where this problem occurred. The commit hash is a147d47 and the corresponding PR is #51623.

The following commands can be used to temporarily revert this commit to make sure that the problem does not occur.

git checkout trunk
git checkout -b test/toolbar
git revert a147d47

However, it is a bit difficult for me to see why replacing Reakit with Ariakit would have caused this problem 😅

[jeryj]

Nice find! It seems like it's something with the toolbar not being rendered early enough. If the toolbar is present on the page, shift + tab will work to move focus into the toolbar. If the toolbar isn't visible, it will send focus to the first tabstop outside the editor canvas.

https://github.com/WordPress/gutenberg/assets/967608/d1ee998d-d07e-41f6-ac43-c802ae8be931

[draganescu]

This is weird because with top toolbar the toolbar is always there. But if you do this:

• activate top toolbar
• select a block
• Shift tab
• Toolbar is focused
• Use arrow keys to move focus
• Hit ESC
• Select block
• shift tab
• the toolbar is unmounted

it doesn't work after a random ESC key press!

[draganescu]

The alt + F10 shortcut works more predictable and focuses the block toolbar even after it's unmounted.

[jeryj]

I commented on https://github.com/WordPress/gutenberg/pull/52196#issuecomment-1634459455 to discuss this more, but this is a better place for the conversation.

We should figure out:

• Why the upgrade broke the shift+tab behavior (is it caused by a bug with the implementation of ariakit in gutenberg, or a bug within ariakit?)
• If the delayed rendering is caused by ariakit, is it a bug or a feature over reakit? For example, is it somehow far more performant and something we should implement?

The shift + tab behavior in the editor has been debated before. Is this a moment we should use to reconsider the behavior of navigating between toolbars?