Bug 239472 – [selectors] Double script focus after mouse click shouldn't match :focus-visible

• Status: RESOLVED
• Resolution: FIXED
• Component: CSS

Safari introduced :focus-visible support in 15.4. However, it behaves differently than Chrome and Firefox in that programmatically focusing elements will trigger :focus-visible styles. Many screens rely on programmatic focus for accessibility and are not expecting a focus ring to appear.

Example:
- Go to www.airbnb.com
- On the top right, click the globe icon to bring up a "language and region" modal
- Notice that the close button has a :focus-visible outline in Safari 15.4+ but not in Chrome or Firefox

Another report: 
- https://githubhot.com/repo/reach/reach-ui/issues/915

Desired result:
- :focus-visible in Safari should behave the same as Chrome and Firefox

[Radar WebKit Bug Importer]

<rdar://problem/92301472>

[Manuel Rego Casasnovas]

Created attachment 458942 [details]
Test case to reproduce the issue

[Manuel Rego Casasnovas]

The problem with that website is that it was focusing the element several times via script.

The test case attached reproduce the issue. I'm working on a patch to fix it and behave consistently to Chromium and Firefox here.

[Manuel Rego Casasnovas]

Created attachment 458956 [details]
Patch

[EWS Watchlist]

This patch modifies the imported WPT tests. Please ensure that any changes on the tests (not coming from a WPT import) are exported to WPT. Please see https://trac.webkit.org/wiki/WPTExportProcess

[EWS]

Committed r293926 (250373@main): <https://commits.webkit.org/250373@main>

All reviewed patches have been landed. Closing bug and clearing flags on attachment 458956 [details].