Skip to content

Commit 119fafd

Browse files
crisbetovivian-hu-zz
authored andcommitted
fix(slide-toggle): clear tabindex from host element (#13311)
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.
1 parent db87334 commit 119fafd

File tree

2 files changed

+10
-0
lines changed

2 files changed

+10
-0
lines changed

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

+9
Original file line numberDiff line numberDiff line change
@@ -348,6 +348,15 @@ describe('MatSlideToggle without forms', () => {
348348
expect(slideToggle.tabIndex)
349349
.toBe(5, 'Expected tabIndex property to have been set based on the native attribute');
350350
}));
351+
352+
it('should clear the tabindex from the host element', fakeAsync(() => {
353+
const fixture = TestBed.createComponent(SlideToggleWithTabindexAttr);
354+
355+
fixture.detectChanges();
356+
357+
const slideToggle = fixture.debugElement.query(By.directive(MatSlideToggle)).nativeElement;
358+
expect(slideToggle.getAttribute('tabindex')).toBeFalsy();
359+
}));
351360
});
352361

353362
describe('custom action configuration', () => {

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

+1
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,7 @@ export const _MatSlideToggleMixinBase:
8585
host: {
8686
'class': 'mat-slide-toggle',
8787
'[id]': 'id',
88+
'[attr.tabindex]': 'null',
8889
'[class.mat-checked]': 'checked',
8990
'[class.mat-disabled]': 'disabled',
9091
'[class.mat-slide-toggle-label-before]': 'labelPosition == "before"',

0 commit comments

Comments
 (0)