importantForAccessibility=Yes set on parent view has no effect on iOS

[qchen-ms]

This is an iOS only issue and works fine on Android.

I have a view component like so:

<RX.View 
    importantForAccessibility={RX.Types.ImportantForAccessibility.Yes} 
    accessibilityLabel={"accessibility label"}>
  <RX.Text 
  importantForAccessibility={RX.Types.ImportantForAccessibility.NoHideDescendants} >text 1</RX.Text>
  <RX.Text 
  importantForAccessibility={RX.Types.ImportantForAccessibility.NoHideDescendants} >text 2</RX.Text>
</RX.View>

The expected behavior should be "accessibility label" gets read out from screen reader. However, on iOS, only "text 1" and "text 2" can be read out.

[erictraut]

@mshoho, any thoughts about this one?

[mshoho]

importantForAccessibility is an Android-only property in mobile RN (https://facebook.github.io/react-native/docs/accessibility.html#importantforaccessibility-android). And currently RX on mobile just passes the props to RN (on web we try map importantForAccessibility to aria-hidden).

I currently have web on top of my mind and will try to test this one later (it's been delayed by various things, but I'm pretty close to returning to the accessibility API refactoring). And I suppose that adding some accessibilityTrait (for example, button — depends on the actual use case) and/or touch handler to the View might help.

There is also one RN accessibility property missing in the current set of RX props — https://facebook.github.io/react-native/docs/accessibility.html#accessible-ios-android — the example there is exactly the same as the example above.

So, we can temporarily add one more platform-dependent property to current RX API, while new API is in progress. It also might make sense to reflect which accessibility properties are applicable to which platforms. But if it's not a critical issue with no workaround (which I doubt given the above info), I would rather wait for the new API.

[qchen-ms]

Hey @mshoho,

Do you have an ETA on when the new API will be available? This isn't a pressing issue on our side yet. I haven't found a workaround using RX (tried adding trait, wasn't successful) and don't want to introduce platform specific throwaway RN code especially if a new API will come up in time :)

Thanks,
Chen

[rigdern]

I work on @mshoho's team. Let me provide more information about how we're using ReactXP's accessibility API so you can better understand its design.

In Skype, we've made some modifications to React Native's accessibility implementation. We want to contribute our changes upstream but we have to do more work first to resolve inconsistencies in the implementation between iOS and Android. We don't have an ETA for when that will be finished. Here are some details on what we've done:

In the public React Native, importantForAccessibility is only supported on Android. We've ported this prop to iOS. We've also ported it to Windows and the Windows work is already publicly available.

We've deleted the accessibility prop because we've found that importantForAccessibility covers all scenarios covered by accessibility and then some.

[erictraut]

@rigdern, any update on this one? Has the PR been accepted into RN?

[rigdern]

The last time I spoke with @mshoho about this topic, the plan was to add additional iOS-only accessibility props to RN and then @mshoho was going to build a cross-platform accessibility API on top of this in RX. A new iOS-only accessibility prop was already merged into RN (accessibilityElementsHidden). @mshoho, do you have any updates on the execution of this plan?

…

________________________________ From: Eric Traut <notifications@github.com> Sent: Friday, September 7, 2018 7:58:29 PM To: Microsoft/reactxp Cc: Adam Comella; Mention Subject: Re: [Microsoft/reactxp] importantForAccessibility=Yes set on parent view has no effect on iOS (#586) @rigdern<https://github.com/rigdern>, any update on this one? Has the PR been accepted into RN? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<#586 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/AAMM_38FlYMOM58GbG1ZsCA2VOFIWqCSks5uYzJVgaJpZM4TEQKn>.

[mshoho]

Newer RN versions have accessibilityElementsHidden property which is iOS-only way to do importantForAccessibility=NoHideDescendants.

I am still in progress with the accessibility API refactoring which is going to help addressing the platform specific madness without polluting the global API with the platform-specific accessibility props. It takes longer than expected but the current plan (if nothing will blow up again) is to start testing it internally by the end of September. And then make a public PR.

[jessamp]

@rigdern you said that you've ported the importantForAccessibility prop to IOS. Do you mean that in this example:

<RX.View accessibilityElementsHidden={RX.Types.ImportantForAccessibility.Yes} >
  <RX.Text>text one</Text>
  <RX.Text>text two</Text>
</RX.View>

VoiceOver in IOS will read "Text one text two"? Or is that coming with the new API?

[rigdern]

@jessamp, in your example you're using the prop accessibilityElementsHidden rather than importantForAccessibility. I'm going to assume your question is about importantForAccessibility.

It's important to distinguish the public version of React Native from the private fork of React Native that Skype is currently using.

When building an app against the public version of React Native, importantForAccessibility doesn't do anything on iOS.

In Skype's private fork of React Native, we ported importantForAccessibility to iOS. In Skype's React Native fork, your example should behave the same way on iOS and Android.

We want to contribute a solution to this problem to Facebook's official public React Native repo. However, after thinking about the best way to do this, we decided to change our approach. Instead of adding an iOS implementation of importantForAccessibility, we will rely on iOS-specific React Native props like accessible and accessibilityElementsHidden. We (@mshoho) will change the implementation of ReactXP's accessibility API such that it'll consume these public iOS-only React Native accessibility props. As @mshoho mentioned in his latest post, he hopes to begin testing this solution internally at the end of September.

Does that answer your question?

[jessamp]

@rigdern yes it does. Thanks!

What do you mean by "ported importantForAccessibility to iOS"?

[rigdern]

@jessamp The public version of React Native has an importantForAccessibility prop that only works on Android. We looked at the contract that the importantForAccessibility props exposes to apps and then implemented this same contract on iOS.

[jessamp]

@mshoho are these changing going to utilize the new cross-platform accessibility features in RN 0.57?

[fbartho]

Happy to close this in favor of #1126!