diff --git a/src/dev-app/slide-toggle/slide-toggle-demo.html b/src/dev-app/slide-toggle/slide-toggle-demo.html index 59b711ac3e9f..837d1c47acce 100644 --- a/src/dev-app/slide-toggle/slide-toggle-demo.html +++ b/src/dev-app/slide-toggle/slide-toggle-demo.html @@ -12,6 +12,10 @@ Disable Bound No icon +

With no label.

+ + +

Example where the slide toggle is required inside of a form.

diff --git a/src/material/slide-toggle/slide-toggle.scss b/src/material/slide-toggle/slide-toggle.scss index babf986b0f8d..02df133b4a18 100644 --- a/src/material/slide-toggle/slide-toggle.scss +++ b/src/material/slide-toggle/slide-toggle.scss @@ -33,6 +33,11 @@ $fallbacks: m3-slide-toggle.get-tokens(); } } +// Ensure no label element (with a click handler) present to ensure hidden from screen readers. +label:empty { + display: none; +} + .mdc-switch__track { overflow: hidden; position: relative; diff --git a/src/material/slide-toggle/slide-toggle.spec.ts b/src/material/slide-toggle/slide-toggle.spec.ts index 6b6616830b32..ca91e65bef28 100644 --- a/src/material/slide-toggle/slide-toggle.spec.ts +++ b/src/material/slide-toggle/slide-toggle.spec.ts @@ -654,6 +654,8 @@ describe('MatSlideToggle with forms', () => { it('should update checked state on click if control is checked initially', fakeAsync(() => { fixture = TestBed.createComponent(SlideToggleWithModel); + fixture.detectChanges(); + slideToggle = fixture.debugElement.query(By.directive(MatSlideToggle))!.componentInstance; labelElement = fixture.debugElement.query(By.css('label'))!.nativeElement;