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 c21ccfc#diff-d3976b8d84ba8b8b794b27ba23053dda4f47be68ddcaaa0902985145590bd754L133-L139 and c21ccfc#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?