React-native-navigation: [v2][iOS] accessibilityLabel for TopBar Buttons

[karlsander]

Issue Description

TopBar buttons should either have their title or text set as an accessibilityLabel or provide an additional option for that label.

Sadly, I lack the Objective C skills to create the pull request myself. The button with icon is created here, I think another special case, like the disabled one here would be the right place to set the accessibilityLabel if either title, text or label is provided.

Improperly tabled buttons are probably the number 1 annoyance for VoiceOver users, so it would be great if RNN made it easy for developers to do right.

Steps to Reproduce / Code Snippets / Screenshots

1. Create a TopBar button with a button that has an icon, e.g.

Navigation.mergeOptions(this.props.componentId, {
  topBar: {
    rightButtons: [
      {
        title: "Einstellungen",
        icon: settingsIcon,
        id: "settings"
      }
    ]
  }
});

1. Install the application on a real device

2. Enable VoiceOver and navigate to the TopBar button.

3. "Button" and nothing else will be read out

---

Environment

• React Native Navigation version: 2.0.2428
• React Native version: 0.56
• Platform(s): iOS
• Device info (Simulator/Device? OS version? Debug/Release?): iPhone 6s, iOS 12, Release

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you believe the issue is still relevant, please test on the latest version and report back. Thank you for your contributions.

[stale[bot]]

The issue has been closed for inactivity.

[Ingibjorg]

@karlsander did you ever find a fix for this?

[ngvazquezbdsol]

@karlsander Hi, did you ever find a fix for this?

[karlsander]

No, my app is no longer using topbar buttons. Is this still a problem im the current version?

[chirag64]

Any chance anyone has a workaround for this? This still seems to be a problem in the current version & is causing accessibility issues for us in my team

[gran33]

You can add accessibilityLabel to the top bar buttons.