callstack / callstack/react-native-paper

A11y: Badge font-scaling handling doesn't work on iOS

Ouverte
#4,431 1 commentaire 0 réactions 0 personnes assignées Voir sur GitHub
Badge bug
Langage dominant
TypeScript
Étoiles
14.5k
Forks
2.2k
Merge moyen
5 j 23 h
PR mergées (30 j)
12

Description

### Current behaviour

The Badge component attemtps to account for font-scaling in badge text by adjusting line-height. This works (at least at font-scales <= 1.5, the max we allow on our app) on Android well, but not at all on iOS.

### Expected behaviour
Ideally the badge number would be visible on both Android and iOS.

### How to reproduce?

```tsx

{notificationsUnread.length}

```

Then, on iOS, under Accessibility -> Allow Large Fonts -> Font Scale, set it to large (>= 1.5).

### Preview
Android:
![image](https://github.com/callstack/react-native-paper/assets/35735666/feaa0b0c-aafa-4d8a-bd6f-72e89570ad5c)

iOS:
image

### What have you tried so far?

Tried adjusting `fontSize`, `height`, `width`, etc. by `fontScale`, which is already available in the component, which did not help; tried adjusting the line height (removing the `/ font scale`), which got closer; tried passing a `` child with `allowFontScaling={false}`, which, again, got closer.

### Your Environment

| software | version
| --------------------- | -------
| ios | latest
| android | x
| react-native | 0.73.6
| react-native-paper | 5.12.3
| node | x.x.x
| npm or yarn | x.x.x
| expo sdk | x.x.x

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Start by locating the Badge component and its existing fontScale and line-height handling. Reproduce the issue on iOS with Font Scale set to at least 1.5, then compare the Badge rendering with Android. Done means the badge number remains visible at the stated large-font setting on both platforms.

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

Évaluation

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

Recevez les nouvelles issues par e-mail

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