fix(checkbox): unable to click to select if text is marked (#15062)

Fixes not being able to select a checkbox button by clicking on it, if part of the text of the label is marked. Also fixes text inside the checkbox being marked if the user clicks on it quickly.

Relates to #14967.

src/lib/checkbox/checkbox.scss

@@ -3,6 +3,7 @@
 @import '../core/style/checkbox-common';
 @import '../core/ripple/ripple';
 @import '../core/style/layout-common';
+@import '../core/style/vendor-prefixes';
 @import '../core/style/noop-animation';
 @import '../../cdk/a11y/a11y';
 
@@ -189,6 +190,11 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * $mat-checkbox-size !default;
 }
 
 .mat-checkbox-layout {
+  // Disable text selection on the label itself, because having text selected
+  // will prevent focus from reaching the label. Below we'll re-enable it only
+  // for the label's content so that people can still select the text.
+  @include user-select(none);
+
   // `cursor: inherit` ensures that the wrapper element gets the same cursor as the mat-checkbox
   // (e.g. pointer by default, regular when disabled), instead of the browser default.
   cursor: inherit;
@@ -198,6 +204,12 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * $mat-checkbox-size !default;
   white-space: nowrap;
 }
 
+.mat-checkbox-label {
+  // Re-enable text selection for the checkbox's content since
+  // we disabled it above in the `.mat-checkbox-layout`.
+  @include user-select(auto);
+}
+
 .mat-checkbox-inner-container {
   display: inline-block;
   height: $mat-checkbox-size;