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

Sets up a larger touch target for checkboxes in order to meet the 48px minimum.
angular · Jun 4, 2021 · 704ab6c · 704ab6c
1 parent 23dfbbb
commit 704ab6c
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 0 deletions.
diff --git 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
@@ -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);
+}