fix(material/datepicker): clear tabindex from host node (#21633)

Similar to #21280. Removes the `tabindex` from the `mat-datepicker-toggle` host since it
can caused accessibility issues. It was only there as a workaround which isn't required
after #21046.

Author: crisbeto

src/material/datepicker/datepicker-toggle.ts

@@ -41,15 +41,12 @@ export class MatDatepickerToggleIcon {}
   styleUrls: ['datepicker-toggle.css'],
   host: {
     '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]': 'disabled ? null : -1',
+    '[attr.tabindex]': 'null',
     '[class.mat-datepicker-toggle-active]': 'datepicker && datepicker.opened',
     '[class.mat-accent]': 'datepicker && datepicker.color === "accent"',
     '[class.mat-warn]': 'datepicker && datepicker.color === "warn"',
     // Used by the test harness to tie this toggle to its datepicker.
     '[attr.data-mat-calendar]': 'datepicker ? datepicker.id : null',
-    '(focus)': '_button.focus()',
   },
   exportAs: 'matDatepickerToggle',
   encapsulation: ViewEncapsulation.None,

src/material/datepicker/datepicker.spec.ts

@@ -1258,36 +1258,12 @@ describe('MatDatepicker', () => {
         expect(button.getAttribute('tabindex')).toBe('7');
       });
 
-      it('should reset the tabindex from the mat-datepicker-toggle host', () => {
+      it('should remove the tabindex from the mat-datepicker-toggle host', () => {
         const fixture = createComponent(DatepickerWithTabindexOnToggle, [MatNativeDateModule]);
         fixture.detectChanges();
 
         const host = fixture.nativeElement.querySelector('.mat-datepicker-toggle');
 
-        expect(host.getAttribute('tabindex')).toBe('-1');
-      });
-
-      it('should forward focus to the underlying button when the host is focused', () => {
-        const fixture = createComponent(DatepickerWithTabindexOnToggle, [MatNativeDateModule]);
-        fixture.detectChanges();
-
-        const host = fixture.nativeElement.querySelector('.mat-datepicker-toggle');
-        const button = host.querySelector('button');
-
-        expect(document.activeElement).not.toBe(button);
-
-        host.focus();
-
-        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);
       });