Child components of SafeAreaView not detected by accessibility framework

[kashishgrover]

The Problem

Child component of a certain SafeAreaView is not being picked up by the Accessibility Inspector, and in turn by Appium.

Appium issue: https://github.com/appium/appium/issues/14602 Similar Stack Overflow issue: https://stackoverflow.com/questions/57820250/safeareaview-doesnt-let-appium-find-accessibility-id-of-children-views-on-react

Details

My use case demands me to to use the SafeAreaView for an animated bottom sheet component which I have implemented. The skeleton code looks somewhat like this:

import React from 'react';
import {
  SafeAreaView,
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
} from 'react-native';

const BottomSheet = (props) => {
  return (
    <SafeAreaView>
      <View style={styles.bottomSheet}>{props.children}</View>
    </SafeAreaView>
  );
};

const App = () => {
  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.content}>
        <Text>Some content</Text>
      </View>
      <BottomSheet>
        <TouchableOpacity
          style={styles.button}
          testID="button-test-id" // Not detected
          accessibilityLabel="button-test-id" // Not detected
        >
          <Text>Button</Text>
        </TouchableOpacity>
      </BottomSheet>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  content: {
    backgroundColor: 'orange',
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    padding: 32,
  },
  bottomSheet: {
    backgroundColor: 'blue',
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
    paddingVertical: 8,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
  button: {
    backgroundColor: 'white',
    paddingVertical: 16,
    paddingHorizontal: 32,
    alignItems: 'center',
    borderRadius: 50,
  },
});

export default App;

Screenshots

Accessibility Inspector -- Button not detected when SafeAreaView is present in the BottomSheet

Accessibility Inspector -- Button detected when no SafeAreaView in BottomSheet

Appium.app

Environment:

System:
    OS: macOS 10.15.5
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 288.34 MB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 14.5.0 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.6 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.9.1 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 13.6, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
    Android SDK: Not Found
  IDEs:
    Android Studio: 3.6 AI-192.7142.36.36.6392135
    Xcode: 11.6/11E708 - /usr/bin/xcodebuild
  Languages:
    Java: 13.0.2 - /usr/bin/javac
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.13.1 => 16.13.1 
    react-native: 0.63.0 => 0.63.0 
  npmGlobalPackages:
    *react-native*: Not Found

[JLOUIS3434343443]

hello im facing same issue any news from your side?

[JulianOrozcoC]

Hi, I'm facing the same issue! Any news?

[nethergrim]

We've got the same issue

[AdamBowler]

I'm getting this issue too, anyone found a workaround?

[bbkillen]

I''m getting this issue also

[sirajtahrawashmen]

I am also getting same issue

[ashwajeet24]

any solution , getting same issue

[WannaBeDream]

We've got the same issue

[JaapWeijland]

I think its due to the fact the the BottomSheet is positioned absolutely. I have the same problem With react navigation and absolute positioned headers.

[ijhar-nivoda]

any solution , getting same issue

[fabOnReact]

I could reproduce it using the Accessibility Inspector, but not using VoiceOver on a real device. I modified the example below to reproduce your scenario. Thanks

https://www.icloud.com/iclouddrive/058DYalQMfMD_rODqfnGn2owg#testing_voiceover_with_safeareaview

@aliossam

[robergwillian]

any update on this issue? I'm working with a RN app and Appium and cant access anything inside the SafeAreaView.

[AdamBowler]

@fabriziobertoglio1987 have you found any solutions or work around?

[anaelmashinsky]

any updates? having the same issue

[cport93]

I have the same issue with this...I can't get access from anything inside of SafeAreaView

[moygoca1]

We are experiencing same issue anything inside SafeAreaView is not being picked up by the Accessibility Inspector, this issue is only happening for IOS.

[andrii-rymar]

For me it's not only for iOS but for Android as well. Button and TouchableOpacity are not visible in Appium if wrapped inside SafeAreaView.

[github-actions[bot]]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[diarshabani]

Still experiencing this issue.

[github-actions[bot]]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions[bot]]

This issue was closed because it has been stalled for 7 days with no activity.