fix(material-experimental/mdc-checkbox): add larger touch target (#22892)

Sets up a larger touch target for checkboxes in order to meet the 48px minimum.

(cherry picked from commit 437aba6)

Author: crisbeto

src/material-experimental/mdc-checkbox/checkbox.html

@@ -1,6 +1,8 @@
 <div class="mdc-form-field"
      [class.mdc-form-field--align-end]="labelPosition == 'before'">
   <div #checkbox class="mdc-checkbox">
+    <!-- Render this element first so the input is on top. -->
+    <div class="mat-mdc-checkbox-touch-target" (click)="_onClick()"></div>
     <input #nativeCheckbox
            type="checkbox"
            [ngClass]="_classes"

src/material-experimental/mdc-checkbox/checkbox.scss

@@ -1,6 +1,7 @@
 @use '@material/checkbox' as mdc-checkbox;
 @use '@material/form-field' as mdc-form-field;
 @use '@material/ripple' as mdc-ripple;
+@use '@material/touch-target' as mdc-touch-target;
 @use 'sass:map';
 @use '../../cdk/a11y';
 @use '../mdc-helpers/mdc-helpers';
@@ -85,3 +86,16 @@
     transform: translateZ(0);
   }
 }
+
+// Element used to provide a larger tap target for users on touch devices.
+.mat-mdc-checkbox-touch-target {
+  @include mdc-touch-target.touch-target(
+    $set-width: true,
+    $query: mdc-helpers.$mat-base-styles-query);
+
+  [dir='rtl'] & {
+    left: 0;
+    right: 50%;
+    transform: translate(50%, -50%);
+  }
+}