[menu-bar][tooltip] Vaadin-menu-bar-button doesn't show a tooltip with keyboard focus

[juuso-vaadin]

Description

Focusing the vaadin-menu-bar-button with keyboard doesn't reveal a tooltip. If tooltip has been added to vaadin-menu-bar, that is displayed when focus is within component. Buttons don't show tooltip even when menubar doesn't have a tooltip.

https://github.com/vaadin/flow-components/assets/19607782/634017cf-ac63-43d3-83ff-da045a04191b

Expected outcome

Keyboard focus should work the same as hovering on mouse.

Minimal reproducible example

MenuBar menuBar = new MenuBar();

MenuItem item1 = menuBar.addItem("Item 1");
MenuItem item2 = menuBar.addItem("Item 2");

Tooltip tooltip = Tooltip.forComponent(menuBar).withText("MenuBar");
Tooltip tooltip1 = Tooltip.forComponent(item1).withText("Item 1");
Tooltip tooltip2 = Tooltip.forComponent(item2).withText("Item 2");

Steps to reproduce

Focus menubar items with keyboard

Environment

Vaadin version(s): 23.3.24 OS: macOS

Browsers

Chrome

[web-padawan]

Thanks for the issue. Please note that MenuBar has built-in Tooltips support for individual buttons. I guess the issue is that internal logic intercepts focus events, making it impossible to set an individual tooltip on the whole MenuBar component.

[juuso-vaadin]

Adding tooltips to MenuItem with built-in method solves the issue with keyboard focus 👍

An edge case still remains. If tooltip is also added to MenuBar, both tooltips will be displayed at the same time.

[juuso-vaadin]

For better DX the MenuItem should probably implement setTooltipText().

[web-padawan]

An edge case still remains. If tooltip is also added to MenuBar, both tooltips will be displayed at the same time.

This is expected as the tooltip managed by MenuBar is using manual mode and does not respect other tooltips.

[timbo86]

Thanks for the issue. Please note that MenuBar has built-in Tooltips support for individual buttons. I guess the issue is that internal logic intercepts focus events, making it impossible to set an individual tooltip on the whole MenuBar component.

As far as I can see, this is working only for root items. Submenu items do not show build in tooltips, even if setTooltipText is called on them.