Skip to content

bug(Datepicker): mat-datepicker-toggle does not announce expanded/collapsed state for screen readers #30406

Closed
@RiinaKuu

Description

@RiinaKuu

Is this a regression?

  • Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

mat-datepicker-toggle button uses aria-haspopup but does not inform screen reader users whether the popup is expanded or not.

Reproduction

Example link: https://material.angular.io/components/datepicker/examples

Steps to reproduce:

  • Go to the Angular Material link above (I used Chrome)
  • Start the screen reader (I used VoiceOver on MacOS)
  • Navigate to the datepicker calendar button
  • Realize that it is not informing you whether popup calendar is expanded or collapsed

Expected Behavior

The button should have aria-expanded attribute (which should always be paired if used aria-haspopup).

Actual Behavior

Image

Environment

  • Angular: 18.2.13
  • CDK/Material: 18.2.14
  • Browser(s): Chrome
  • Operating System (e.g. Windows, macOS, Ubuntu): macOS

Metadata

Metadata

Assignees

Labels

AccessibilityThis issue is related to accessibility (a11y)P2The issue is important to a large percentage of users, with a workaroundarea: material/datepicker

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions