:focus-visible with click on radio/checkbox labels is broken

• Component: CSS
• Status: RESOLVED FIXED

Clicking on the radio/checkbox label causes the input to be focused as if it were focused with the keyboard instead of the mouse. Only clicking on the input itself works correctly according to the specification (https://drafts.csswg.org/selectors/#the-focus-visible-pseudo):
> If the user interacts with the page via a pointing device (mouse, touchscreen, etc.) and the focused element does not support keyboard input, don’t indicate focus.

Demo for testing: https://codepen.io/firefoxic/pen/VwrpmZP
Checked in Epiphany Technology Preview (42.alpha / WebKitGTK 2.35.2).
It works correctly in Chrome and Firefox.

[Vadim Makeev]

Cannot reproduce in Safari TP 139 (Safari 15.4, WebKit 17613.1.14.41.3) on macOS 12.2 (21D49):

- There are no outline when I click checkboxes or labels in all three cases
- There’s an outline when I tab though them via keyboard

[Manuel Rego Casasnovas]

Created attachment 451374 [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

[Manuel Rego Casasnovas]

Thanks for reporting this. I've managed to reproduce the issue with a very simple test case:
    <input type="checkbox" id="test"><label for="test">test</label>

If you click on the label, the checkbox shows a focus indicator.

I've uploaded a patch to fix the issue.

[Vadim Makeev]

Created attachment 451378 [details]
Simple check in Safari TP 139

Attaching video with Safari TP 139 working fine, just in case.

[Manuel Rego Casasnovas]

(In reply to Vadim Makeev from comment #5)
> Created attachment 451378 [details]
> Simple check in Safari TP 139
> 
> Attaching video with Safari TP 139 working fine, just in case.

Yes, the WPT test also passed in Safari: https://github.com/web-platform-tests/wpt/pull/32772/checks?check_run_id=5127872072

But it's failing in WebKitGTK.

[EWS]

Committed r289521 (247052@main): <https://commits.webkit.org/247052@main>

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

[Radar WebKit Bug Importer]

<rdar://problem/88740176>