From b1d4b42488e5f8a23f5281e1f76c0a51598883d3 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Sat, 10 Nov 2018 00:16:35 +0000
Subject: [PATCH] fix(datepicker): toggle not forwarding focus to underlying
 button (#14020)

Fixes the datepicker toggle not being focusable which prevents people from using the focus trap directives, and not forwarding focus to its underlying `button` element.
---
 src/lib/datepicker/datepicker-toggle.html |  1 +
 src/lib/datepicker/datepicker-toggle.ts   | 11 +++++++++--
 src/lib/datepicker/datepicker.spec.ts     | 17 ++++++++++++++++-
 3 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/src/lib/datepicker/datepicker-toggle.html b/src/lib/datepicker/datepicker-toggle.html
index 3515316c46a..867e2e2c568 100644
--- a/src/lib/datepicker/datepicker-toggle.html
+++ b/src/lib/datepicker/datepicker-toggle.html
@@ -1,4 +1,5 @@
 <button
+  #button
   mat-icon-button
   type="button"
   aria-haspopup="true"
diff --git a/src/lib/datepicker/datepicker-toggle.ts b/src/lib/datepicker/datepicker-toggle.ts
index 6bed5e321dd..eb6215f446b 100644
--- a/src/lib/datepicker/datepicker-toggle.ts
+++ b/src/lib/datepicker/datepicker-toggle.ts
@@ -20,7 +20,9 @@ import {
   OnDestroy,
   SimpleChanges,
   ViewEncapsulation,
+  ViewChild,
 } from '@angular/core';
+import {MatButton} from '@angular/material/button';
 import {merge, of as observableOf, Subscription} from 'rxjs';
 import {MatDatepicker} from './datepicker';
 import {MatDatepickerIntl} from './datepicker-intl';
@@ -40,11 +42,13 @@ export class MatDatepickerToggleIcon {}
   styleUrls: ['datepicker-toggle.css'],
   host: {
     'class': 'mat-datepicker-toggle',
-    // Clear out the native tabindex here since we forward it to the underlying button
-    '[attr.tabindex]': 'null',
+    // 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',
     '[class.mat-datepicker-toggle-active]': 'datepicker && datepicker.opened',
     '[class.mat-accent]': 'datepicker && datepicker.color === "accent"',
     '[class.mat-warn]': 'datepicker && datepicker.color === "warn"',
+    '(focus)': '_button.focus()',
   },
   exportAs: 'matDatepickerToggle',
   encapsulation: ViewEncapsulation.None,
@@ -75,6 +79,9 @@ export class MatDatepickerToggle<D> implements AfterContentInit, OnChanges, OnDe
   /** Custom icon set by the consumer. */
   @ContentChild(MatDatepickerToggleIcon) _customIcon: MatDatepickerToggleIcon;
 
+  /** Underlying button element. */
+  @ViewChild('button') _button: MatButton;
+
   constructor(
     public _intl: MatDatepickerIntl,
     private _changeDetectorRef: ChangeDetectorRef,
diff --git a/src/lib/datepicker/datepicker.spec.ts b/src/lib/datepicker/datepicker.spec.ts
index 479b95a96ff..fece0852768 100644
--- a/src/lib/datepicker/datepicker.spec.ts
+++ b/src/lib/datepicker/datepicker.spec.ts
@@ -1043,8 +1043,23 @@ describe('MatDatepicker', () => {
 
         const host = fixture.nativeElement.querySelector('.mat-datepicker-toggle');
 
-        expect(host.hasAttribute('tabindex')).toBe(false);
+        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);
+      });
+
     });
 
     describe('datepicker inside mat-form-field', () => {