From aa2e2f5ae7257a301f508ad160c1f9f5f00a9465 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@abv.bg>
Date: Wed, 9 Jun 2021 07:55:47 +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.
---
 .../mdc-checkbox/checkbox.html                     |  2 ++
 .../mdc-checkbox/checkbox.scss                     | 14 ++++++++++++++
 2 files changed, 16 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..12ca86b50d00 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,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%);
+  }
+}