angular / angular/components

Button - touch height

Abierto
#27,118 10 comentarios 18 reacciones 0 asignados Ver en GitHub
area: material/button need a11y consult P5
Lenguaje dominante
TypeScript
Estrellas
25k
Forks
6.8k
Merge medio
1 d 8 h
PR fusionados (30 d)
91

Descripción

### 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

The `height` of the `touch-target` for buttons is fixed with `48px`. If the corresponding button has the standard-height of `48px` than this is fine. With reducing e.g. the `denisity` the `48px` shrink to e.g. `36px`. Therefore the `height` should rather `inherit` the height from the button instead of its own fixed height.

The main problem is that the surrounding layout container calculates the height of the button as `36px`. The button don't fit into and an `overflow` appears.

### Reproduction

The provided sample container could be adjusted with the proper css attributes. Nevertheless the problem persists in some other configurations especially when the minimal height is calculated wrongly.

https://stackblitz.com/edit/nxq1bh?file=src/app/button-overview-example.css

### Expected Behavior

```
.mat-mdc-button .mat-mdc-button-touch-target, .mat-mdc-unelevated-button .mat-mdc-button-touch-target, .mat-mdc-raised-button .mat-mdc-button-touch-target, .mat-mdc-outlined-button .mat-mdc-button-touch-target {
position: absolute;
top: 50%;
height: inherit; /* <=================== */
left: 0;
right: 0;
transform: translateY(-50%);
}
```

### Actual Behavior

```
.mat-mdc-button .mat-mdc-button-touch-target, .mat-mdc-unelevated-button .mat-mdc-button-touch-target, .mat-mdc-raised-button .mat-mdc-button-touch-target, .mat-mdc-outlined-button .mat-mdc-button-touch-target {
position: absolute;
top: 50%;
height: 48px; /* <=================== */
left: 0;
right: 0;
transform: translateY(-50%);
}
```

### Environment

```
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/

Angular CLI: 16.0.2
Node: 20.1.0 (Unsupported)
Package Manager: npm 9.6.4
OS: linux x64

Angular: 16.0.2
... animations, cli, common, compiler, compiler-cli, core, forms
... localize, platform-browser, platform-browser-dynamic, router

Package Version
------------------------------------------------------------
@angular-devkit/architect 0.1600.2
@angular-devkit/build-angular 16.0.2
@angular-devkit/core 16.0.2
@angular-devkit/schematics 16.0.2
@angular/cdk 16.0.1
@angular/material 16.0.1
@angular/material-moment-adapter 16.0.1
@schematics/angular 16.0.2
typescript 4.9.5
```

Guía de contribución

Abrir la guía de contribución

Línea de trabajo

Comienza con la reproducción de StackBlitz en src/app/button-overview-example.css y busca en el código fuente de Angular Material el selector .mat-mdc-button-touch-target. Compara las alturas calculadas del botón y del área táctil con una densidad reducida; después, verifica que el diseño circundante ya no se desborde y que el área táctil siga la altura del botón.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
angular, css, typescript
Área
frontend
Tipo de issue
Error
Dificultad
2/5
Tiempo estimado
1-3 horas
Estado de actividad
Estancado
Claridad
Bien especificado
Aptitud para principiantes
48/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.