feat(material/slide-toggle): Add option to completely hide label

Author: adolgachev

src/dev-app/slide-toggle/slide-toggle-demo.html

@@ -12,6 +12,10 @@
   <mat-slide-toggle labelPosition="before" [disabled]="firstToggle">Disable Bound</mat-slide-toggle>
   <mat-slide-toggle labelPosition="before" hideIcon [(ngModel)]="firstToggle">No icon</mat-slide-toggle>
 
+  <p>With no label.</p>
+
+  <mat-slide-toggle aria-label="Toggle only" hideLabel color="primary" [(ngModel)]="firstToggle" />
+
   <p>Example where the slide toggle is required inside of a form.</p>
 
   <form #form="ngForm" (ngSubmit)="onFormSubmit()">

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;

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;