vaadin
[date-picker] Open overlay on Enter in addition to Arrow Down
Motivation
Follow up from #124 which has been closed but not fully addressed.
In order to be aligned with ARIA practices, we should make sure users can open date-picker dropdown on Enter: https://www.w3.org/TR/wai-aria-practices-1.2/examples/dialog-modal/datepicker-dialog.html
Relevant guidance from the old Slack discussions (full text at https://github.com/vaadin/web-components/issues/124#issuecomment-1002659934):
It's arguable that keyboard users will learn/have to learn that they can open these pickers using
alt+down arrowor justdown arrow/ similar combinations. I would still suggest also opening it on Enter (the way that Firefox does), to cover most common bases.
In short, we'd recommend at the very least making sure the pickers open on
Enteras well (and, as a result, it may need to handle this key event/prevent the form itself from submitting as a result).
A few facts:
-
Pressing Enter on a native date input doesn’t trigger form submit, neither in Firefox, Chrome nor in Safari.
-
The native calendar can be opened on Enter/Space in Firefox, whereas in Chrome, Safari, it can be opened only on Space while Enter seems to be just ignored.
-
The standard HTML validation only runs on form submit, not on blur event/Enter press.
-
The w3c guidelines recommend opening date pickers on ArrowUp/ArrowDown. No mentions about the Enter key.
The main difference from native input is that the vaadin-date-picker runs validation on Enter press and also on blur event. The Enter key logic was added in April 2020 along with an autoOpenDisabled property (https://github.com/vaadin/vaadin-date-picker/pull/694/).
Based on this, it seems weird to open a date-picker with a required attribute on Enter and immediately run validation which will make the field red. Either the validation logic on Enter should be changed/dropped or the date-picker shouldn’t open on Enter.
