diff --git a/src/lib/slide-toggle/slide-toggle.spec.ts b/src/lib/slide-toggle/slide-toggle.spec.ts index 8fc548e2fe0e..859f6c9ea54a 100644 --- a/src/lib/slide-toggle/slide-toggle.spec.ts +++ b/src/lib/slide-toggle/slide-toggle.spec.ts @@ -293,6 +293,15 @@ describe('MatSlideToggle without forms', () => { expect(document.activeElement).toBe(inputElement); }); + it('should focus on underlying input element when the host is focused', () => { + expect(document.activeElement).not.toBe(inputElement); + + slideToggleElement.focus(); + fixture.detectChanges(); + + expect(document.activeElement).toBe(inputElement); + }); + it('should set a element class if labelPosition is set to before', () => { expect(slideToggleElement.classList).not.toContain('mat-slide-toggle-label-before'); @@ -355,7 +364,7 @@ describe('MatSlideToggle without forms', () => { fixture.detectChanges(); const slideToggle = fixture.debugElement.query(By.directive(MatSlideToggle)).nativeElement; - expect(slideToggle.getAttribute('tabindex')).toBeFalsy(); + expect(slideToggle.getAttribute('tabindex')).toBe('-1'); })); }); diff --git a/src/lib/slide-toggle/slide-toggle.ts b/src/lib/slide-toggle/slide-toggle.ts index 6c48b2f5dada..35a12836e773 100644 --- a/src/lib/slide-toggle/slide-toggle.ts +++ b/src/lib/slide-toggle/slide-toggle.ts @@ -86,11 +86,12 @@ export const _MatSlideToggleMixinBase: host: { 'class': 'mat-slide-toggle', '[id]': 'id', - '[attr.tabindex]': 'null', + '[attr.tabindex]': '-1', // Needs to be `-1` so it can still receive programmatic focus. '[class.mat-checked]': 'checked', '[class.mat-disabled]': 'disabled', '[class.mat-slide-toggle-label-before]': 'labelPosition == "before"', '[class._mat-animation-noopable]': '_animationMode === "NoopAnimations"', + '(focus)': '_inputElement.nativeElement.focus()', }, templateUrl: 'slide-toggle.html', styleUrls: ['slide-toggle.css'],