redo

Author: adolgachev

goldens/material/slide-toggle/index.api.md

@@ -50,7 +50,6 @@ export class MatSlideToggle implements OnDestroy, AfterContentInit, OnChanges, C
     _getAriaLabelledBy(): string | null;
     _handleClick(): void;
     hideIcon: boolean;
-    hideLabel: boolean;
     id: string;
     get inputId(): string;
     _labelId: string;
@@ -67,8 +66,6 @@ export class MatSlideToggle implements OnDestroy, AfterContentInit, OnChanges, C
     // (undocumented)
     static ngAcceptInputType_hideIcon: unknown;
     // (undocumented)
-    static ngAcceptInputType_hideLabel: unknown;
-    // (undocumented)
     static ngAcceptInputType_required: unknown;
     // (undocumented)
     static ngAcceptInputType_tabIndex: unknown;
@@ -91,7 +88,7 @@ export class MatSlideToggle implements OnDestroy, AfterContentInit, OnChanges, C
     validate(control: AbstractControl<boolean>): ValidationErrors | null;
     writeValue(value: any): void;
     // (undocumented)
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatSlideToggle, "mat-slide-toggle", ["matSlideToggle"], { "name": { "alias": "name"; "required": false; }; "id": { "alias": "id"; "required": false; }; "labelPosition": { "alias": "labelPosition"; "required": false; }; "ariaLabel": { "alias": "aria-label"; "required": false; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; }; "ariaDescribedby": { "alias": "aria-describedby"; "required": false; }; "required": { "alias": "required"; "required": false; }; "color": { "alias": "color"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "hideIcon": { "alias": "hideIcon"; "required": false; }; "hideLabel": { "alias": "hideLabel"; "required": false; }; "disabledInteractive": { "alias": "disabledInteractive"; "required": false; }; }, { "change": "change"; "toggleChange": "toggleChange"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatSlideToggle, "mat-slide-toggle", ["matSlideToggle"], { "name": { "alias": "name"; "required": false; }; "id": { "alias": "id"; "required": false; }; "labelPosition": { "alias": "labelPosition"; "required": false; }; "ariaLabel": { "alias": "aria-label"; "required": false; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; }; "ariaDescribedby": { "alias": "aria-describedby"; "required": false; }; "required": { "alias": "required"; "required": false; }; "color": { "alias": "color"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "hideIcon": { "alias": "hideIcon"; "required": false; }; "disabledInteractive": { "alias": "disabledInteractive"; "required": false; }; }, { "change": "change"; "toggleChange": "toggleChange"; }, never, ["*"], true, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<MatSlideToggle, never>;
 }

src/material/slide-toggle/slide-toggle.html

@@ -53,11 +53,11 @@
     </span>
   </button>
 
-    <!--
-      Clicking on the label will trigger another click event from the button.
-      Stop propagation here so other listeners further up in the DOM don't execute twice.
-    -->
-    <label class="mdc-label" [for]="buttonId" [attr.id]="_labelId" (click)="$event.stopPropagation()">
-      <ng-content></ng-content>
-    </label>
+  <!--
+    Clicking on the label will trigger another click event from the button.
+    Stop propagation here so other listeners further up in the DOM don't execute twice.
+  -->
+  <label class="mdc-label" [for]="buttonId" [attr.id]="_labelId" (click)="$event.stopPropagation()">
+    <ng-content></ng-content>
+  </label>
 </div>

src/material/slide-toggle/slide-toggle.scss

@@ -33,8 +33,9 @@ $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;
+  display: none;
 }
 
 .mdc-switch__track {

src/material/slide-toggle/slide-toggle.ts

@@ -186,9 +186,6 @@ export class MatSlideToggle
   /** Whether to hide the icon inside of the slide toggle. */
   @Input({transform: booleanAttribute}) hideIcon: boolean;
 
-  /** Whether to hide label for the slide toggle. */
-  @Input({transform: booleanAttribute}) hideLabel: boolean;
-
   /** Whether the slide toggle should remain interactive when it is disabled. */
   @Input({transform: booleanAttribute}) disabledInteractive: boolean;