aria-* attributes do not match their roles

[ventralnet]

Hello, I am currently performing accessibility testing for my application. The first step we are doing is running chrome dev tools light house to test our app generally.

It looks like days in the date picker are assigned the role of gridcell. They also have an aria-* rolled defined which I assume is storing the 'pressed' state (aria-pressed="true|false")

This flags as an issue because the mismatch is not to spec/is not a attribute valid for gridcell roles

vue-datepicker@11.0.1

[sahilrajthapa]

Hello @ventralnet, you should use :aria-labels props. You can assign a function to the day property of the :aria-labels props to customize the label as needed. You can find example here.

[ventralnet]

@sahilrajthapa Thanks, I didn't know that prop existed!

However this ticket is because day cells in the calendar are assigned the role 'role=gridcell' and also have the aria attribute 'aria-pressed' defined. Elements of role gridcell do not suppor the aria-pressed attribute. One way to fix this and help scree readers would be to have a child of the gridcells with role=button with the aria-pressed attribute. Another may be to changed aria-pressed to be aria-selected which I think is more standard

[sahilrajthapa]

@ventralnet Thanks for the clarification! I'll create a PR to fix this.