vue2-datepicker
vue2-datepicker copied to clipboard
mengxiong10
[Feature request] a11y | Datepicker items are not accessible from the keyboard
What problem does this feature solve?
Allows users to use the datapicker only using the keyboard.
It is not convenient for all Internet users to work only with a mouse. Some of them unfortunately have physical disabilities that make it inconvenient or impossible to work with the mouse.
Some users have vision problems and they are forced to use special tools - screen readers that tell them what is happening on the screen.
WAI-ARIA Example of an accessible datapicker Date Picker Dialog
You can find out more about the accessibility of interfaces here: A11ycasts with Rob Dodson
What does the proposed API look like?
Probably it should be implemented out of the box.
I've just implemented keyboard navigation on another open source Vue2 datepicker project: https://sumcumo.github.io/vue-datepicker - and it was quite a challenge!
The datepicker I worked on is a pure date picker (i.e. you can't also pick a time), but you can now interact with the component using spacebar, tab, enter, escape, backspace, delete as well as the arrow keys.
We tried to emulate the way Chrome implements <input type="date"> (see example) i.e. by 'focus-trapping' certain elements (which you can tab through) when the calendar is open.
You even get a nice slide transition when changing month/year/decade - and the functionality is backed up by a suite of e2e tests in Cypress / cucumber.
If anyone here is thinking of implementing a similar thing for this project, you might like to have a look (and do please feel free to make any suggestions for improvement at the sum.cumo repo!).
