diff --git a/src/material-experimental/mdc-checkbox/_checkbox-theme.scss b/src/material-experimental/mdc-checkbox/_checkbox-theme.scss index 7966f1dfb91c..7cc7d0d16500 100644 --- a/src/material-experimental/mdc-checkbox/_checkbox-theme.scss +++ b/src/material-experimental/mdc-checkbox/_checkbox-theme.scss @@ -125,6 +125,12 @@ $query: mdc-helpers.$mat-base-styles-query ); } + + @if ($density-scale == -2 or $density-scale == 'minimum') { + .mat-mdc-checkbox-touch-target { + display: none; + } + } } @mixin theme($theme-or-color-config) { diff --git a/src/material-experimental/mdc-radio/_radio-theme.scss b/src/material-experimental/mdc-radio/_radio-theme.scss index a8e416e3f3c6..a98acebf68a3 100644 --- a/src/material-experimental/mdc-radio/_radio-theme.scss +++ b/src/material-experimental/mdc-radio/_radio-theme.scss @@ -58,6 +58,12 @@ .mat-mdc-radio-button .mdc-radio { @include mdc-radio-theme.density($density-scale, $query: mdc-helpers.$mat-base-styles-query); } + + @if ($density-scale == -2 or $density-scale == 'minimum') { + .mat-mdc-radio-touch-target { + display: none; + } + } } @mixin theme($theme-or-color-config) { diff --git a/src/material-experimental/mdc-radio/radio.html b/src/material-experimental/mdc-radio/radio.html index 89cf72953a94..df079ade5299 100644 --- a/src/material-experimental/mdc-radio/radio.html +++ b/src/material-experimental/mdc-radio/radio.html @@ -1,6 +1,8 @@
+ +
+ (change)="_onInputInteraction($event)">
diff --git a/src/material-experimental/mdc-radio/radio.scss b/src/material-experimental/mdc-radio/radio.scss index eedf4eca4f14..e4a8c9bcc474 100644 --- a/src/material-experimental/mdc-radio/radio.scss +++ b/src/material-experimental/mdc-radio/radio.scss @@ -1,6 +1,7 @@ @use '@material/radio/radio' as mdc-radio; @use '@material/radio/radio-theme' as mdc-radio-theme; @use '@material/form-field' as mdc-form-field; +@use '@material/touch-target' as mdc-touch-target; @use '../mdc-helpers/mdc-helpers'; @use '../../cdk/a11y'; @use '../../material/core/style/layout-common'; @@ -25,6 +26,19 @@ @include mdc-radio.without-ripple($query: animation); } +// Element used to provide a larger tap target for users on touch devices. +.mat-mdc-radio-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%); + } +} + // Note that this creates a square box around the circle, however it's consistent with // how IE/Edge treat native radio buttons in high contrast mode. We can't turn the border // into a dotted one, because it's too thick which causes the circles to look off. diff --git a/src/material/radio/radio.html b/src/material/radio/radio.html index 90c7797138c0..5ea64ae717ba 100644 --- a/src/material/radio/radio.html +++ b/src/material/radio/radio.html @@ -16,7 +16,7 @@ [attr.aria-label]="ariaLabel" [attr.aria-labelledby]="ariaLabelledby" [attr.aria-describedby]="ariaDescribedby" - (change)="_onInputChange($event)" + (change)="_onInputInteraction($event)" (click)="_onInputClick($event)">