Sitelet https://github.com/angular/components/issues/31536
Skip to content

bug(mat-calendar): Add tooltips to previous/next buttons in the header #31536

Description

@PolinaGo

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

The mat-calendar-header (src/material/datepicker/calendar-header.html) should have tooltips on the button controls, specifically "Previous month", "Next month" to satisfy a11y: https://www.w3.org/WAI/WCAG21/Understanding/non-text-content.html. Note that these buttons already have corresponding aria-labels.

Reproduction

StackBlitz link: https://stackblitz.com/run?file=src%2Fexample%2Fdatepicker-overview-example.html
Steps to reproduce:

  1. Hover over the active previous or next button of the mat calendar header.
  2. Observe the lack of tooltip

Expected Behavior

Expect to have "Previous {period}" tooltip on the active "<" button and "Next {period}" tooltip on the active ">" button of the calendar header

Actual Behavior

No tooltips, only aria-labels.

Environment

Irrelevant

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

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