[Bug]: sp-button receives focus indicator again in Safari iOS after overlay closes

[lehelen19]

Code of conduct

• I agree to follow this project's code of conduct.

Impacted component(s)

sp-button

Expected behavior

The button should not have the focus indicator or trigger a hover overlay after a click overlay has been closed.
Context: https://cclight.slack.com/archives/CESK60MQD/p1728667671120189?thread_ts=1728586798.425799&cid=CESK60MQD

Actual behavior

The button gets refocused with a visible blue focus indicator, and a hover overlay gets triggered if the button also has one.

Screenshots

What browsers are you seeing the problem in?

No response

How can we reproduce this issue?

1. Go to https://studio.webcomponents.dev/edit/bu0sOBIfyW7wnHkXtGzL/src/index.ts?p=stories on an iOS device
2. Click on the Button popover button
3. Click out to close the overlay
4. Observe the button getting refocused (and the tooltip appearing)

Sample code or abstract reproduction which illustrates the problem

No response

Severity

None

Logs taken while reproducing problem

No response

[najikahalsema]

This behaviour of returning focus to the overlay trigger upon closing the overlay is expected, but the issue is that :focus-visible class shows up only in Safari, which shows the focus ring when it doesn't in other browsers.

We fixed this issue for picker via #4724 and we'll look into whether we can fix this issue in this context, as well.

[mizgaionutalexandru]

Hi, @lehelen19 ,
It looks like the issue is not reproducible using the trigger directive or the overlay itself, only with the overlay-trigger (that's also reproducible on MacOS Safari).

While AFAIK SWC is slowly moving away from the overlay-trigger, it seems like the problem resides in the fact that the HoverController relies on the :focus-visible that has some different heuristics in Webkit vs other engines, therefore a PR with a fix will open soon. In the meantime feel free to use the other options I've mentioned if they fit your needs.

PS: It looks like all of the versions that I've mentioned reproduce the issue if the type="modal" is added. Might not be that helpful afterall 😁