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.
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
Created attachment 451374 [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
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.
Created attachment 451378 [details] Simple check in Safari TP 139 Attaching video with Safari TP 139 working fine, just in case.
(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.
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].
<rdar://problem/88740176>