Tooltips have a couple of accessibility issues about shoelace HOT 3 CLOSED

I've opened a PR both of these issues: #1749

The solution to the hover issue is probably best described with a GIF. Since we abstract positioning with <sl-popup>, I've added <sl-popup hover-bridge> so other components can benefit from this in the future.

The GIF shows the "safe trapezoids" in orange, but they're invisible normally. Hovering over it will persist the tooltip unless the user presses Esc.

from shoelace.

I fixed the Esc issue in 7364fa1. Regarding the other issue:

It should be possible to move the mouse pointer over the tooltip content without the tooltip disappearing. At the moment, the Tooltip closes as soon as the pointer is moved away from the triggering element.

I see from this document that they call out native title tooltips.

Examples of additional content controlled by the user agent include browser tooltips created through use of the HTML title attribute [[HTML]].

Interestingly, neither Chrome, Firefox, nor Safari follow this.

https://codepen.io/claviska/pen/QWYVmzW

Nevertheless, I'll see if I can come up with a solution to account for this requirement.

from shoelace.

Esc key might need a global KeyboardEvent handler.

Not sure if ...

• ... Shoelace is already using any global handlers
• ... Shoelace is supposed to listen globally for Esc
• ... I have seen any other library with Esc support

Perhaps this could be handled in the docs with a simple example.

If <sl-tooltip> dispatches bubbling sl-show/sl-after-show events,

• users can be told to listen for them
  • confirm event.target, add an AbortSignal-cancelable KeyboardEvent listener (global or scoped)
  • remove the listener by aborting the above signal on one of the following cases:
    • sl-hide from the <sl-tooltip>
    • KeyboardEvent with the Esc key

from shoelace.