Bug 236331

Summary: :focus-visible with click on radio/checkbox labels is broken
Product: WebKit Reporter: firefoxic.dev
Component: CSSAssignee: Manuel Rego Casasnovas <rego>
Status: RESOLVED FIXED    
Severity: Normal CC: cdumez, changseok, clopez, cmarcelo, esprehn+autocc, ews-watchlist, gyuyoung.kim, hi, kangil.han, koivisto, mifenton, rego, webkit-bug-importer, youennf
Priority: P2 Keywords: BrowserCompat, InRadar
Version: WebKit Nightly Build   
Hardware: Unspecified   
OS: Linux   
See Also: https://github.com/web-platform-tests/wpt/pull/32772
Bug Depends on:    
Bug Blocks: 185859    
Attachments:
Description Flags
Patch
none
Simple check in Safari TP 139 none

firefoxic.dev
Reported 2022-02-08 14:45:12 PST
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.
Attachments
Patch (5.66 KB, patch)
2022-02-09 07:32 PST, Manuel Rego Casasnovas 		no flags
DetailsFormatted DiffDiff
Simple check in Safari TP 139 (2.67 MB, video/mp4)
2022-02-09 08:01 PST, Vadim Makeev 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Vadim Makeev
Comment 1 2022-02-08 17:42:13 PST
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
Comment 2 2022-02-09 07:32:19 PST
Created attachment 451374 [details] Patch
EWS Watchlist
Comment 3 2022-02-09 07:33:30 PST
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
Comment 4 2022-02-09 07:42:30 PST
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
Comment 5 2022-02-09 08:01:03 PST
Created attachment 451378 [details] Simple check in Safari TP 139 Attaching video with Safari TP 139 working fine, just in case.
Manuel Rego Casasnovas
Comment 6 2022-02-09 08:02:36 PST
(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
Comment 7 2022-02-10 00:11:18 PST
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
Comment 8 2022-02-10 00:12:23 PST
<rdar://problem/88740176>
Note You need to log in before you can comment on or make changes to this bug.