fix(datepicker): able to focus disabled datepicker toggle while disabled via click (#18231)

Fixes users being able to focus a disabled datepicker toggle by clicking on it.

(cherry picked from commit 321d3f9)

Author: crisbeto

src/material/datepicker/datepicker-toggle.ts

@@ -43,7 +43,7 @@ export class MatDatepickerToggleIcon {}
     'class': 'mat-datepicker-toggle',
     // Always set the tabindex to -1 so that it doesn't overlap with any custom tabindex the
     // consumer may have provided, while still being able to receive focus.
-    '[attr.tabindex]': '-1',
+    '[attr.tabindex]': 'disabled ? null : -1',
     '[class.mat-datepicker-toggle-active]': 'datepicker && datepicker.opened',
     '[class.mat-accent]': 'datepicker && datepicker.color === "accent"',
     '[class.mat-warn]': 'datepicker && datepicker.color === "warn"',

src/material/datepicker/datepicker.spec.ts

@@ -1068,7 +1068,7 @@ describe('MatDatepicker', () => {
         expect(button.getAttribute('tabindex')).toBe('7');
       });
 
-      it('should clear the tabindex from the mat-datepicker-toggle host', () => {
+      it('should reset the tabindex from the mat-datepicker-toggle host', () => {
         const fixture = createComponent(DatepickerWithTabindexOnToggle, [MatNativeDateModule]);
         fixture.detectChanges();
 
@@ -1091,6 +1091,16 @@ describe('MatDatepicker', () => {
         expect(document.activeElement).toBe(button);
       });
 
+      it('should remove the tabindex from the mat-datepicker-toggle host when disabled', () => {
+        const fixture = createComponent(DatepickerWithTabindexOnToggle, [MatNativeDateModule]);
+        fixture.componentInstance.disabled = true;
+        fixture.detectChanges();
+
+        const host = fixture.nativeElement.querySelector('.mat-datepicker-toggle');
+
+        expect(host.hasAttribute('tabindex')).toBe(false);
+      });
+
     });
 
     describe('datepicker inside mat-form-field', () => {
@@ -2037,13 +2047,15 @@ class DelayedDatepicker {
 @Component({
   template: `
     <input [matDatepicker]="d">
-    <mat-datepicker-toggle tabIndex="7" [for]="d">
+    <mat-datepicker-toggle tabIndex="7" [for]="d" [disabled]="disabled">
       <div class="custom-icon" matDatepickerToggleIcon></div>
     </mat-datepicker-toggle>
     <mat-datepicker #d></mat-datepicker>
   `,
 })
-class DatepickerWithTabindexOnToggle {}
+class DatepickerWithTabindexOnToggle {
+  disabled = false;
+}
 
 
 @Component({