Skip to content

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

@PolinaGo

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

Metadata

Metadata

Assignees

No one assigned

    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