ToolsPanel: It's difficult to close the ToolsPanel menu

[apeatling]

Prior: #41376

Description

With the changes in #40716 the ToolsPanel menu now stays open when selecting a specific option. A byproduct of this is that the menu now has no clear way to be closed as previously it would close upon selection.

By clicking outside of the menu you may inadvertently select something else on the canvas, causing the sidebar state to be lost.

[apeatling]

When I use this, I naturally expect to be able to click anywhere in the browser window to close the menu. @bdurette made the same observation in the previous thread.

This seems like a no brainer to me as a first iteration. Although we don't have any other examples of this in Gutenberg outside of modals -- I would bet most users would also naturally expect to be able to do this. Trying to do this is the reason this issue has come up.

Going further we could also explore a dedicated close button within the menu in addition to being able to click away. Figma is an example of this:

[fotisps]

Close icon with close text would be a good solution in order to close each popup that could accidentally lose the state by misclicking. It also makes it clear to the user how the primary closing works rather than giving the false impression that closing only comes from clicking outside.

[jameskoster]

I naturally expect to be able to click anywhere in the browser window to close the menu. [...] This seems like a no brainer to me as a first iteration.

I agree, this feels like a good first step.

A dedicated close button already exists – re-clicking the ellipsis will close the menu. Perhaps there's something we can do to make that more obvious?

[mtias]

I'm also not sure I agree with the menu not self-closing when you select an item. Seems to be optimizing for the less common cases. Can we look at reverting that part?

[apeatling]

@talldan I think you changed the menu from self closing for accessibility reasons. Am I remember this correctly? Are there any other options here that would keep the menu self closing when selecting?

[talldan]

@talldan I think you changed the menu from self closing for accessibility reasons. Am I remember this correctly?

That's correct. The reason being that when dropdown menus close like that it results in a loss of focus.

There was also feedback on the PR that keeping the menu open is better. Previously, if a user wanted to select multiple items the only way was to keep reopening the menu.

Are there any other options here that would keep the menu self closing when selecting?

The accessibility feedback has always been that menus should stay open like this unless the act of clicking on an item deliberately transfers focus (e.g. to a newly inserted block). Perhaps focus could transfer to the newly added tool? I don't know for sure if that would be acceptable, it'd be worth getting further accessibility feedback.

A dedicated close button already exists – re-clicking the ellipsis will close the menu. Perhaps there's something we can do to make that more obvious?

The opener icon could change to an 'X'?

[jameskoster]

I think auto-closing is worth trying, assuming that shifting focus to the added tool is acceptable from an a11y perspective.