Add Single Date Picker

[psealock]

Working towards #1027
Depends on WordPress/gutenberg#12855

Test

1. Checkout psealock:add/focusOnMount-to-dropdown branch of Gutenberg or just make the two line change in Dropdown: add focusOnMount prop to pass onto Popover component WordPress/gutenberg#12855.
2. View Calendar in DevDocs /wp-admin/admin.php?page=wc-admin#/devdocs/calendar
3. Play around with the single date picker
   • Mobile sizes
   • Keyboard interactions
   • VoiceOver
4. If you see a propType warning for block, the fix for that is here DateTimePicker: fix prop warning for WordPress/gutenberg#12933

Key Decisions

• Make the react-dates datepicker unreachable by keyboard. There is no way to simultaneously keep focus on the input so keyboard users can type inputs and allow focus on the dropdown for selection via keyboard. One solution is to keep focus on the input, then allow focus on the dropdown via tabbing. I don't like this because it misrepresents the sequential flow of a form and causes confusion, for me at least. React-dates implementation chooses similar behaviour.
• Don't allow full screen expansion of dropdown on mobile screens. Otherwise, it forces focus away from the input field, effectively removing the ability to use the keyboard.

[timmyc]

This is looking really good @psealock - so just wondering if we should consider using the WP core date picker here - apologies for not mentioning that as a suggestion on the original issue:

While the design is a bit different, it has passed the a11y review from core. @LevinMedia thoughts from the design side of things?

[LevinMedia]

@timmyc @psealock re: the question about the core component... could we re-style so it looks more like the input we have now, and behaves like what I describe at #1097 in regards to using number input, and automatically advancing through each part of the input... while maintaining the accessibility?

[psealock]

Here is core's DatePicker with some basic Woo styling:

We should go in this direction. It will involve some functionality upstream pull requests (invalid days, and firstDayOfWeek support) and some stylistic changes (day sizing and box v. circle).

wc-admin's date range picker is heavily tied to its input format (single text input v. GB's multiple inputs) so we can't reuse Core's datepicker there, but we could match styles.

could we re-style so it looks more like the input we have now, and behaves like what I describe at #1097 in regards to using number input, and automatically advancing through each part of the input... while maintaining the accessibility?

I really like the suggestion by @LevinMedia in #1097. Happily, Core has separated the inputs from the picker for us, so we can deal with it separately. I think there can be some a11y gains to be made with that approach. I'll explore those thoughts further in that issue.

@LevinMedia how do you feel about the styles in the screen shot and moving towards this direction with the date-range picker for reports?

[psealock]

07be925 switches to use Core's Datepicker.

Here are upstream Gutenberg changes needed to get to parity. Note that these features are not required for this PR to be merged.

• Add firstDayOfWeek support. Grabs from moment.locale() automatically
• Add invalidDays support.
• Allow null date selection. Current implementation forces a selection of current day when none is provided, which means the calendar shows today as selected when mounted.

These seem to be reasonable requests and I think I'll be able to make them happen.

[psealock]

Confirmed with @LevinMedia that this is the direction we'll want to pursue. I'm going to mark this as blocked for now until the above^^^ Gutenberg issues can be resolved.

[psealock]

@timmyc how do you feel about getting this merged ahead of pending Gutenberg fixes? The only one that affects usability is WordPress/gutenberg#12855 which leaves the experience broken for keyboard users if unmerged.

• Dropdown: add focusOnMount prop to pass onto Popover component WordPress/gutenberg#12855
• DateTimePicker: fix prop warning for WordPress/gutenberg#12933
• Datepicker: Add isInvalidDay support WordPress/gutenberg#12962
• Datepicker: Allow null value for currentDate on mounting WordPress/gutenberg#12963

Doing so would be on the assumption that these get merged, but allow the continuation of work on filters. In the worst case, we can swap out GB components retrospectively.

[psealock]

note to self: invalidDays and onUpdate are duplicated

[timmyc]

One minor comment in the code, but testing out nicely. Verified all seems well with current datepicker usage. I'm fine with landing this before the gberg PRs are merged myself.

[psealock]

Thanks for the review @timmyc !

PropType changes and example.md fixed.

Given the open issues with Gutenberg, I created an issue so we don't lose track of testing this for a11y when those get merged upstream #1145.