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

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.

Marat Abdullin (@mshoho)

Marat Abdullin (@mshoho), any thoughts about this one?

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.

Marat Abdullin (@mshoho)

Hey Marat Abdullin (@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

Marat Abdullin (@mshoho)

I work on Marat Abdullin (@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.

Adam Comella (@rigdern)

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

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

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.

Adam Comella (@rigdern)

Adam Comella (@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?

jessamp

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 (Marat Abdullin (@mshoho)) will change the implementation of ReactXP's accessibility API such that it'll consume these public iOS-only React Native accessibility props. As Marat Abdullin (@mshoho) mentioned in his latest post, he hopes to begin testing this solution internally at the end of September.

Does that answer your question?

Adam Comella (@rigdern)

Adam Comella (@rigdern) yes it does. Thanks!

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

jessamp

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.

Marat Abdullin (@mshoho)

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

Happy to close this in favor of #1126!

Navigation Menu

Repository navigation

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

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

Description

Activity

erictraut commented on Apr 3, 2018

mshoho commented on Apr 3, 2018

qchen-ms commented on Apr 3, 2018

rigdern commented on Apr 18, 2018

erictraut commented on Sep 8, 2018

rigdern commented on Sep 8, 2018

mshoho commented on Sep 8, 2018

jessamp commented on Sep 13, 2018

rigdern commented on Sep 17, 2018

jessamp commented on Sep 17, 2018

rigdern commented on Sep 17, 2018

jessamp commented on Sep 19, 2018

fbartho commented on Aug 9, 2020

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions