angular / angular/components

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

Ouverte
#27,828 2 commentaires 0 réactions 0 personnes assignées Voir sur GitHub
Accessibility area: material/badge P3
Langage dominant
TypeScript
Étoiles
25k
Forks
6.8k
Merge moyen
1 j 8 h
PR mergées (30 j)
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

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

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez par reproduire le problème sur la vue d’ensemble des badges Material à l’adresse material.angular.io/components/badge/overview, en utilisant le réglage de taille de police de Chrome et en comparant « Très petite » et « Très grande ». La tâche est terminée lorsque la police et la taille du badge réagissent de manière cohérente aux changements de taille de police du navigateur, et que le comportement a été vérifié avec les deux réglages.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
angular, typescript
Domaine
accessibility, frontend
Type d'issue
Bug
Difficulté
3/5
Temps estimé
1-2 jours
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
35/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.