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.

Author: crisbeto

src/material/datepicker/BUILD.bazel

@@ -180,6 +180,7 @@ ng_project(
         "//src/material/core",
         "//src/material/form-field",
         "//src/material/input",
+        "//src/material/tooltip",
     ],
 )
 

src/material/datepicker/calendar-header.html

@@ -20,15 +20,15 @@
 
     <button matIconButton type="button" class="mat-calendar-previous-button"
             [disabled]="!previousEnabled()" (click)="previousClicked()"
-            [attr.aria-label]="prevButtonLabel" disabledInteractive>
+            [matTooltip]="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>
     </button>
 
     <button matIconButton type="button" class="mat-calendar-next-button"
             [disabled]="!nextEnabled()" (click)="nextClicked()"
-            [attr.aria-label]="nextButtonLabel" disabledInteractive>
+            [matTooltip]="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>

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);