Screen reader issues

Describe the bug

I was testing screen readers with the react-native-keyboard-controller changes to ensure it still worked, and realized v10 itself has some accessibility issues we need to fix.

A lot of this comes from the swap from DrawerLayout from react-native-gesture-handler to Drawer from react-navigation in https://github.com/infinitered/ignite/pull/2528. We shouldn't swap back to DrawerLayout: according to https://github.com/software-mansion/react-native-gesture-handler/issues/2414, this component hasn't been maintained and will likely continue to have issues due to the use of setNativeProps.

This means we'll need to either patch Drawer or find/build a replacement. I noticed the Drawer component is either at v4 or v7, and we're using v4, which makes me wonder if there might be updates for v7 that would be relevant to us

If building a replacement, DrawerLayout will still be a useful reference for which accessibility traits need managing, even if they do need to be set differently.

Ideally, we could also add tests to ensure the accessibility traits for the drawer are set correctly in the future.

List of issues I found follows, may not be exhaustive:

iOS

• Demo showroom issues
  • voiceover linear navigation goes through menu items when drawer isn’t open
  • once menu is open, can’t focus menu items without directly touching them, gets stuck on back button
  • can’t actually focus content on demoshowroom screen at all
• Navigating from Community → Podcast does not appropriately refocus cursor at top of screen
• podcast screen
  • double-tap and hold to favorite episode didn’t work
  • not all text content is read out on podcast cards

Android

• Says menu icon on drawer is unlabeled
• menu back button not focusable at all
• date and time labels on podcasts are not read out
• double-tap and hold does work here!

https://github.com/user-attachments/assets/29765bc9-09e6-4c21-be60-5968f8abf992

Ignite version

10

Additional info

n/a

Start by inspecting the current react-navigation Drawer usage and compare its accessibility behavior with the referenced react-native-gesture-handler DrawerLayout. Reproduce the listed VoiceOver and TalkBack issues in the demo showroom and podcast screens, then determine whether the drawer can be patched or needs replacement. Add accessibility-trait tests if the chosen approach makes that practical.