bug(button): mat-mdc-button-touch-target height and width are hard coded to 48px

[sdedieu]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

Version 19 allows to redefine the button height using the filled-container-height, outlined-container-height and protected-container-height.

However the inner mat-mdc-button-touch-target width and height are hard coded to 48px.
Which means, if we define a small button, touch area will overflow.

This behavior is present in the documentation example, where the two button-icons have a width and height of 40px but a touch target of 48px.

Reproduction

StackBlitz link: https://stackblitz.com/edit/stackblitz-starters-adbmj5bj?description=An%20angular-cli%20project%20based%20on%20@angular/animations,%20@angular/common,%20@angular/compiler,%20@angular/core,%20@angular/forms,%20@angular/platform-browser,%20@angular/platform-browser-dynamic,%20@angular/router,%20core-js,%20rxjs,%20tslib%20and%20zone.js&file=package.json,src%2Findex.html,src%2Fglobal_styles.scss,src%2Fmain.ts,angular.json&template=node&title=Angular%20Starter
Steps to reproduce:

1. Open the link
2. Click bellow the button

Expected Behavior

touch target height and width should be computed from the --mdc-filled-button-container-height variable.

Actual Behavior

Clicking outside of the button trigger the event.

Environment

Angular CLI: 19.2.0
Node: 20.19.1
Package Manager: npm 10.8.2
OS: linux x64

Package Version

@angular-devkit/architect 0.1902.0
@angular-devkit/core 19.2.0
@angular-devkit/schematics 19.2.0
@angular/cdk 19.2.17
@angular/material 19.2.17
@schematics/angular 19.2.0
rxjs 7.8.1
typescript 5.8.2
zone.js 0.15.0

[json-derulo]

For better accessibility, Material Design recommends touch targets of 48px regardless of how big the element is. It may also extend the bounds of the element. See the related documentation.

[sdedieu]

Oh hmmm ok that make sense on a Material perspective. I thought this new API allowed to build custom design systems on top of Angular Material.
But I guess to do so there is still ugly CSS class overriding to perform.

[crisbeto]

I think it's still worth providing a token to customize the size of the touch target. We should do it for all components that have touch targets though.