components
components copied to clipboard
angular
Click targets are too small for some controls
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.
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.
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.
Hello folks,
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.
MDC-based components refactors completed, and I believe this has been improved. There are a few, specific cases where touch targets are still not large enough.
Assigning to myself to organize exactly where touch targets are not large enough.
-Zach
