[iOS] TextInput clear button is not accessible

[haitaoli]

Is this a bug report?

Yes

Have you read the Contributing Guidelines?

Yes

Environment

Environment: OS: macOS High Sierra 10.13.1 Node: 6.12.0 Yarn: 1.3.2 npm: 5.5.1 Watchman: 4.7.0 Xcode: Xcode 9.1 Build version 9B55 Android Studio: 3.0 AI-171.4408382

Packages: (wanted => installed) react: 16.0.0-beta.5 => 16.0.0-beta.5 react-native: ^0.49.5 => 0.49.5

Target Platform: iOS (9)

Steps to Reproduce

https://snack.expo.io/S1EkFy5gG

1. Input any text for the clear button to appear.
2. Turn on Voice Over
3. Try to select the clear button.

Expected Behavior

"Clear" button can be selected and activated. iOS native text input control supports it.

Actual Behavior

Voice Over cannot focus on the "clear" button.

Reproducible Demo

https://snack.expo.io/S1EkFy5gG

[sasasa42]

Similarly, I am trying to automate using Appium to locate the clear button for my app, but I am not able to inspect it individually. I am not getting the control for it.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. If you think this issue should definitely remain open, please let us know why. Thank you for your contributions.

[sahrens]

Thanks for the clear bug - this is still an issue.

Looks like this is because we wrap the RCTTextInputView component in a TouchableWithoutFeedback. As a workaround, you can use RCTTextInputView directly (e.g. requireNativeComponent('RCTSinglelineTextInputView');)

This is part of a more general issue with nested accessibility support that will be tricky to solve: https://github.com/facebook/react-native/issues/24515