[Feature Request] Better Keyboard/Accessibility support for new Date input component

[rramsey]

Problem to solve

If the calendar widget is considered a modal dialog, then the WCAG standard says that it should keep focus until dismissed. If it is not considered a modal dialog, then the user should be able to tab through the dialog and shift tab back through the elements. See https://www.w3.org/TR/UNDERSTANDING-WCAG20/keyboard-operation-trapping.html. This is not the case in Chrome 124 on Windows 11. This is not the case on the example at https://vuetifyjs.com/en/components/date-inputs/.

In general, improve the ability to navigate the popup with the keyboard.

Cancel button should be enabled by default. Assumes that the basic example at https://play.vuetifyjs.com/#eNpVjkEKgzAQRa8SZq0RammppEKhtzAuUk0hbYyDSdxI7t4YW7C7mTePP79Z4IZIZy+hAubkgFo4WXNDCJtzgZjGtHSjcUIZOX1Rgn20c2XQO6LFQ+orh3tEJCEONSv2zi8swv+0lWzPWLEr4U0vn1HqIQOtzNvSlx1NbLpw6KzlUDVtiDc14Di5fBC4Eza4SksIEDIo6ZEezlEv6YleIHOTl+0Hq65T8Q== uses all of the default settings.

Proposed solution

When the user activates the popup, pressing shift does not cycle through the calendar controls. If I am on June 30th (last day of the month) and hit tab, I am not taken to the Cancel button, which is disabled for some reason. Hitting tab takes me out of the page entirely, which should not happen.

If I hit the down arrow, it actually scrolls the webpage, which can then obscure important information.

I would expect the up and down arrow keys to move me forward and back by one week, but they don't. This means that if today is the 19th and I want to select the 20th, I have to hit tab 24 times.

Take a look at the keyboard usability of https://material.angular.io/components/datepicker/overview for an easier way to navigate the datepicker with the keyboard.