callstack / callstack/react-native-paper

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

Abierto
#4,431 1 comentario 0 reacciones 0 asignados Ver en GitHub
Badge bug
Lenguaje dominante
TypeScript
Estrellas
14.5k
Forks
2.2k
Merge medio
5 d 23 h
PR fusionados (30 d)
12

Descripción

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

Guía de contribución

Abrir la guía de contribución

Evaluación

Este issue todavía no se ha evaluado.

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.