angular / angular/components

bug(material/chips): Chips should have larger touch targets

Offen
#29,511 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
Accessibility area: material/chips P3
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

Even though icon button defaults to 40px, the touch target is still 48px from here: https://gith
ub.com/angular/components/blob/main/src/material/button/_button-base.scss#L126.

Screenshot 2024-07-29 at 2 34 16 PM
Screenshot 2024-07-29 at 2 35 10 PM

Chips has interactive icons buttons or the chip itself is interactive, it should also have a touch target of at least 48x48px to be more accessible

### Reproduction

https://material.angular.io/components/chips/examples

### Expected Behavior

Touch targets of at least 48x48px

### Actual Behavior

Smaller touch targets than 48x48px
Screenshot 2024-07-29 at 2 33 29 PM

### Environment

- Angular:
- CDK/Material:
- Browser(s):
- Operating System (e.g. Windows, macOS, Ubuntu):

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Beginne mit den Chips-Beispielen unter material.angular.io/components/chips/examples und vergleiche die Abmessungen ihrer interaktiven Chips und Icon-Buttons mit dem Zielwert von 48px. Lies anschließend die referenzierten Styles in src/material/button/_button-base.scss und finde dann die entsprechende Chips-Implementierung und die Tests; abgeschlossen ist die Aufgabe, wenn interaktive Chips und ihre Icons Touch-Ziele von mindestens 48x48px bereitstellen.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
angular, sass, typescript
Bereich
accessibility, frontend
Issue-Typ
Bug
Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
45/100

Neue Issues direkt in Ihr Postfach

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