callstack / callstack/react-native-paper
A11y: Badge font-scaling handling doesn't work on iOS
- Ngôn ngữ chính
- TypeScript
- Star
- 14.5k
- Fork
- 2.2k
- Merge trung bình
- 5 ngày 23 giờ
- Pull request đã merge (30 ngày)
- 12
Mô tả
### 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:

iOS:
### 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
Hướng dẫn đóng góp
Hướng nghiên cứu
Bắt đầu bằng cách xác định component Badge và cách xử lý hiện tại đối với fontScale và line-height. Tái hiện sự cố trên iOS với Font Scale được đặt ở mức ít nhất 1.5, sau đó so sánh cách Badge được render với Android. Hoàn thành có nghĩa là số trên badge vẫn hiển thị ở cài đặt phông chữ lớn đã nêu trên cả hai nền tảng.
Do mô hình lập chỉ mục viết ra từ nội dung của issue.
Đánh giá
- Công nghệ
- react-native, typescript
- Lĩnh vực
- accessibility, mobile
- Loại issue
- Lỗi
- Độ khó
- 3/5
- Thời gian dự kiến
- 1-2 ngày
- Mức độ hoạt động
- Đình trệ
- Độ rõ ràng
- Khá rõ ràng
- Mức phù hợp với người mới
- 42/100