Aria-practices: Draft Date Picker design pattern

[ZoeBijl]

Draft a design pattern section that summarizes the features of date pickers, different styles of implementation, and lists the APG example implementations.

Preview link

Work on this pattern can be seen in the Raw.GitHack view of the issue57-date-picker-design-pattern branch.

[jnurthen]

Refer to https://www.w3.org/WAI/ARIA/track/issues/489 - Date picker needs keyboard interaction for non-contiguous multiple date selection. - when doing this.

[jnurthen]

Here are a bunch of date picker resources - no endorsement implied etc. These were posted on the a11y slack and thought it would be useful to have them here for reference when writing this pattern.

https://www.24a11y.com/2018/a-new-day-making-a-better-calendar/
http://whatsock.com/tsg/#aria-date-pickers
https://dequeuniversity.com/library/aria/date-pickers/sf-date-picker
http://web-accessibility.carnegiemuseums.org/code/calendars/
https://axesslab.com/accessible-datepickers/
https://ibm.github.io/vue-a11y-calendar/
http://www.webaxe.org/accessible-date-pickers/
https://www.nngroup.com/articles/date-input/
https://www.smashingmagazine.com/2017/07/designing-perfect-date-time-picker/
https://wet-boew.github.io/v4.0-ci/docs/ref/datepicker/datepicker-en.html

[charmarkk]

@jongund SmashingMag's article looks particularly useful! Thanks for all the resources @jnurthen.

[accdc]

Hi,
About the resource list, in case it's of interest, there is one that is experimental that I am working on for presenting at CSUN next week, which is a configurable DatePicker element object that is directly importable into React as a predefined accessible widget.

This is within the archive at
https://github.com/whatsock/bootstrap-react

In short, you can import a fully accessible date picker using the syntax:

<DatePicker
label="Departure Date:"
inputId="uniqueId4InputElement"
inputName="inputName4FormSubmit"
triggerId="uniqueId4TriggerButton"
/>

Plus you can configure a ton of other stuff too, but that's the basic syntax for a standard calendar with no disabled date ranges.

You can find the files for this within the folder
"src\components\Calendar"

I'm still working on this for next week, so it will likely change as I increase documentation and the like, but the build is now stable.

All the best,
Bryan