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

Calendar: When focused on the Choose Month and Choose Year buttons with a screen-reader, it should also read the selected value [Accessibility] #15849

Closed
Jogonarr-3Pillar opened this issue Jun 14, 2024 · 1 comment
Labels
Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible

Comments

@Jogonarr-3Pillar
Copy link

Describe the bug

When focused on the Choose Month and Choose Year buttons with a screen-reader, it should also read the selected value.

image

When navigating to the buttons, it is narrated that it is a button and what the action of the button does, but it doesn't read the selected value, which is evident for sighted users but not for screen-reader users.

image

The reason is the aria-label attribute on the buttons does not include the selected value.

Environment

Requires a screen-reader tool installed (tested witn NVDA v2024.1.0.31547)

image

Can be replicated with the basic example from the PrimeNg site:
https://primeng.org/calendar#basic

Reproducer

https://stackblitz.com/edit/github-gw86kd?file=src%2Fapp%2Fapp.component.html

Angular version

17.3.11

PrimeNG version

17.18.1

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

20.11.1

Browser(s)

Chrome 125.0.6422.142

Steps to reproduce the behavior

  1. Open a screen-reader (tested wth NVDA v2024.1.0.31547)
  2. Tab into the calendar
  3. Press down arrow on the keyboard
  4. Press tab to go to the Previous Month button
  5. Press tab to go to the Choose Month button
  6. Notice that it narrates "Choose Month button" but it doesn't narrate the selected value
  7. Press tab to go to the Choose Year button
  8. Notice that it narrates "Choose Year button" but it doesn't narrate the selected value

Expected behavior

When focused on the Choose Month button it should read something like: Choose Month button selected June.
When focused on the Choose Year button it should read something like: Choose Year button selected 2024.

@Jogonarr-3Pillar Jogonarr-3Pillar added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Jun 14, 2024
@Jogonarr-3Pillar Jogonarr-3Pillar changed the title Calendar: When focused on the Choose Month and Choose Year buttons with a screen-reader, it should also read the selected value Calendar: When focused on the Choose Month and Choose Year buttons with a screen-reader, it should also read the selected value [Accessibility] Jun 29, 2024
@mertsincan
Copy link
Member

Hi,

So sorry for the delayed response! Improvements have been made to many components recently, both in terms of performance and enhancement. Therefore, this improvement may have been developed in another issue ticket without realizing it. You can check this in the documentation. If there is no improvement on this, can you open a new issue so we can include it in our roadmap?

Thanks a lot for your understanding!
Best Regards,

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

No branches or pull requests

2 participants