[a11y] `role` prop not fully supported on React Native

[mdjastrzebski]

Describe the issue

React Native requires accessible={true} prop to be set on View elements to announce role prop. However, the accessible prop is not exposed by RSD.

The only way in where role works correctly in RN with RSD is:

1. Text elements behave as if accessible={true} by default
2. When using Pressable, it sets accessible={true} on the renderer View element. Using onPress handler with RSD triggers using Pressable instead of plain View.

These two cases are frequent enough that they avoid the problem in most cases, but unfortunately, not all.

A simple solution would be to have the role prop (perhaps excluding none/presentation) set accessible to true. However, that creates an issue in the iOS environment, which generally does not support nested accessibility elements. If there are two nested Views with accessible prop, only one is recognized (the ancestor one).

Expected behavior

There should be a way of controlling accessible prop. Perhaps a reasonable default would be to set it to true when role is not none/presentation. However, given the iOS issue described above, there should be a way to disable the status of accessibility element (on a parent), as it might prevent children from receiving a11y focus.

Steps to reproduce

1. Render <html.div role="heading"> element, without onClick handler.
2. Compare with the case when you set onClick handler, with renders accessible prop through Pressable component
3. Use a screen reader to navigate to the button
4. Role is not being announced

https://github.com/user-attachments/assets/be386fe5-3a61-46fb-bd3c-00659801e6df

Notice the header role announced on elements with accessible prop, and not announced otherwise.

Test case

https://github.com/mdjastrzebski/rsd-role-repro

Additional comments

No response

[necolas]

Thanks! The fix for nested accessible elements in iOS should probably live in React Native, since it sounds like the same problem can occur there

[mdjastrzebski]

The source of problem with nested accessibility elements is the default behavior of iOS API itself. There seems to be solution for that called Accessibility Containers (seems to be the same as recent accessibilityOrder prop in RN).