Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

DatePicker: Cannot escape header with keyboard #17663

Open
2 of 4 tasks
Farbfetzen opened this issue Feb 12, 2025 · 0 comments · May be fixed by #17695
Open
2 of 4 tasks

DatePicker: Cannot escape header with keyboard #17663

Farbfetzen opened this issue Feb 12, 2025 · 0 comments · May be fixed by #17695
Labels
Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible

Comments

@Farbfetzen
Copy link

Farbfetzen commented Feb 12, 2025

Describe the bug

It's impossible to select a month or a year with the keyboard if the datepicker is a "month picker" or a "year picker".
This is a regression from PrimeNG v17 where it worked in the Calendar.

Pull Request Link

No response

Reason for not contributing a PR

  • Lack of time
  • Unsure how to implement the fix/feature
  • Difficulty understanding the codebase
  • Other

Other Reason

No response

Reproducer

https://primeng.org/datepicker

Environment

https://primeng.org/datepicker

Angular version

Whatever https://primeng.org uses

PrimeNG version

v19

Node version

No response

Browser(s)

Firefox and Chrome

Steps to reproduce the behavior

  1. Visit https://primeng.org/datepicker#monthpicker or https://primeng.org/datepicker#yearpicker.
  2. Using the keyboard, open the datepicker and navigate into it.
  3. Try to select a month or a year using the keyboard. It doesn't work because the focus is in the header and no key combination allows the user to focus the months or years.

This is also reproducible if you start with a normal datepicker, for example the one in https://primeng.org/datepicker#basic, then navigate to the header and select either the month or the year heading.

Expected behavior

It must be possible to select a month or a year using the keyboard alone. This is an important accessibility feature.
See https://v17.primeng.org/calendar#monthpicker where pressing tab multiple times makes it possible to actually select a month.

@Farbfetzen Farbfetzen added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Feb 12, 2025
imaksp added a commit to imaksp/primeng that referenced this issue Feb 17, 2025
it was impossible to focus month or year using keyboard arrow keys/tab, due to incorrect class names. this updates the class names
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant