[BITV/A11Y] Datetime picker UX needs to be improved.

[marcoambrosini]

Feature request

Setting date and time with our current picker is very expensive and creates a lot of friction.
I think we need to go back to the drawing board and come up with something better!

To do

Replacing the current datepicker with a native obehavourne

• Evaluate and document browser compatibility
  • https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local#browser_compatibility
  • https://github.com/nextcloud/browserslist-config/blob/2ee74e812ceb22721c904b77aa886a420c79f9fc/browserlist.config.js -> https://browserslist.dev/?q=ID4wLjI1JSwgbm90IGllIDExLCBub3Qgb3BfbWluaSBhbGwsIG5vdCBkZWFkLCBub3QgRmlyZWZveCBFU1I%3D -> check oldest and latest version
  • some older versions were tested via https://live.browserstack.com/ simulator
    • Android Desktop v4.4 (should be an android app, not an desktop/android, that doesn't make sense)
    • Chrome Desktop v87
    • Chrome Desktop v103
    • Edge Desktop v101
    • Edge Desktop v103
    • Firefox Desktop v100
    • Firefox Desktop v101
    • Opera Desktop v86
    • Opera Desktop v87
    • Safari Desktop v13.1 !not usable
    • Safari Desktop v15.5
    • Samsung Desktop v17 (should be an android app, not an desktop/android, that doesn't make sense)
    • Chrome for Android v103
    • Firefox for Android v101
    • UC Browser 12.12
    • Safari for iOS v12
    • Safari for iOS v13
    • Safari Desktop v12 !not usable
    • Safari for iOS v15.6
  • Document known limitations
• Adapt styling
• Provide native attributes / events: all possible props and events from https://github.com/nextcloud/nextcloud-vue/blob/master/src/components/DatetimePicker/DatetimePicker.vue#L206 have to be moved to native datetime picker
• Check and adapt datatypes https://github.com/nextcloud/nextcloud-vue/blob/master/src/components/DatetimePicker/DatetimePicker.vue#L184
• Tests in different places / components

Native date picker limitations

• Most important one: all browsers provide there own implementation of native datetime picker. That means, that there could be some odd behavior in some browsers / versions and they are very different. I've tested it mostly in current Chrome and Firefox.
  But: the tendency is that browser implementations will be better with a time. E.g. look into last implementation on Safari and compare it with an older versions.

• Bug for type="week".

Chrome: it is possible to pick a week, but mostly not possible to change the week from a keyboard.

Firefox: almost unusable. Neither keyboard nor picker (mouse)

• Bug for readonly attribute. (tested on type="date")

Chrome: doesn't work at all.

Firefox: works only for keyboard input.

• Focus goes too fast away.

Firefox: It is not possible to use a piker via keyboard at all.

• It is not possible to exit a picker (via Esc) without closing an action menu.

Firefox: focus doesn't work at all.

Chrome: I don't know how could it be possible to listen a "close" event from native picker on ActionMenu. First Esc goes to previous date. Second Esc closes action menu completely. See more https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#events.

• I had no success with step attribute for minutes. I haven't seen any difference. Firefox + Chrome.

Firefox 103.0.1 (64-bit) desktop

Tested on Linux using https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local

Missing picker for time

Picking date	Picking time

UC Browser several versions

Buggy + seems too old.

Safari iOS older versions

Buggy. Can't open picker + can't put a date via input. Not usable.

Safari iOS v12

Partly usable. User is not able to choose year + month.

Safari iOS v13

Partly usable. User is not able to choose year + month.

Safari Desktop v12 + Safari Desktop v13.1

Buggy. Can't open picker + can't put a date via input. Not usable.

Chrome Version 104.0.5112.101 (Official Build) (64-bit) desktop

Colors of disabled dates have too low contrast

Chrome Desktop: Colors of disabled dates have too low contrast (some days in month are disabled and input field shows it in this way). Icon on the right side have too low contrast too.

[raimund-schluessler]

@ma12-co Could elaborate what bothers you?

[marcoambrosini]

@raimund-schluessler this came out in one of our open design calls and I left this here as a reminder. I don't remember the specifics but we found various counter-intuitive things about it and some unnecessary steps.

[JuliaKirschenheuter]

I see there several problems regarding navigation via keyboard:

1. Navigation order: double left -> left -> double right -> right -> month -> year -> OK

2. Datetime picker body is completely inaccessible

In this point there should be done also a lot:

• to make a difference between current month - next/previous month,
• to make a difference between weekends,
• to make a difference between current and next/previous day,
• not only color difference
• allow different keys to navigate inside of Datetime picker body
• it's not even possible to type in a date manually and get it accepted, especially when the format is not known in advance

3. All icons must have descriptions

4. It is not possible to quit a Datetime picker via keyboard.

Datetime picker as a popover

Datetime picker as a popover is completely inaccessible via keyboard: ActionInput type="datetime-local". Popover will gone by the next tabulation.

Probably would be better solution to check existing implementations of Datetime picker and use a modern / accessible one rather than use this one https://github.com/mengxiong10/vue2-datepicker

[PVince81]

see also mengxiong10/vue2-datepicker#684

[JuliaKirschenheuter]

@marcoambrosini, @skjnldsv what is your opinion, how could we move on?

• wait until upstream ticket will be closed?
• search for another library?

[raimund-schluessler]

@marcoambrosini, @skjnldsv what is your opinion, how could we move on?

* wait until upstream ticket will be closed?

* search for another library?

Searching for another library is not a good idea, I think (unless the current one is abandoned/deprecated, which it isn't). I would rather try to fix the issue in the upstream library.

[marcoambrosini]

I think needs some design and usability research @jancborchardt & @nimishavijay