HeadingLevelDropdown: tooltip for a menu item obscures the next item

[jsnajdr]

Steps to reproduce:

1. Create a H2-level Heading block.
2. Open the heading level dropdown in the block toolbar, with the intent to switch the heading to H3.
3. As you move the mouse cursor towards the H3 option, it moves over the H2 option, triggering its "Heading 2" tooltip to display.
4. As you move the mouse cursor further, onto the H3 option, you cannot click the H3 option because it is obscured by H2's tooltip. And because the mouse cursor is inside the tooltip, the tooltip is permanently displayed and doesn't disappear.

A very minor bug, but I found the behavior very unpleasant when I encountered it.

[talldan]

It could be another case of #55815. (cc @afercia)

[afercia]

@talldan thanks for the ping.
I wouldn't say this is another case of #55815
These buttons accessible name is different from the visible text (which actually is an SVG icon). For example:

aria-label="Heading 2"

As such, the accessible name needs to be exposed visually as we do for all icon buttons.

Rather, in this case the problem is in the tooltip positioning.

• The dropdown with the heading levels used to be horizontal.
• It was changed to vertical.
• The tooltip position was not adjusted for the new vertical dropdown orientation.

I can think of two options:

1. Adjust the tooltip positioning: I'm not sure there are settings for that.
2. Just use full text instead of abbreviations like H1, H2, etc.

In my opinion, the second option would also bring in better user experience. Now that the dropdown is vertical, there is no need to save horizontal space by using shorter visible text H1, H2, etc.
I'd suggest to consider to use full text 'Heading 1', 'Heading 2', etc. so that:

• we can remove the SVG icon
• we can remove the tooltip
• we can remove the aria-label
• the target size is bigger
• cognitive load is reduced

Screenshot after quickly editing HeadingLevelDropdown. It would need some CSS adjustments to highlight the selected level:

[t-hamano]

This issue has also been discussed in #50402.

Another option I would suggest is to display both the icon and the text, as mentioned in this comment. It may be a little redundant, but I think we can visually understand which level is selected without having to adjust CSS.

[afercia]

Hi @t-hamano, good point. I'd be in favor of using both the icon and visible text. Having both icon and visible text is not uncommon in many big applications around, and that pattern is used for good reasons. See also prior discussion on #46003

I'd be in favor of closing this issue in favor of #50402 and continue the conversation there, as this issue is basically a duplicate. Please do feel free to reopen if I'm missing something.