3

I was wondering if anyone has worked with this issue before.

Issue: I have a Custom Pressable Card Component (Wrapped over a TouchableOpacity) which would had other Views and Texts components along with another nested Touchable Opacity. The UI works for except when using VoiceOver.

What ends up happening is that the accessibility label on the parent takes over and the nested Text and View are merged together along with the button making it hard for blind users to distinguish the nested button.

I think it may be a design issue but wondering if there is a way of working around this.

using this photo as an example .

<TouchableOpacity accessibilityLabel= "User Profile Card">
  <Image accessibilityLabel= "User Profile Photo" />
  <Text>Beverly Little </Text>
  <Text>Javascript Developer</Text>
  <Text>Lorem Ipsum dolor sit amet....</Text>
</TouchableOpacity>

enter image description here

Jorde G
  • 51
  • 3
  • 1
    This is a similar problem to having nested interactive components on the web. This has to be solved in design + implementation. For eg, in this case, you can put accessible=false on parent, add the name (Beverly little) as accessible=true and the button is already accessible. When activated, the name should forward its touch handling to the parent touchable – gaurav5430 Jul 15 '22 at 08:25

0 Answers0