Bug 278019 – Calling element.focus() from an event listener can show :focus-visible styles

• Status: NEW
• Component: CSS

[Nikita Ourazbaev]

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

[Nikita Ourazbaev]

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]

<rdar://problem/134337357>

[Tim Nguyen (:ntim)]

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`.