Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Draft Date Picker design pattern #57

Closed
ZoeBijl opened this issue Jun 2, 2016 · 4 comments
Closed

Draft Date Picker design pattern #57

ZoeBijl opened this issue Jun 2, 2016 · 4 comments
Assignees
@jongund @charmarkk
Labels
Pattern Page Related to a page documenting a Pattern

Comments

@ZoeBijl
Copy link
Contributor

ZoeBijl commented Jun 2, 2016 •
edited by mcking65
Loading

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.
@mcking65 mcking65 changed the title Date Picker design pattern Draft Date Picker design pattern Aug 13, 2016
@mcking65 mcking65 added this to the 1.1 APG Release 2 milestone Aug 13, 2016
mcking65 added a commit that referenced this issue Aug 14, 2016
@mcking65
Removed sections that require major rework to fix incorrect guidance.
eabf6ca 
In addition to the below, This commit also moves the landmark section after the example section.

Moved each of the following sections from aria-practices.html to aria-practices-DeletedSectionsArchive.html
and created associated issues for drafting new versions.
1. Section "General Steps for Building an Accessible Widget with WAI-ARIA" and created issue #73.
2. Section "Other Widget Authoring Practices"., primarily about aria-valuenow, there is no specific need to raise an issue for this section.
3. Section "Relationships" and raised issues #74, #75, #76, and #77.
4. Section "Managing Dynamic Changes" and created issue #78.
5. Section "Presentation Role" and created issue #79.
6. Section "Form Properties" and created issue #80.
7. Section "Drag-and-Drop Support" and created issue #81
8. Section "Math" and created issue #82.
9. Section "Reusable Component Libraries" and created issue #83.
10. The following 4 Appendix sections related to background on ARIA and created issue #84
A. Background on WAI-ARIA
B. Filling the Gaps for Content Delivered to Desktop Browsers
c. Building Accessible Applications with WAI-ARIA
D. Reasons for Adopting WAI-ARIA
11. The following design patterns:
A. Accordion and updated issue #53.
B. Autocomplete and updated issue #31.
C. Combobox and updated issue #31.
D. Datepicker and updated issue #57
E. Dialog (Non-Modal) and updated issue 59.
F. Dialog (Tooltip) and added issue #85.
G. Landmarks and added issue #86.
H. Popup Help (aka Bubble Help) and added issue #87.
I. Rich Text Editor and added issue #88.
j. Site Navigator - General and added issue #89.
K. Site Navigator - Tree and added it to issue #89.
L. Site Navigator - Tabbed Style and added it to issue #89.
M. Tree Grid and added issue #91.
N. Wizard and added issue #92.
tatermelon pushed a commit to tatermelon/aria-practices that referenced this issue Aug 19, 2016
@mcking65 @tatermelon
Removed sections that require major rework to fix incorrect guidance.
572cdf3 
In addition to the below, This commit also moves the landmark section after the example section.

Moved each of the following sections from aria-practices.html to aria-practices-DeletedSectionsArchive.html
and created associated issues for drafting new versions.
1. Section "General Steps for Building an Accessible Widget with WAI-ARIA" and created issue w3c#73.
2. Section "Other Widget Authoring Practices"., primarily about aria-valuenow, there is no specific need to raise an issue for this section.
3. Section "Relationships" and raised issues w3c#74, w3c#75, w3c#76, and w3c#77.
4. Section "Managing Dynamic Changes" and created issue w3c#78.
5. Section "Presentation Role" and created issue w3c#79.
6. Section "Form Properties" and created issue w3c#80.
7. Section "Drag-and-Drop Support" and created issue w3c#81
8. Section "Math" and created issue w3c#82.
9. Section "Reusable Component Libraries" and created issue w3c#83.
10. The following 4 Appendix sections related to background on ARIA and created issue w3c#84
A. Background on WAI-ARIA
B. Filling the Gaps for Content Delivered to Desktop Browsers
c. Building Accessible Applications with WAI-ARIA
D. Reasons for Adopting WAI-ARIA
11. The following design patterns:
A. Accordion and updated issue w3c#53.
B. Autocomplete and updated issue w3c#31.
C. Combobox and updated issue w3c#31.
D. Datepicker and updated issue w3c#57
E. Dialog (Non-Modal) and updated issue 59.
F. Dialog (Tooltip) and added issue w3c#85.
G. Landmarks and added issue w3c#86.
H. Popup Help (aka Bubble Help) and added issue w3c#87.
I. Rich Text Editor and added issue w3c#88.
j. Site Navigator - General and added issue w3c#89.
K. Site Navigator - Tree and added it to issue w3c#89.
L. Site Navigator - Tabbed Style and added it to issue w3c#89.
M. Tree Grid and added issue w3c#91.
N. Wizard and added issue w3c#92.
@mcking65 mcking65 added documentation Pattern Page Related to a page documenting a Pattern and removed needs review labels Jan 19, 2017
@mcking65 mcking65 mentioned this issue Nov 1, 2017
Closed
@mcking65 mcking65 mentioned this issue Feb 14, 2018
Closed
@jnurthen
Copy link
Member

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.

@mcking65 mcking65 mentioned this issue Dec 4, 2018
Closed
@jnurthen
Copy link
Member

jnurthen commented Mar 5, 2019 •
edited
Loading

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
Copy link
Contributor

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

@accdc
Copy link

accdc commented Mar 7, 2019

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

@mcking65 mcking65 removed this from the 1.1 APG Release 4 milestone Aug 14, 2019
@carmacleod carmacleod mentioned this issue Mar 10, 2020
Closed
@jongund jongund closed this as completed Jul 12, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@jongund jongund

@charmarkk charmarkk

Labels
Pattern Page Related to a page documenting a Pattern
Projects
Date Picker Pattern and Examples Development Project
Status: Complete
Milestone
No milestone
Development

No branches or pull requests
6 participants
@jongund @jnurthen @accdc @ZoeBijl @mcking65 @charmarkk