From 704ab6cf23155805493d475f636dd12a964b12e4 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@abv.bg>
Date: Fri, 4 Jun 2021 20:29:59 +0200
Subject: [PATCH] fix(material-experimental/mdc-checkbox): add larger touch
 target

Sets up a larger touch target for checkboxes in order to meet the 48px minimum.
---
 src/material-experimental/mdc-checkbox/checkbox.html | 2 ++
 src/material-experimental/mdc-checkbox/checkbox.scss | 8 ++++++++
 2 files changed, 10 insertions(+)

diff --git a/src/material-experimental/mdc-checkbox/checkbox.html b/src/material-experimental/mdc-checkbox/checkbox.html
index 76e1ecc4cbab..a19e937c6e24 100644
--- a/src/material-experimental/mdc-checkbox/checkbox.html
+++ b/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"
diff --git a/src/material-experimental/mdc-checkbox/checkbox.scss b/src/material-experimental/mdc-checkbox/checkbox.scss
index 007b9de856df..12434dfd44c4 100644
--- a/src/material-experimental/mdc-checkbox/checkbox.scss
+++ b/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,10 @@
     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);
+}