AccessibilityRole mapping limits for custom components across iOS and Android

Answer to the Core Question

For a React Native custom component that wraps several native views, the only accessibilityRole values that consistently translate to the same native semantics on both iOS and Android are the standard roles listed in the official RN documentation:

• button
• link
• search
• image
• header
• text
• slider
• switch
• checkbox
• radio
• progressbar
• spinbutton

All other strings are treated as undefined by the RN native modules. On iOS this results in the default UIAccessibilityTraitNone and on Android a generic AccessibilityNodeInfo with no role hint, so the screen reader will announce the component as an “unknown” element.

Effect of accessible on Role Precedence

When accessible={true} is set on a parent view:

• iOS and Android both flatten the child hierarchy into a single accessibility node.
• The accessibilityRole supplied on the parent is applied to that node on both platforms.
• Child roles are suppressed unless accessibilityElementsHidden={true} is also set, in which case the children remain in the tree but are hidden from the screen reader.

Without accessible={true}, each child retains its own node and its role is announced independently. The parent’s role does not override the children’s semantics.

Practical Verification Steps

1. Check the RN source for your version. Open AccessibilityRole.js (or the corresponding native module) in the react-native repo and locate the mapping tables for iOS and Android. Verify that the role you plan to use appears in both lists.
2. Run a minimal test component. Example:

   import {View, Text} from "react-native";
   
   export default () => (
     <View accessible={true} accessibilityRole="button">
       <Text>Submit</Text>
     </View>
   );
   

   • On iOS, enable VoiceOver and use the Accessibility Inspector to confirm the node is announced as a button and the child text is not read separately.
   • On Android, enable TalkBack and perform the same check.
3. Repeat the test with accessible={false} to observe that the child text is announced independently and the parent has no role.
4. For any non‑standard role you wish to use, replace the role string (e.g., "custom") and run the same checks. VoiceOver/TalkBack will usually announce it as “unknown” or “generic”.

Where to Find the Current Mapping

1. React Native Docs. The accessibilityRole page lists the supported values for the current release. 2. RN source. The mapping tables in AccessibilityRole.js (Android) and AccessibilityRole.swift (iOS) are the definitive reference. 3. Platform Accessibility Inspector. The VoiceOver Inspector (macOS) and Android Accessibility Scanner provide runtime visibility into the node’s traits and role hints.

Missing Diagnostic Detail

To give a more precise recommendation, could you confirm which React Native version (e.g., 0.73.4) and which iOS/Android OS builds you are targeting? The mapping tables can change between RN releases and OS updates.