Aria attributes

[betweenbrain]

• Changes Calendar Button element from span to button.
• Changes .cell elements from span to button.
• Adds aria-controls and aria-expanded to Calendar Button.
• Adds aria-label to Calendar Button and interactive .cell elements.
• Updates Datepicker.spec.js to look at only class.

[MrWook]

While i reviewed this an issue came to my mind about the month and year picker.

Wouldn't it make more sense if there is just the month or year in the label? Because you would select this specific month in the year without a day if you still go to the day view. So it should be something like that, doesn't it: year -> month -> day 2020 -> May-> 2020-05-15

This would change if you have the minimum-view set to month, this would change the label to: year -> month 2020 -> 2020-05-01

Same goes if you have the minimum-view set to year, this would change the label to: year 2020-01-01

With those examples only the last entry would be formatted which means it would look something like that: year -> month -> day 2020 -> May-> 15 May 2020

year -> month 2020 -> 01 May 2020

year 01 January 2020

This way the buttons aria labels always reflect what the user selects because on the normal datepicker he won't select a date on the year view only a number which represents the year.

Does this make any sense? Kinda confusing what i wrote :D

[betweenbrain]

Hello @MrWook, you're absolutely right and I agree with you about the month and year labels. What you wrote makes sense 😄

I've gone ahead and changed this to a draft while we discuss this further.

In my first pass, I was trying to achieve something similar to what you describe with it's use of localDateString please see https://github.com/sumcumo/vue-datepicker/pull/86/commits/c21ccfca02516c9d53382330ce8e76393c78ff45#diff-d3976b8d84ba8b8b794b27ba23053dda4f47be68ddcaaa0902985145590bd754L133-L139 and https://github.com/sumcumo/vue-datepicker/pull/86/commits/c21ccfca02516c9d53382330ce8e76393c78ff45#diff-4879c36ded990b874235dbe0712690b5d1fc35ac1468986e1a2d2a670733c83eL151-L156

Maybe the solution would be to use the format property only for PickerDay.vue and localDateString for PickerMonth.vue and PickerYear.vue?

[MrWook]

I think we should check the minimum-view and format the aria label accordingly This would mean following usages for the different minimum-views: day: year: only the year number like 2021 month: only the translated month with the build in translation day: formatted date value to match the input value

month year: only the year number like 2021 month: formatted date value to match the input value

year year: formatted date value to match the input value

This way the aria labels would match the button values and at the end the input value.

[betweenbrain]

I've been giving this some thought and wonder how to implement this while respecting the format property. That is, if the value of format is d MMMM yyyy, we'd use MMMM yyyy, but if format's value is yyyy-MM-dd we'd use yyyy-MM. Assuming that format is a string, it could be parsed to derive day/month/year versions. But, what if it is a function?

[MrWook]

Like i said only the last view will have the formatted date inside the aria label. If it is not the last view only the text inside the button will be used for the aria label. So basically:

<button
v-for="cell in cells"
:aria="isLastView ? formattedDate : dayCellContent(cell) "
>{{ dayCellContent(cell) }}</btn>

If the user has the day view as last view but formats the date like yyyy-MM it is not our fault.

[tcrite1]

@MrWook @betweenbrain any updates on this pr getting merged?