byRole queries don't find element that don't have an explicitly set accessibilityRole prop

Describe the bug

react-native built-in elements are not queriable with byRole queries if you don’t set the accessibilityRole prop.

Expected behaviour

byRole queries should be able to match some elements without accessibilityRole.

We however need to be conscious of what roles should be used to match what elements. My suggestion is checking each element with a voice-over and see what matches:

• should <Pressable /> be button by default?
• <TextInput /> will read Input on ios voiceover, but that is not an AccessibilityRole as exported by react-native.

We might need to think about types. The point raised in https://github.com/callstack/react-native-testing-library/pull/1127#discussion_r974160967 that suggests using TextMatch for the role will make it harder to discover those cases.

Steps to Reproduce

    Unable to find an element with accessibilityRole: image

      140 |     const { getByRole } = render(<Image />);
      141 |
    > 142 |     getByRole('image');
          |     ^
      143 |   });
      144 | });
      145 |

Versions

Latest.

[mdjastrzebski]

In order to have more concrete information about iOS/Android behaviour, I’ve stared doing experiments how different a11y props combinations affects behaviour of assistive tech on iOS and Android. I share initial findings in newly created wiki page. If you have time, please contribute your research for other component types (TextInput, Image, Pressable/TouchableXx, View, etc) there.

[mdjastrzebski]

I think we need to build some playground repos for native, so that we have easier job when examining these roles. For native we could build a sample Expo app and the test it using VoiceOver on iOS and TalkBack on Android. If I understand correctly these screen readers should announce roles for the elements.

It also seems that there are difference between RN Accessiblity Roles, ARIA roles, UIKit Accessibility Traits and Android where I could not find anything in the API resembling roles.

E.g. ARIA does not have a role for static text, iOS has staticText trait, and RN has text.

We should follow recent RN activity https://github.com/facebook/react-native/pull/34538, and base most of our decisions on ARIA roles, but also taking into account how screen readers act on iOS/Android.

Add role. https://github.com/facebook/react-native/pull/34538#issuecomment-1232918518 Alias for accessibilityRole but with full list of ARIA roles allowed. Map role=‘slider’ to accessibilityRole=‘adjustable’ Map role=‘img’ to accessibilityRole=‘image’ Map role=‘presentation’ to accessibilityRole=‘none’ Map role=‘summary’ to accessibilityRole=‘region’

This RN PR has mapping between ARIA and RN roles.