Open Bug 1245292 Opened 10 years ago Updated 2 months ago

Onclick event via keyboard does not set event.shiftKey to true

Categories

(Core :: DOM: Events, defect)

Product:
Core
Component:
DOM: Events
Version:
44 Branch
Type:
defect

Tracking

()

Status:
UNCONFIRMED

People

(Reporter: brian.a.beard, Unassigned)

Details

(Whiteboard: dom-triaged)

User Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/48.0.2564.97 Safari/537.36 Steps to reproduce: Add event listener for `onclick` with `event` as a parameter in callback for a checkbox on page. Tab into the checkbox Press Shift+Space to check In callback, expect `event.shiftKey` to be true (see http://codepen.io/babeard/pen/qbyJEy : A multi-select checkbox with shift key) Actual results: While it did check the checkbox as expected, it did not set `event.shiftKey` to true Expected results: event.shiftKey = true
Component: Untriaged → DOM: Events
This is a compatibility issue. Safari, Chrome, Opera, and Edge all set `shiftKey` to `true` even when the keyboard is used to toggle the checkbox.
I'm not aware of any spec defining this behavior.
Whiteboard: dom-noted
Does the same happen with alt, ctrl and meta keys too?
The ctrlKey does behave the same way as shiftKey under the same circumstances. However, Alt+Space is hard to tell because, at-least in windows, the context menu for the window has priority but I suspect it would behave similarly. I couldn't get the metaKey to work in any browser for some reason.
Whiteboard: dom-noted → dom-triaged

This is still broken in Firefox 69 Quantum.

Spec schmeck, if the shift key is being pressed then shiftKey should be true (like it is in every other browser).

Here's a repro page:

<!DOCTYPE html>
<html>
	<body>
		<button id="clickme">Click This Button With Spacebar and Shift</button>
		<textarea id="output" readonly="true" style="display:block; height:50em; width:75em;"></textarea>
		<script>
			document.getElementById("clickme").addEventListener("click", function(event) {
				var message = "shiftKey: " + event.shiftKey;
				message += " / getModifierState(KeyboardEvent.DOM_VK_SHIFT): "+ event.getModifierState("Shift");
				logIt(message);
				function logIt(msg) {
					document.getElementById("output").value += msg + "\n";
				}
			}), false;
		</script>
	</body>
</html>

Further to my comment above - shiftKey even works on click events in firefox (mouse click + shift).

It only doesn't work with spacebar + click.

FF 84.0.1 (64-bit) MacOS Catalina
This is also true for the click event when clicking a <button> using "enter". Shift-Enter does not set event.shiftKey. Same for ctrlKey and metaKey.
I consider this an a11y issue, as there is no way to shift-click a button using the keyboard only.

Severity: normal → S3

Still broken, and I've filed a spec bug about it: https://github.com/w3c/uievents/issues/406

You need to log in before you can comment on or make changes to this bug.