Description
Description
Based on WCAG criteria, resizing visually rendered text up to 200 percent should not cause the text, image or controls to be clipped, truncated or obscured. The label rendered in Picker.Item gets truncated with ellipses, preventing the component from becoming WCAG compliant.
Related to
- Components
- Demo
- Docs
- Typings
Steps to reproduce
Expected behavior
When a user increases the font scale on their phone, our app reflects the change. Picker.Item should wrap the label into multiple lines to accommodate the larger font scale and display the full text.
Actual behavior
However, Picker.Item truncates the text with ellipses, making the full text unreadable because numberOfLines is set to 1 and a fixed height is applied to the text container. PickerItem.tsx
More Info
I can open a PR to remove numberOfLines from Text and the height from the container style based on the font scale, or remove them entirely if agreed upon.
Code snippet
Screenshots/Video
Screenshots can be seen in the sections above.
Environment
Independent from library version but
- React Native version: 0.75.4
- React Native UI Lib version: 6.27.2
Affected platforms
- Android
- iOS
- Web