From 4afcbca884779f415b7de8a2ce6463be63772d7a Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Tue, 25 Sep 2018 23:13:16 +0200
Subject: [PATCH] fix(slide-toggle): clear tabindex from host element

Along the same lines as #13308. Currently we forward the `tabindex` from the host to the underlying `input`, however we never clear the `tabindex` from the host, which means that we end up with two layers of focusable elements.
---
 src/lib/slide-toggle/slide-toggle.spec.ts | 9 +++++++++
 src/lib/slide-toggle/slide-toggle.ts      | 1 +
 2 files changed, 10 insertions(+)

diff --git a/src/lib/slide-toggle/slide-toggle.spec.ts b/src/lib/slide-toggle/slide-toggle.spec.ts
index e39739bced06..8fc548e2fe0e 100644
--- a/src/lib/slide-toggle/slide-toggle.spec.ts
+++ b/src/lib/slide-toggle/slide-toggle.spec.ts
@@ -348,6 +348,15 @@ describe('MatSlideToggle without forms', () => {
       expect(slideToggle.tabIndex)
         .toBe(5, 'Expected tabIndex property to have been set based on the native attribute');
     }));
+
+    it('should clear the tabindex from the host element', fakeAsync(() => {
+      const fixture = TestBed.createComponent(SlideToggleWithTabindexAttr);
+
+      fixture.detectChanges();
+
+      const slideToggle = fixture.debugElement.query(By.directive(MatSlideToggle)).nativeElement;
+      expect(slideToggle.getAttribute('tabindex')).toBeFalsy();
+    }));
   });
 
   describe('custom action configuration', () => {
diff --git a/src/lib/slide-toggle/slide-toggle.ts b/src/lib/slide-toggle/slide-toggle.ts
index 0bd9f23cc912..ffb79f33a633 100644
--- a/src/lib/slide-toggle/slide-toggle.ts
+++ b/src/lib/slide-toggle/slide-toggle.ts
@@ -85,6 +85,7 @@ export const _MatSlideToggleMixinBase:
   host: {
     'class': 'mat-slide-toggle',
     '[id]': 'id',
+    '[attr.tabindex]': 'null',
     '[class.mat-checked]': 'checked',
     '[class.mat-disabled]': 'disabled',
     '[class.mat-slide-toggle-label-before]': 'labelPosition == "before"',