fix(material/slide-toggle): Fix a11y issues by hiding label when it has no content. (#32480)

Author: adolgachev

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

@@ -1,16 +1,30 @@
 <div class="demo-slide-toggle">
-  <mat-slide-toggle color="primary" [(ngModel)]="firstToggle">Default Slide Toggle</mat-slide-toggle>
+  <mat-slide-toggle color="primary" [(ngModel)]="firstToggle"
+    >Default Slide Toggle</mat-slide-toggle
+  >
   <mat-slide-toggle [(ngModel)]="firstToggle" disabled>Disabled Slide Toggle</mat-slide-toggle>
   <mat-slide-toggle [disabled]="firstToggle">Disable Bound</mat-slide-toggle>
-  <mat-slide-toggle disabled disabledInteractive [(ngModel)]="firstToggle">Disabled Interactive Toggle</mat-slide-toggle>
+  <mat-slide-toggle disabled disabledInteractive [(ngModel)]="firstToggle"
+    >Disabled Interactive Toggle</mat-slide-toggle
+  >
   <mat-slide-toggle hideIcon [(ngModel)]="firstToggle">No icon</mat-slide-toggle>
 
   <p>With label before the slide toggle.</p>
 
-  <mat-slide-toggle labelPosition="before" color="primary" [(ngModel)]="firstToggle">Default Slide Toggle</mat-slide-toggle>
-  <mat-slide-toggle labelPosition="before" [(ngModel)]="firstToggle" disabled>Disabled Slide Toggle</mat-slide-toggle>
+  <mat-slide-toggle labelPosition="before" color="primary" [(ngModel)]="firstToggle"
+    >Default Slide Toggle</mat-slide-toggle
+  >
+  <mat-slide-toggle labelPosition="before" [(ngModel)]="firstToggle" disabled
+    >Disabled Slide Toggle</mat-slide-toggle
+  >
   <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>
+  <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>
 

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;
@@ -66,9 +71,13 @@ $fallbacks: m3-slide-toggle.get-tokens();
 
     .mdc-switch--disabled & {
       border-width: token-utils.slot(
-          slide-toggle-disabled-unselected-track-outline-width, $fallbacks);
+        slide-toggle-disabled-unselected-track-outline-width,
+        $fallbacks
+      );
       border-color: token-utils.slot(
-          slide-toggle-disabled-unselected-track-outline-color, $fallbacks);
+        slide-toggle-disabled-unselected-track-outline-color,
+        $fallbacks
+      );
     }
   }
 
@@ -223,7 +232,9 @@ $fallbacks: m3-slide-toggle.get-tokens();
 
     &:has(.mdc-switch__icons) {
       margin: token-utils.slot(
-          slide-toggle-unselected-with-icon-handle-horizontal-margin, $fallbacks);
+        slide-toggle-unselected-with-icon-handle-horizontal-margin,
+        $fallbacks
+      );
     }
   }
 
@@ -234,7 +245,9 @@ $fallbacks: m3-slide-toggle.get-tokens();
 
     &:has(.mdc-switch__icons) {
       margin: token-utils.slot(
-          slide-toggle-selected-with-icon-handle-horizontal-margin, $fallbacks);
+        slide-toggle-selected-with-icon-handle-horizontal-margin,
+        $fallbacks
+      );
     }
   }
 
@@ -275,7 +288,8 @@ $fallbacks: m3-slide-toggle.get-tokens();
     left: 0;
     position: absolute;
     top: 0;
-    transition: background-color 75ms 0ms cubic-bezier(0.4, 0, 0.2, 1),
+    transition:
+      background-color 75ms 0ms cubic-bezier(0.4, 0, 0.2, 1),
       border-color 75ms 0ms cubic-bezier(0.4, 0, 0.2, 1);
     z-index: -1;
 

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;