Improve QDate keyboard navigation and ARIA labels

[BrennaEpp]

Is your feature request related to a problem? Please describe.
The q-date component date picker is not friendly to navigating with a keyboard nor with a screen-reader.

Describe the solution you'd like
Something like the demo in this page: https://www.24a11y.com/2018/a-new-day-making-a-better-calendar/

• Arrow keys work to navigate between the elements and between the dates in the calendar

• ARIA standards and best practices for roles and labels are followed so that the calendar "sounds human" when read by a screen reader. For example:

• instead of only reading out the number when a date is selected, read out the whole date.

• aria label for next month button if current selected month is December 2018: "Next month, January 2019"

• aria label for next year button if current selected year is 2018: "Previous year, 2017"

• A slot, a prop or something similar for a close button when the calendar is used in conjunction with q-popup-proxy so that the close button looks like a natural part of the calendar (nice but least important)

Describe alternatives you've considered
Not sure what alternatives other than build my own or find another date picker component.
The close button can be implemented as part of the q-popup-proxy slot but it takes up unnecessary space and looks out of place.

[pdanpdan]

Would you like to take a shot on solving this problem? We can discuss here the implementation details, but if you could create a PR for this it would be great.

[BrennaEpp]

Ok, I tried some things: https://github.com/BrennaEpp/quasar

It mostly works, except for:

• aria labels are all in English; I'm not sure how to go about labeling by locale
• keyboard navigation does not work if there are limited dates; making it work for skipping the dates wouldn't be too hard, but it would be better to have the "invalid" dates still be navigable and indicate that they are not valid
• some of the keyboard navigating decisions I made based only on what I would expect, so they may not be the best

Hopefully what I did was helpful but implementation-wise there may be way better ways.

[Marcindyg]

@pdanpdan
Looks like keyboard support works very well on v1 but is not supported yet in v2.
Do You plan to add this support to v2?

[pdanpdan]

Sorry, I cannot support the changes also for Qv2
For Qv2 you can try this: https://codepen.io/pdanpdan/pen/MWBqwwL?editors=1010
It's not perfect but it works

[rstoenescu]

Fix will be available in Quasar v2.11.6