From ebd651e9b4841191cbe59036eb27e252abe38780 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@abv.bg>
Date: Mon, 25 Aug 2025 14:54:01 +0200
Subject: [PATCH] fix(material/datepicker): add visible labels to calendar
 buttons

Adds tooltips to the calendar next/previous buttons so that they have visible labels.

Fixes #31536.
---
 src/material/datepicker/BUILD.bazel          | 1 +
 src/material/datepicker/calendar-header.html | 4 ++--
 src/material/datepicker/calendar.ts          | 3 ++-
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/material/datepicker/BUILD.bazel b/src/material/datepicker/BUILD.bazel
index b5865c4b58a4..d37ef59869ca 100644
--- a/src/material/datepicker/BUILD.bazel
+++ b/src/material/datepicker/BUILD.bazel
@@ -180,6 +180,7 @@ ng_project(
         "//src/material/core",
         "//src/material/form-field",
         "//src/material/input",
+        "//src/material/tooltip",
     ],
 )
 
diff --git a/src/material/datepicker/calendar-header.html b/src/material/datepicker/calendar-header.html
index ee72dd31189c..9885aeb0af1b 100644
--- a/src/material/datepicker/calendar-header.html
+++ b/src/material/datepicker/calendar-header.html
@@ -20,7 +20,7 @@
 
     <button matIconButton type="button" class="mat-calendar-previous-button"
             [disabled]="!previousEnabled()" (click)="previousClicked()"
-            [attr.aria-label]="prevButtonLabel" disabledInteractive>
+            [matTooltip]="prevButtonLabel" [attr.aria-label]="prevButtonLabel" disabledInteractive>
       <svg viewBox="0 0 24 24" focusable="false" aria-hidden="true">
         <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
        </svg>
@@ -28,7 +28,7 @@
 
     <button matIconButton type="button" class="mat-calendar-next-button"
             [disabled]="!nextEnabled()" (click)="nextClicked()"
-            [attr.aria-label]="nextButtonLabel" disabledInteractive>
+            [matTooltip]="nextButtonLabel" [attr.aria-label]="nextButtonLabel" disabledInteractive>
       <svg viewBox="0 0 24 24" focusable="false" aria-hidden="true">
         <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
       </svg>
diff --git a/src/material/datepicker/calendar.ts b/src/material/datepicker/calendar.ts
index 583601417e77..9f54fb28a703 100644
--- a/src/material/datepicker/calendar.ts
+++ b/src/material/datepicker/calendar.ts
@@ -43,6 +43,7 @@ import {MatIconButton, MatButton} from '../button';
 import {_IdGenerator, CdkMonitorFocus} from '@angular/cdk/a11y';
 import {_CdkPrivateStyleLoader, _VisuallyHiddenLoader} from '@angular/cdk/private';
 import {_getFocusedElementPierceShadowDom} from '@angular/cdk/platform';
+import {MatTooltip} from '../tooltip';
 
 /**
  * Possible views for the calendar.
@@ -57,7 +58,7 @@ export type MatCalendarView = 'month' | 'year' | 'multi-year';
   exportAs: 'matCalendarHeader',
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [MatButton, MatIconButton],
+  imports: [MatButton, MatIconButton, MatTooltip],
 })
 export class MatCalendarHeader<D> {
   private _intl = inject(MatDatepickerIntl);