Skip to content

Datepicker menu not accessible with keyboard #1283

Description

@martijnhalekor

First of all thanks for all the hard work these past years! Accessibility is my company's first priority, which is how I ended up using this great package in our UI layer <3

Describe the bug
The datepicker menu closes when trying to reach it by keyboard navigation. Note: this only happens when the date input is empty. If the component already has a date selected, the Tab key will move focus to the clear button first, and then focus is moved to the datepicker menu.

To Reproduce
Steps to reproduce the behavior:

  1. Press Tab key to focus the datepicker input.
  2. Press Enter key to open datepicker menu.
  3. Press Tab key to try to move focus to datepicker menu.
  4. Focus is moved to the datepicker menu.
  5. However, the datepicker menu closes, which makes it inaccessible.

Expected behavior
Datepicker menu should stay visible when it receives focus.

Note
I can replicate the bug on the documentation website: https://vue3datepicker.com/props/modes/ - however, it seems that the month-picker and time-picker modes behave differently:

  • When there's no value, the datepicker stays visible when moving focus with the Tab key.
  • The clear button is skipped when trying to move focus with the Tab key. It only receives focus if the datepicker menu is closed.

If you need more info from my side, just let me know!

Metadata

Metadata

Assignees

No one assigned

    Labels

    awaiting triageThe issue is not reviewed by the maintainersbugSomething isn't working

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions