fix(material/checkbox): ensure focus indicator has the correct shape (#…

…30332)

The specificity for the checkbox's focus indicator was very low which means that if the ripple styles are loaded later, it can be overwritten.

Fixes #30326.

(cherry picked from commit 28aa37a)

src/material/checkbox/checkbox.scss

@@ -107,8 +107,9 @@
 }
 
 // Checkbox components have to set `border-radius: 50%` in order to support density scaling
-// which will clip a square focus indicator so we have to turn it into a circle.
-.mat-mdc-checkbox-ripple::before {
+// which will clip a square focus indicator so we have to turn it into a circle. Needs extra
+// specificity in case the ripple styles are loaded later which can override the shape.
+.mat-mdc-checkbox .mat-mdc-checkbox-ripple::before {
   border-radius: 50%;
 }