WCAG 2.0 A Compliance

[MongooseDoom]

We've been using Pickadate for many of our projects but it would be great if it was also WCAG 2.0 A compliant.

We ran the pickadate demo site through the AMP tool to test for WCAG 2.0 A compliance and found a couple errors. Most of them are related to aria-activedescendant, aria-expanded, and aria-labels.

Date

aria-activedescendant used when it is not allowed Value "true" for aria-activedescendant is not appropriate. It should be the id of a selected descendant. https://www.w3.org/WAI/GL/wiki/Using_aria-activedescendant_to_allow_changes_in_focus_within_widgets_to_be_communicated_to_Assistive_Technology for more info

<div aria-activedescendant="true" aria-label="9 September, 2016" role="gridcell" data-pick="1473379200000" class="picker__day picker__day--infocus picker__day--today picker__day--highlighted">

aria-expanded used when it is not allowed Aria-expanded should not be used on input elements. Aria-controls may be more appropriate here. https://www.w3.org/TR/wai-aria/states_and_properties#aria-controls for more info

<input type="text" placeholder="Try me&hellip;" class="fieldset__input js__datepicker picker__input" name="" id="P1037699023" readonly="readonly" aria-haspopup="true" aria-expanded="false" aria-readonly="false" aria-owns="P1037699023_root">

ARIA based form control found without aria-label or aria-labelledby or inner text (where applicable) Previous and Next month doesn't have aria-label

<div title="Previous month" aria-controls="date_demo__close-on-action_table" role="button" data-nav="-1" class="picker__nav--prev">

Time

aria-activedescendant used when it is not allowed Value "true" for aria-activedescendant is not appropriate. It should be the id of a selected descendant. https://www.w3.org/WAI/GL/wiki/Using_aria-activedescendant_to_allow_changes_in_focus_within_widgets_to_be_communicated_to_Assistive_Technology for more info

aria-expanded used when it is not allowed Aria-expanded should not be used on input elements. Aria-controls may be more appropriate here. https://www.w3.org/TR/wai-aria/states_and_properties#aria-controls for more info

<input type="text" placeholder="Try me&hellip;" class="fieldset__input  picker__input" name="" id="time_demo__translations" readonly="readonly" aria-haspopup="true" aria-expanded="false" aria-readonly="false" aria-owns="time_demo__translations_root">

[Vishwaas]

Is there any update on this issue?

[Vishwaas]

Providing a PR for this issue

[revdbrink]

@Vishwaas can you add also the fixes for the picker.time.js?

[Vishwaas]

@revdbrink I made a lot more fixes for pickadate regarding wcag but later I changed to using ember datepicker. I will try to push the changes today. Sorry for the late response