fix(material/slide-toggle): overly broad selector (angular#32740)

crisbeto · crisbeto · commit 58870b5117ef · 2026-02-06T17:32:49.000-08:00
Fixes that the `label:empty` selector in the slide toggle was applying to all labels on the page. Fixes angular#32736. (cherry picked from commit bee5511)
diff --git a/src/material/slide-toggle/slide-toggle.scss b/src/material/slide-toggle/slide-toggle.scss
@@ -33,11 +33,6 @@ $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;
@@ -555,6 +550,11 @@ label:empty {
   .mdc-switch--disabled + label {
     color: token-utils.slot(slide-toggle-disabled-label-text-color, $fallbacks);
   }
+
+  // Ensure no label element (with a click handler) present to ensure hidden from screen readers.
+  label:empty {
+    display: none;
+  }
 }
 
 // Element used to provide a larger tap target for users on touch devices.

Original file line number	Diff line number	Diff line change
`@@ -33,11 +33,6 @@ $fallbacks: m3-slide-toggle.get-tokens();`
`33`	`33`	`}`
`34`	`34`	`}`
`35`	`35`
`36`		`-// Ensure no label element (with a click handler) present to ensure hidden from screen readers.`
`37`		`-label:empty {`
`38`		`- display: none;`
`39`		`-}`
`40`		`-`
`41`	`36`	`.mdc-switch__track {`
`42`	`37`	`overflow: hidden;`
`43`	`38`	`position: relative;`
`@@ -555,6 +550,11 @@ label:empty {`
`555`	`550`	`.mdc-switch--disabled + label {`
`556`	`551`	`color: token-utils.slot(slide-toggle-disabled-label-text-color, $fallbacks);`
`557`	`552`	`}`
	`553`	`+`
	`554`	`+ // Ensure no label element (with a click handler) present to ensure hidden from screen readers.`
	`555`	`+ label:empty {`
	`556`	`+ display: none;`
	`557`	`+ }`
`558`	`558`	`}`
`559`	`559`
`560`	`560`	`// Element used to provide a larger tap target for users on touch devices.`