Click targets are too small for some controls

[jelbourn]

Material Design spec says that all touch targets much be at least 48x48.

mat-checkbox, mat-radio-button, and mat-slide-toggle are only 20x20 (with no label). The slider thumb is also too small.

Adding a padding to the <label> element within the template would resolve this (while keeping the visuals unchanged), but would be a major breaking change for people's layouts. We need to explore a non-breaking migration path for this.

This issue is not open for PRs until we have a clear migration strategy. Other components may be too small as well and will need to be audited.

[dgfranklin]

Just to track other instances of this, the touch targets for mat-button are also too small.

Icon buttons and mini fab buttons are 40x40. Basic buttons and raised buttons sizes are determined by their content but are generally also undersized (for example on the reference page).

Demo

See: https://stackblitz.com/edit/angular-cf8thc (a slightly stripped down version of the existing button demo)
Note that:

• All buttons have touch target size less than 48px vertically
• Icon buttons and mini fab buttons have touch target size less than 48px horizontally
• No non-standard styling has been applied to the buttons.

[dobrevad]

@jelbourn are there any updates on this?

[jelbourn]

Probably not for 7.0, but possible for 8.0

[ilyakonrad]

Will that be solved for Angular Material 12?

[jelbourn]

This will be fixed by our MDC-based components refactors currently in @angular/material-experimental. We don't yet have an ETA for those moving into the stable npm package.