angular / angular/components

bug(badge): Badge doesn't react to the browser font size

Offen
#27,828 2 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
Accessibility area: material/badge 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

When you change the size of the font through the browser settings. The badges remain the same size.

Comparison images:
small
![image](https://github.com/angular/components/assets/3356843/68ca940f-049e-40c7-8a8e-a69e115ba2e1)
large
![image](https://github.com/angular/components/assets/3356843/1381910a-5658-4626-b995-767a6c5f7db1)
chrome option
![image](https://github.com/angular/components/assets/3356843/1b3f7e7d-b571-4fc4-82f2-f028b1858d7d)

### Reproduction

Steps to reproduce:
1. Go in the Chrome options
2. Search for "Font size"
3. Set to "Very small"
4. Go on https://material.angular.io/components/badge/overview
5. Now change to "Very large"
6. Compare again on the doc page

### Expected Behavior

I have a feeling the badges should follow the size of the font.

### Actual Behavior

Badges font remain unchanged between very small or very large font option.

### Environment

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

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Reproduziere das Problem zunächst in der Material-Badge-Übersicht unter material.angular.io/components/badge/overview, indem du in Chrome die Einstellung für die Schriftgröße verwendest und „Sehr klein“ mit „Sehr groß“ vergleichst. Fertig ist die Aufgabe, wenn Schriftart und Größe des Badges konsistent auf Änderungen der Browser-Schriftgröße reagieren und das Verhalten mit beiden Einstellungen überprüft wurde.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
angular, 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
35/100

Neue Issues direkt in Ihr Postfach

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