Problem: Click events use the MouseEvent class. However, click events can be invoked with keyboards, too. There is an interoperability issue with how the screenX, screenY, clientX and clientY coordinate values are set in WebKit vs Gecko and Chromium. - In WebKit, a keyboard invocation sets the coordinate values to be as if the target was clicked in the very centre. - In Gecko and Chromium, a keyboard invocation sets the coordinate values to 0. See CodePen for a demo: https://codepen.io/joshtumath/pen/bGXqqZY Further information: Gecko and Chromium's solution is advantageous, because it can be used to check if the click event was invoked with a keyboard or pointer. If the event was invoked with a keyboard, a function like this can be used to detect that: const clickEventHandler = (event) => { const possiblyInvokedByKeyboard = event.screenX === 0 || event.screenY === 0; } In WebKit, there is no other way AFAIK to detect if a click event was invoked by a keyboard. Expected behaviour: I expect WebKit to have the same behaviour as Gecko and Chromium.
Thank you for the report. Could you please clarify why you find it beneficial to be able to detect that the event was sent from keyboard? To me, that seems like a downside, as it increases the risk of website malfunction for accessibility users - one would want accessibility to take normal well-tested code paths as much as possible.
(In reply to Alexey Proskuryakov from comment #1) > Thank you for the report. Could you please clarify why you find it > beneficial to be able to detect that the event was sent from keyboard? > > To me, that seems like a downside, as it increases the risk of website > malfunction for accessibility users - one would want accessibility to take > normal well-tested code paths as much as possible. Ironically, I want interoperability on this to help with use cases relating to accessibility. I work at the BBC and, on our UK website, our navigation bar menu button behaves slightly differently depending on if it is opened with a pointer or keyboard. The click event will always open the menu, but: - when opening with a pointer, the focus moves to the menu container. - when opening with a keyboard, there is no animation to open the menu and the focus moves to the first link in the menu. Often when opening a menu, we don't want a slightly different behaviour around focus and animations depending on if the user 'clicks' with a pointer or keyboard. The 'click' event is great when creating user experiences for keyboard users because it is device independent. On keyboards, it is only invoked by Space or Enter key presses. If we were to use the keydown event, we would have to check whether only the the Space or Enter keys were pressed.
Thank you for these details!
<rdar://problem/138044473>
This may be silly, but I can't figure out how to invoke a click with my keyboard? Any clues? (In the CodePen demo)
I focused the button with Option-Tab, and pressed Space. In other browsers, it remains focused after the first mouse click (please let's not talk about that detail here!) This would certainly be an easy fix mechanically; deciding whether to match other browsers or to convince them to match WebKit could be trickier. The use case details that were posted are certainly helpful, but don't make it an obvious choice to me.
Some other context about the bug history https://www.joshtumath.uk/posts/2024-11-08-how-a-bbc-navigation-bar-component-broke-depending-on-which-external-monitor-it-was-on/