react-native-paper icon indicating copy to clipboard operation
react-native-paper copied to clipboard

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

Open meatnordrink opened this issue 1 year ago • 1 comments

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?

      <Badge
        >
        {notificationsUnread.length}
      </Badge>

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

Preview

Android: image

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

meatnordrink avatar Jun 11 '24 10:06 meatnordrink

Is there any movement on this? It's becoming an issue for anyone wanting to provide accessibility in ios

dpuckett avatar Aug 19 '25 08:08 dpuckett