Skip to content

Date picker: hardcoded aria labels #19580

Description

@fkwq34

Describe the bug

In Datepicker, the month (and similarly year) header switch buttons expose an accessible name via aria-label (e.g. “Choose Month”) that does not match the visible button text (e.g. “January”). This creates a label-content-name-mismatch accessibility violation and can break speech-input workflows, because users speak the visible label, not the hidden aria-label.

Pull Request Link

#19582

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://stackblitz.com/edit/github-c12yaqdu?file=src%2Fapp%2Fapp.component.html

Environment

A library that wraps primeng and provide its own styling.

Angular version

21.0.0

PrimeNG version

v21

Node version

No response

Browser(s)

No response

Steps to reproduce the behavior

  1. Open a page with PrimeNG p-datepicker in popup/inline mode where the calendar header is visible.
  2. Open the month selector button in the calendar header (button showing current month text like “January”).
  3. Inspect the element or run an accessibility scan (axe rule: label-content-name-mismatch).
  4. Observe the element has aria-label="Choose Month" while visible text is the current month.
  5. (Optional speech test) Use speech input and say the visible month text (e.g. “January”); the control is not reliably targeted because the accessible name differs.

Expected behavior

The accessible name of the Datepicker header switch buttons should match the visible text content shown to users.
Example: if the button displays “January”, its accessible name should be “January” (not “Choose Month”).

Metadata

Metadata

Assignees

No one assigned

    Labels

    Component: AccessibilityIssue or pull request is related to WCAG or ARIAType: BugIssue contains a bug related to a specific component. Something about the component is not working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions