search

Vuepic / vue3-date-time-picker

Datepicker component for Vue 3
https://vue3datepicker.com
MIT License
158 stars 13 forks source link

Tab index behaviour. Accessibility issue. #115

Closed anders-f closed 2 years ago

anders-f commented 2 years ago

Describe the bug When using the keyboard to navigate the datepicker and selecting a date the tab index resets for the entire page. You want to be able to continue to tab through the elements on the website after the datepicker selection is done, not start over. This means that elements that are placed after the datepicker can't be reached with the keyboard.

To Reproduce Steps to reproduce the behavior:

  1. Go to https://vue3datepicker.com/api/components/#monthyearcomponent (or any other place where you are using the datepicker)
  2. Use tab to open up datepicker.
  3. Pick a date with your keyboard and continue to tab to select button and press enter on your keyboard.
  4. Tab index gets resetted to the top of the page.

Expected behavior After selecting a date you want to be able to continue to tab though the elements of the web page. Not start over. For instance, if your using the datepicker in a form with a lot of other form elements that you want to be able to tab through you get blocked.

Desktop (please complete the following information):