callstack / callstack/react-native-paper

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

未关闭
#4,431 1 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看
Badge bug
主要语言
TypeScript
星标
14.5k
派生
2.2k
平均合并
5 天 23 小时
30 天内合并 PR
12

描述

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

贡献指南

打开贡献指南

调研方向

首先定位 Badge 组件及其现有的 fontScale 和 line-height 处理方式。在 Font Scale 设置为至少 1.5 的 iOS 上复现该问题,然后将 Badge 的渲染结果与 Android 进行比较。当在所述的大字体设置下,两个平台上的徽章数字都能保持可见时,即表示完成。

由索引模型根据 Issue 内容生成。

评估

技术栈
react-native, typescript
领域
accessibility, mobile
Issue 类型
缺陷
难度
3/5
预计耗时
1-2 天
活跃度
停滞
描述清晰度
基本清楚
新手友好度
42/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。