The main inserter has a visually hidden 'Close' button that shows only its tooltip on focus

[afercia]

Description

Noticed while debugging #45973

When tabbing through the elements within the main block Inserter, at some point focus goes to a visually hidden 'Close block inserter' button. The button is visually hidden but it still shows its tooltip on focus:

Ideally, for better accessibility, interactive controls should be visible. I do understand why this button is visually hidden but this design pattern is also inconsistent with other panels rendered within the secondary sidebar. For example, the Document overview panel (formerly 'List view') does have a visible close button:

Ideally, this button should be visible.
Alternatively, it should not show a tooltip that visually looks 'detached' from the UI.

Step-by-step reproduction instructions

• Edit a post.
• Make sure the editor is in 'Select' mode. This is necessary until Inserter Constrained tabbing doesn't work in Edit mode #45973 gets solved.
• Open the block inserter and tab through its focusable elements by using the Tab key.
• Observe that at some point a 'Close block inserter' tooltip appears.
• Can be reproduced in the site editor and widgets editor as well.

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

[javierarce]

I can imagine that the lack of a close button is related to the original behaviour of this sidebar.

If we added a close button, I guess we should also remove the option to autoclose the sidebar by clicking outside (to make it consistent with the other columns).

I'm more inclined to keep the current behaviour and remove the element that is triggering the tooltip.

[afercia]

Note: this button becomes visible on small screens:

[javierarce]

Oh, I hadn't noticed that, but that makes total sense. Otherwise it wouldn't be possible to close the sidebar on mobile.

Then, if we decide to go with the idea of not showing the close button, we'll need to hide it with CSS instead of removing it.

[afercia]

Closing as #61421 made the Close button always visible.