vaadin / web-components

A set of high-quality standards based web components for enterprise web applications. Part of Vaadin 20+
https://vaadin.com/docs/latest/components
462 stars 83 forks source link

Tooltip should not close when hovering over it #6316

Closed sissbruecker closed 1 year ago

sissbruecker commented 1 year ago

What is the problem?

According to WCAG Content on Hover and Focus, additional content, such as tooltips, must be hoverable itself:

Hoverable: If pointer hover can trigger the additional content, then the pointer can be moved over the additional content without the additional content disappearing;

The Understanding SC 1.4.13 further clarify when this can be an issue:

The intent of this condition is to ensure that additional content which may appear on hover of a target may also be hovered itself. Content which appears on hover can be difficult or impossible to perceive if a user is required to keep their mouse pointer over the trigger. When the added content is large, magnified views may mean that the user needs to scroll or pan to completely view it, which is impossible unless the user is able to move their pointer off the trigger without the additional content disappearing.

Another common situation is when large pointers have been selected via platform settings or assistive technology. Here, the pointer can obscure a significant area of the additional content. A technique to view the content fully in both situations is to move the mouse pointer directly from the trigger onto the new content. This capability also offers significant advantages for users who utilize screen reader feedback on mouse interactions. This condition generally implies that the additional content overlaps or is positioned adjacent to the target.

Browsers

Screen Readers

web-padawan commented 1 year ago

We considered this, see comments in the tooltip discussion.

Currently does NOT keep opened state when hover over the tooltip overlay

But personally I don't remember why it wasn't implemented.

web-padawan commented 1 year ago

Actually, we already have a logic checking for mouseleave event relatedTarget and a test for it:

https://github.com/vaadin/web-components/blob/21f310dbc43bc8b1135f20fcc359cd5c4d7f99fd/packages/tooltip/src/vaadin-tooltip.js#L700-L703

https://github.com/vaadin/web-components/blob/21f310dbc43bc8b1135f20fcc359cd5c4d7f99fd/packages/tooltip/test/tooltip.test.js#L268-L272

However, this does not work with Lumo styled tooltips, as there is some margin and relatedTarget is body.