fix(slide-toggle): able to receive focus while disabled on click

Along the same lines as #15499. Fixes the slide toggle being focusable via click when it's disabled.

Author: crisbeto

src/lib/slide-toggle/slide-toggle.spec.ts

@@ -368,14 +368,24 @@ describe('MatSlideToggle without forms', () => {
         .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);
+    it('should set the tabindex of the host element to -1', fakeAsync(() => {
+         const fixture = TestBed.createComponent(SlideToggleWithTabindexAttr);
 
-      fixture.detectChanges();
+         fixture.detectChanges();
 
-      const slideToggle = fixture.debugElement.query(By.directive(MatSlideToggle)).nativeElement;
-      expect(slideToggle.getAttribute('tabindex')).toBe('-1');
-    }));
+         const slideToggle = fixture.debugElement.query(By.directive(MatSlideToggle)).nativeElement;
+         expect(slideToggle.getAttribute('tabindex')).toBe('-1');
+       }));
+
+    it('should remove the tabindex from the host element when disabled', fakeAsync(() => {
+         const fixture = TestBed.createComponent(SlideToggleWithTabindexAttr);
+
+         fixture.componentInstance.disabled = true;
+         fixture.detectChanges();
+
+         const slideToggle = fixture.debugElement.query(By.directive(MatSlideToggle)).nativeElement;
+         expect(slideToggle.hasAttribute('tabindex')).toBe(false);
+       }));
   });
 
   describe('custom action configuration', () => {
@@ -1124,10 +1134,10 @@ class SlideToggleWithFormControl {
   formControl = new FormControl();
 }
 
-@Component({
-  template: `<mat-slide-toggle tabindex="5"></mat-slide-toggle>`
-})
-class SlideToggleWithTabindexAttr {}
+@Component({template: `<mat-slide-toggle tabindex="5" [disabled]="disabled"></mat-slide-toggle>`})
+class SlideToggleWithTabindexAttr {
+  disabled = false;
+}
 
 @Component({
   template: `<mat-slide-toggle>{{label}}</mat-slide-toggle>`

src/lib/slide-toggle/slide-toggle.ts

@@ -86,7 +86,8 @@ export const _MatSlideToggleMixinBase:
   host: {
     'class': 'mat-slide-toggle',
     '[id]': 'id',
-    '[attr.tabindex]': '-1', // Needs to be `-1` so it can still receive programmatic focus.
+    // Needs to be `-1` so it can still receive programmatic focus.
+    '[attr.tabindex]': 'disabled ? null : -1',
     '[class.mat-checked]': 'checked',
     '[class.mat-disabled]': 'disabled',
     '[class.mat-slide-toggle-label-before]': 'labelPosition == "before"',
@@ -101,8 +102,10 @@ export const _MatSlideToggleMixinBase:
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MatSlideToggle extends _MatSlideToggleMixinBase implements OnDestroy, AfterContentInit,
-    ControlValueAccessor, CanDisable, CanColor, HasTabIndex, CanDisableRipple {
-
+                                                                        ControlValueAccessor,
+                                                                        CanDisable, CanColor,
+                                                                        HasTabIndex,
+                                                                        CanDisableRipple {
   private onChange = (_: any) => {};
   private onTouched = () => {};