Bug 278019

Summary: Calling element.focus() from an event listener can show :focus-visible styles
Product: WebKit Reporter: Nikita Ourazbaev <nikita.ourazbaev>
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: NEW    
Severity: Normal CC: koivisto, nikita.ourazbaev, ntim, rego, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: Safari Technology Preview   
Hardware: Unspecified   
OS: Unspecified   
Attachments:
Description Flags
Screen recording of bug on iPad none

Nikita Ourazbaev
Reported 2024-08-13 06:07:52 PDT
Created attachment 472136 [details] Screen recording of bug on iPad When element.focus() is called from a button's event listener, whether the focused element matches the :focus-visible selector depends on whether the event’s target element has child nodes. If the button has child nodes, :focus-visible styles will be shown. If the button doesn't have child nodes and only contains text, :focus-visible styles will not be shown. If the button has child nodes but they have pointer-events: none; applied, :focus-visible styles will not be shown. Expected behaviour is that regardless of the button's contents, :focus-visible styles should not be shown if button is pressed with touch or with a mouse pointer. This happens on iPhone, on the Mac, and on iPad. https://codepen.io/magiclantern/pen/KKjyWBB/8549ed2ce5fdd141e59a3dae28cbacfb Potentially related to https://bugs.webkit.org/show_bug.cgi?id=243289
Attachments
Screen recording of bug on iPad (2.43 MB, video/quicktime)
2024-08-13 06:07 PDT, Nikita Ourazbaev 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Nikita Ourazbaev
Comment 1 2024-08-13 17:06:54 PDT
Just to clarify, the :focus-visible styles are shown (or not shown) on the element that is focused, but whether or not they’re shown depends on the content of the button that triggers the event listener that calls element.focus(). The content/markup of the element that gets focus does not seem to matter here, but in the code example it happens to also be a button.
Radar WebKit Bug Importer
Comment 2 2024-08-20 06:08:15 PDT
<rdar://problem/134337357>
Tim Nguyen (:ntim)
Comment 3 2025-05-23 03:57:57 PDT
If you want predictable behavior, just specify `focusVisible: false` or `focusVisible: true` inside `element.focus()`. If someone feels like debugging what's going on: https://searchfox.org/wubkat/rev/98733fd3822325456ee066f400c6465b5fc8dd91/Source/WebCore/dom/Element.cpp#4076-4083 is the right place to look. You'll want to see what cases end up being `FocusVisibility::Invisible` and what cases end up being `FocusVisibility::Visible`.
Note You need to log in before you can comment on or make changes to this bug.