feat(material/datepicker): allow for datepicker toggle aria-label to be customized (#21077)

Currently the only way to control the accessible label of a `mat-datepicker-toggle`
is globally through the i18n provider. These changes add an input so it can be
changed per instance.

Fixes #20590.

Author: crisbeto

src/material/datepicker/datepicker-toggle.html

@@ -3,7 +3,7 @@
   mat-icon-button
   type="button"
   [attr.aria-haspopup]="datepicker ? 'dialog' : null"
-  [attr.aria-label]="_intl.openCalendarLabel"
+  [attr.aria-label]="ariaLabel || _intl.openCalendarLabel"
   [attr.tabindex]="disabled ? -1 : tabIndex"
   [disabled]="disabled"
   [disableRipple]="disableRipple"

src/material/datepicker/datepicker-toggle.ts

@@ -64,6 +64,9 @@ export class MatDatepickerToggle<D> implements AfterContentInit, OnChanges, OnDe
   /** Tabindex for the toggle. */
   @Input() tabIndex: number | null;
 
+  /** Screenreader label for the button. */
+  @Input('aria-label') ariaLabel: string;
+
   /** Whether the toggle button is disabled. */
   @Input()
   get disabled(): boolean {

src/material/datepicker/datepicker.spec.ts

@@ -1029,6 +1029,22 @@ describe('MatDatepicker', () => {
         expect(button.nativeElement.getAttribute('aria-haspopup')).toBe('dialog');
       });
 
+      it('should set a default `aria-label` on the toggle button', () => {
+        const button = fixture.debugElement.query(By.css('button'))!;
+
+        expect(button).toBeTruthy();
+        expect(button.nativeElement.getAttribute('aria-label')).toBe('Open calendar');
+      });
+
+      it('should be able to change the button `aria-label`', () => {
+        fixture.componentInstance.ariaLabel = 'Toggle the datepicker';
+        fixture.detectChanges();
+        const button = fixture.debugElement.query(By.css('button'))!;
+
+        expect(button).toBeTruthy();
+        expect(button.nativeElement.getAttribute('aria-label')).toBe('Toggle the datepicker');
+      });
+
       it('should open calendar when toggle clicked', () => {
         expect(document.querySelector('mat-dialog-container')).toBeNull();
 
@@ -2262,14 +2278,15 @@ class DatepickerWithFormControl {
 @Component({
   template: `
     <input [matDatepicker]="d">
-    <mat-datepicker-toggle [for]="d"></mat-datepicker-toggle>
+    <mat-datepicker-toggle [for]="d" [aria-label]="ariaLabel"></mat-datepicker-toggle>
     <mat-datepicker #d [touchUi]="touchUI"></mat-datepicker>
   `,
 })
 class DatepickerWithToggle {
   @ViewChild('d') datepicker: MatDatepicker<Date>;
   @ViewChild(MatDatepickerInput) input: MatDatepickerInput<Date>;
   touchUI = true;
+  ariaLabel: string;
 }
 
 

tools/public_api_guard/material/datepicker.d.ts

@@ -272,6 +272,7 @@ export declare class MatDatepickerToggle<D> implements AfterContentInit, OnChang
     _button: MatButton;
     _customIcon: MatDatepickerToggleIcon;
     _intl: MatDatepickerIntl;
+    ariaLabel: string;
     datepicker: MatDatepickerPanel<MatDatepickerControl<any>, D>;
     disableRipple: boolean;
     get disabled(): boolean;
@@ -283,7 +284,7 @@ export declare class MatDatepickerToggle<D> implements AfterContentInit, OnChang
     ngOnChanges(changes: SimpleChanges): void;
     ngOnDestroy(): void;
     static ngAcceptInputType_disabled: BooleanInput;
-    static ɵcmp: i0.ɵɵComponentDefWithMeta<MatDatepickerToggle<any>, "mat-datepicker-toggle", ["matDatepickerToggle"], { "datepicker": "for"; "tabIndex": "tabIndex"; "disabled": "disabled"; "disableRipple": "disableRipple"; }, {}, ["_customIcon"], ["[matDatepickerToggleIcon]"]>;
+    static ɵcmp: i0.ɵɵComponentDefWithMeta<MatDatepickerToggle<any>, "mat-datepicker-toggle", ["matDatepickerToggle"], { "datepicker": "for"; "tabIndex": "tabIndex"; "ariaLabel": "aria-label"; "disabled": "disabled"; "disableRipple": "disableRipple"; }, {}, ["_customIcon"], ["[matDatepickerToggleIcon]"]>;
     static ɵfac: i0.ɵɵFactoryDef<MatDatepickerToggle<any>, [null, null, { attribute: "tabindex"; }]>;
 }