angular / angular/components

Button - touch height

Offen
#27,118 10 Kommentare 18 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
area: material/button need a11y consult P5
Vorherrschende Sprache
TypeScript
Sterne
25k
Forks
6.8k
Ø Merge
1 T. 8 Std.
Gemergte PRs (30 T.)
91

Beschreibung

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

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Beginnen Sie mit der StackBlitz-Reproduktion unter src/app/button-overview-example.css und durchsuchen Sie den Angular Material-Quellcode nach dem Selektor .mat-mdc-button-touch-target. Vergleichen Sie die berechneten Höhen des Buttons und des Touch-Ziels bei reduzierter Dichte. Überprüfen Sie anschließend, dass das umgebende Layout nicht mehr überläuft und dass das Touch-Ziel der Button-Höhe folgt.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
angular, css, typescript
Bereich
frontend
Issue-Typ
Bug
Schwierigkeit
2/5
Geschätzter Aufwand
1-3 Stunden
Aktivitätsstatus
Veraltet
Klarheit
Klar beschrieben
Anfängerfreundlichkeit
48/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.