search

w3c / aria-practices

WAI-ARIA Authoring Practices Guide (APG)
https://www.w3.org/wai/aria/apg/
Other
1.21k stars 339 forks source link

Draft Date Picker design pattern #57

Closed ZoeBijl closed 1 year ago

ZoeBijl commented 8 years ago

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 commented 6 years ago

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 commented 5 years ago

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 commented 5 years ago

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

accdc commented 5 years ago

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