Best practice - date-picker / time-picker / date-time-picker: explicit button to trigger picker

[TetraLogicalHelpdesk]

Pages/screens/components affected

• Date Picker
• Time Picker
• Date Time Picker

Description

To open a date or time picker, keyboard users must currently press the up or down arrow. While this nominally satisfies the requirement of WCAG 2.1 Success Criterion 2.1.1 Keyboard (Level A), and corresponds to the expected behaviour of a combo box/list box, it may not be immediately obvious in the case of date/time pickers.

User impact

Some keyboard users may not understand how the date/time picker popups can be opened (unless they try various key combinations).

Suggested solution

In addition to the current behaviour, which opens the popups on up/down arrow, consider making the "toggle" keyboard focusable and actionable as well - similar to the built-in <input type="date"> / <input type-"time"> widgets in Chrome.

Additionally, also consider triggering the pop-up on Enter, similar to how Firefox handles <input type="date"> controls.

Definition of done

Complete all of these tasks before closing this issue or indicating it is ready for retest:

• All issues identified within the test sample have been resolved.
• The rest of the components, their variants, and the documentation website have been tested for the same issue.
• All issues identified throughout the rest of the components/website have been resolved or filed as new issues.

Related standards

• WCAG 2.1 Success Criterion 2.1.1 Keyboard (Level A)

Test data

Test date: March 2021
Website: vaadin.com/components, vaadin.com/docs-beta

[rolfsmeds]

Closing as this is keyboard accessible even though discoverability is not entirely optimal.

[web-padawan]

Here is some context from the internal discussion with @TetraLogicalHelpdesk.

TL;DR: we need to also toggle picker on Enter, I will create a separate issue for it.

---

It actually seems that Chrome has made some very recent changes here to its built-in widget. At the time when I filed the issue, Chrome on Windows had the toggle separately focusable (as seen in the screenshot I included in the issue). Checking again this morning, Chrome/Win doesn't have that anymore.

Personally, I still think it makes it clearer to keyboard users how they can open/close a picker when there's an explicit control for it (see for instance https://www.w3.org/TR/wai-aria-practices-1.2/examples/dialog-modal/datepicker-dialog.html), however if built-in widgets are now moving away from this paradigm, it's arguable that keyboard users will learn/have to learn that they can open these pickers using alt + down arrow or just down arrow / similar combinations. I would still suggest also opening it on Enter (the way that Firefox does), to cover most common bases.

Yes, there is an argument that having the picker button focusable, but not the "X" clear one, may seem odd. Keyboard users are likely used to "X" clear controls appearing in form inputs, and that they're not keyboard-focusable by default (e.g. how it happened in Edge, though I believe that behaviour has now disappeared in the Chromium-based Edge), because they can easily delete things already with delete/backspace. But as ever, there's likely no one true answer here.

In short, we'd recommend at the very least making sure the pickers open on Enter as well (and, as a result, it may need to handle this key event/prevent the form itself from submitting as a result).