From cb73b425ea60eeb03bd191b42a06352e8615a01e Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@abv.bg>
Date: Wed, 18 Nov 2020 18:27:24 +0100
Subject: [PATCH] feat(material/datepicker): allow for datepicker toggle
 aria-label to be customized

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.
---
 .../datepicker/datepicker-toggle.html         |  2 +-
 src/material/datepicker/datepicker-toggle.ts  |  3 +++
 src/material/datepicker/datepicker.spec.ts    | 19 ++++++++++++++++++-
 .../public_api_guard/material/datepicker.d.ts |  3 ++-
 4 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/src/material/datepicker/datepicker-toggle.html b/src/material/datepicker/datepicker-toggle.html
index 238f386ee492..8ded944a0061 100644
--- a/src/material/datepicker/datepicker-toggle.html
+++ b/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"
diff --git a/src/material/datepicker/datepicker-toggle.ts b/src/material/datepicker/datepicker-toggle.ts
index b976b2017478..0b79517b7f0c 100644
--- a/src/material/datepicker/datepicker-toggle.ts
+++ b/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 {
diff --git a/src/material/datepicker/datepicker.spec.ts b/src/material/datepicker/datepicker.spec.ts
index a9c302500dce..2cc47ab1d716 100644
--- a/src/material/datepicker/datepicker.spec.ts
+++ b/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,7 +2278,7 @@ 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>
   `,
 })
@@ -2270,6 +2286,7 @@ class DatepickerWithToggle {
   @ViewChild('d') datepicker: MatDatepicker<Date>;
   @ViewChild(MatDatepickerInput) input: MatDatepickerInput<Date>;
   touchUI = true;
+  ariaLabel: string;
 }
 
 
diff --git a/tools/public_api_guard/material/datepicker.d.ts b/tools/public_api_guard/material/datepicker.d.ts
index 41b6e4bd1959..adea0fdd5b62 100644
--- a/tools/public_api_guard/material/datepicker.d.ts
+++ b/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"; }]>;
 }