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
<rdar://problem/92301472>
Created attachment 458942 [details] Test case to reproduce the issue
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.
Created attachment 458956 [details] Patch
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
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].