Rethink the focus mode

[tomivirkki]

UX test summary:

• Two separate 'focus modes' is confusing. The user doesn't understand when the focus is at the input field and when he can navigate the overlay days with arrow keys
• Today and cancel buttons can't be used without a mouse (tab closes the overlay) Closing the dropdown (without selecting a date) was expected to cancel, instead it selects the highlighted value.

Perhaps we should not support navigating the input at all when the overlay is open.

The current “proto-pre-beta” branch does the following (related to these issues):

• When the input is empty, we wait for the user to either press an arrow key or to start typing in the input. If the user presses arrow keys, we navigate the calendar (focus is in the overlay). If the user starts typing, left and right arrow keys navigate the input (focus is in the input).
• Today and Cancel buttons are focusable with they keyboard (tabindex=0)

[Saulis]

Let's start off by making it visually explicit where the focus lies currently. Blur the input field when keyboard is used to navigate the overlay. And "blur" the overlay when input is focused.

After that we can start thinking of ways of improving how the focus is moved between input and the overlay.

[manolo]

The final prototype is in https://github.com/vaadin/vaadin-date-picker/commits/pro-overlay-focus , It contains some patches from https://github.com/vaadin/vaadin-date-picker/commits/proto-pre-beta .

Waiting for UX testing

[samiheikki]

UX testing feedback: https://docs.google.com/document/d/1uO1NlZETV6hQbjv-x0X7oLHDgS-5iifnzYPpAOL1Jnw/edit#