fix(material-experimental/mdc-button): set proper touch target (#22931)

This is a reimplementation of #22846 which includes a fix for RTL layouts.

Adds some styles to ensure that the MDC-based button always has a touch target of at least 48px. Note that I decided against using MDC's built-in touch target class, because it would've added a margin on the button host node.

Fixes #22799.

Author: crisbeto

src/material-experimental/mdc-button/_button-base.scss

@@ -1,3 +1,5 @@
+@use '@material/touch-target' as mdc-touch-target;
+@use '../mdc-helpers/mdc-helpers';
 @use '../../material/core/style/layout-common';
 
 // Adds styles necessary to provide stateful interactions with the button. This includes providing
@@ -59,3 +61,25 @@
     pointer-events: none;
   }
 }
+
+@mixin mat-private-button-touch-target($is-square) {
+  // Element used to ensure that the button has a touch target that meets the required minimum.
+  // Note that we use this, instead of MDC's built-in `mdc-button--touch` class, because the MDC
+  // class is implemented as `margin-top: 6px; margin-bottom: 6px` on the host element which
+  // goes against our rule of not having margins on the host node. Furthermore, having the margin on
+  // the button itself would require us to wrap it in another div. See:
+  // https://github.com/material-components/material-components-web/tree/master/packages/mdc-button#making-buttons-accessible
+  .mat-mdc-button-touch-target {
+    @include mdc-touch-target.touch-target(
+      $set-width: $is-square,
+      $query: mdc-helpers.$mat-base-styles-query);
+
+      @if ($is-square) {
+        [dir='rtl'] & {
+          left: auto;
+          right: 50%;
+          transform: translate(50%, -50%);
+        }
+      }
+  }
+}

src/material-experimental/mdc-button/_button-theme-private.scss

@@ -45,3 +45,11 @@ $fab-state-target: '.mdc-fab__ripple';
   @include mdc-theme.prop(background-color, rgba(mdc-theme-color.prop-value(on-surface), 0.12));
 }
 
+// Hides the touch target on lower densities.
+@mixin touch-target-density($scale) {
+  @if ($scale == -2 or $scale == 'minimum') {
+    .mat-mdc-button-touch-target {
+      display: none;
+    }
+  }
+}

src/material-experimental/mdc-button/_button-theme.scss

@@ -159,6 +159,7 @@
   .mat-mdc-unelevated-button,
   .mat-mdc-outlined-button {
     @include mdc-button-theme.density($density-scale, $query: mdc-helpers.$mat-base-styles-query);
+    @include button-theme-private.touch-target-density($density-scale);
   }
 }
 

src/material-experimental/mdc-button/_icon-button-theme.scss

@@ -58,6 +58,7 @@
   $density-scale: theming.get-density-config($config-or-theme);
   .mat-mdc-icon-button {
     @include mdc-icon-button.density($density-scale, $query: mdc-helpers.$mat-base-styles-query);
+    @include button-theme-private.touch-target-density($density-scale);
   }
 }
 

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

@@ -21,3 +21,5 @@
      [matRippleDisabled]="_isRippleDisabled()"
      [matRippleCentered]="_isRippleCentered"
      [matRippleTrigger]="_elementRef.nativeElement"></span>
+
+<span class="mat-mdc-button-touch-target"></span>

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

@@ -2,14 +2,15 @@
 @use '@material/button/variables' as mdc-button-variables;
 @use '../mdc-helpers/mdc-helpers';
 @use '../../cdk/a11y';
-@use '_button-base';
+@use 'button-base';
 
 
 @include mdc-button.without-ripple($query: mdc-helpers.$mat-base-styles-query);
 
 .mat-mdc-button, .mat-mdc-unelevated-button, .mat-mdc-raised-button, .mat-mdc-outlined-button {
   @include button-base.mat-private-button-interactive();
   @include button-base.mat-private-button-disabled();
+  @include button-base.mat-private-button-touch-target(false);
 }
 
 // MDC expects button icons to contain this HTML content:

src/material-experimental/mdc-button/fab.scss

@@ -1,12 +1,13 @@
 @use '@material/fab' as mdc-fab;
 @use '../mdc-helpers/mdc-helpers';
-@use '_button-base';
+@use 'button-base';
 
 @include mdc-fab.without-ripple($query: mdc-helpers.$mat-base-styles-query);
 
 .mat-mdc-fab, .mat-mdc-mini-fab {
   @include button-base.mat-private-button-interactive();
   @include button-base.mat-private-button-disabled();
+  @include button-base.mat-private-button-touch-target(true);
 
   // MDC adds some styles to fab and mini-fab that conflict with some of our focus indicator
   // styles and don't actually do anything. This undoes those conflicting styles.

src/material-experimental/mdc-button/icon-button.scss

@@ -1,6 +1,6 @@
 @use '@material/icon-button' as mdc-icon-button;
 @use '../mdc-helpers/mdc-helpers';
-@use '_button-base';
+@use 'button-base';
 
 @include mdc-icon-button.without-ripple($query: mdc-helpers.$mat-base-styles-query);
 
@@ -13,6 +13,7 @@
   border-radius: 50%;
 
   @include button-base.mat-private-button-disabled();
+  @include button-base.mat-private-button-touch-target(true);
 
   // MDC adds some styles to icon buttons that conflict with some of our focus indicator styles
   // and don't actually do anything. This undoes those conflicting styles.