Add accessibilityHint and accessibilityLabel support to ButtonGroup buttons

[mitchdowney]

Is your feature request related to a problem? Please Describe.

Add accessibilityHint and accessibilityLabel support to ButtonGroup buttons. Currently when I try to pass in a custom button component like this to the ButtonGroup buttons prop:

const buttons = [
  (
    <Text
      accessibilityHint={translate('ARIA HINT - Tap to search by podcast title')}
      accessibilityLabel={translate('Search by podcast title')}>
      {translate('Podcast')}
    </Text>
  ),
  (
    <Text
      accessibilityHint={translate('ARIA HINT - Tap to search by podcast host')}
      accessibilityLabel={translate('Search by podcast title')}>
      {translate('Host')}
    </Text>
  )
]

Neither the accessibilityHint or accessibilityLabel are read. I think it may be because the ButtonGroup buttons are wrapped in their own <Touchable> that we cannot override or configure with props.

Describe the solution you'd like

When accessibilityHint and accessibilityLabel are provided for custom ButtonGroup buttons, they should be read by iOS and Android screen readers. This solution may require optionally overriding the <Touchable> wrapping the ButtonGroup buttons.

Describe alternatives you've considered

I can't think of another way to accomplish the same thing.

[ruiaraujolink]

I'm facing the same problem.

[ruiaraujolink]

@mitchdowney My workaround is this:

buttons={[
  <View accessibilityLabel='Ver gráfico' collapsable key='chart'>
    <FontAwesomeIcon
      color={selectedTabIndex === 0 ? theme.colors?.highlight : theme.colors?.primary}
      icon={faChartLine}
      size={20}
    />
  </View>,
  <View accessibilityLabel='Ver tabela' collapsable key='table'>
    <FontAwesomeIcon
      color={selectedTabIndex === 1 ? theme.colors?.highlight : theme.colors?.primary}
      icon={faTable}
      size={20}
    />
  </View>,
]}

Make a View collapsable enable me to put the accessibilityLabel and this approach allow me to pass the accessibility Scanner test on Android.

[mitchdowney]

@ruiaraujolink oh interesting, thanks for sharing.

Any idea why collapsable is needed here for Android only? How the heck did you figure that out? lol

Also, is it OK to keep this property on iOS too? It won't cause any conflicts?

[ruiaraujolink]

@mitchdowney Well on the last day I have tried many options to make this works because I'm working on an app for one public institute in Portugal and accessibility is needed.

After reading all properties of a View component, I decided to try the collapsable option, and then the problem was solved :D

I only have tried on Android with the Accessibility Scanner app. I have run some simple tests in IOS and have no issue, but not try the IOS accessibility scanner, only the click functions, and this has worked fine. (The release to App Store was delayed, so, I'm focusing on Android for now).

[kurisubrooks]

I'm having this problem on iOS and I've tried the above workarounds, but they're not working. When using VoiceOver on iOS with the above fixes, nothing is read-out. I've checked with Accessibility Inspector as well and the label is blank.

The only time its read-out is if I pass in an array of strings (instead of a basic component - example below), but this isn't sufficient as no "Button" role is attached to the item.

<View accessibilityLabel="Light" accessibilityRole="button">
  <Text>Light</Text>
</View>

I'd appreciate it if this issue could be a little higher priority as it completely breaks basic accessibility requirements.

[yndue736]

This is very impressive and also a useful idea you ca check little big city 2 where you can apply this kind of ideas and it will be a suitable choice for tis project.

[yndue736]

This is very amazing you can check here some information about chilli comms where you can get the right information about the issues of my problem.

[inbuilt-aura]

hey, @adrianPasalega,can I contribute to this project?plzz assign me

[arpitBhalla]

Go for it