angular / angular/components

Button - touch height

Open
#27,118 10 comments 18 reactions 0 assignees View on GitHub
area: material/button need a11y consult P5
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

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

Contributor guide

Open the contributing guide

Research direction

Start with the StackBlitz reproduction at src/app/button-overview-example.css and search the Angular Material source for the .mat-mdc-button-touch-target selector. Compare the computed button and touch-target heights under reduced density, then verify that the surrounding layout no longer overflows and that the touch target follows the button height.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, css, typescript
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.