Inserter: Tab-focus diverges from other tab-bars

[jasmussen]

Description

If you load the site editor or post editor fresh, then open the inserter, the focus-visible ring is shown on the "Blocks" tab. This is different from similar panels, like the list view, block inspector, document inspector, where this focus-ring is only visible if you used keyboard interactions to open the panel. Shown in this GIF:

The behavior across tab-bars should be consistent. Specifically, the focus-visible property added to the tab-bar should continue to behave as intended, with the ring visible when using the keyboard, and not when clicking.

Step-by-step reproduction instructions

1. Load one of the editors fresh
2. Click to open the inserter and notice the focus-ring
3. Compare to other panels, like the block inspector.

Screenshots, screen recording, code snippet

No response

Environment info

Nightly WordPress, trunk Gutenberg.

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

[scruffian]

The reason for having the focus indicator is to show a user where the focus is once the panel opens. In the other panels the focus remains on the button that opened the panel, rather than moving into the panel. If we are going to move the focus then we need a way to show the user where focus has moved to. The only exception to this might be if we could determine that a user has opened the panel using a mouse rather than the keyboard - in that case we could consider moving focus and showing the focus ring, only if the user has opened the panel using the keyboard.

An additional challenge is that it's difficult to tell the browser to focus and element but not focus-visible it. Firefox supports a focusVisible option for focus, but none of the other browsers have implemented it yet.

[jasmussen]

This was fixed!