react-native/Libraries/Text
Adam Comella 863f585be5 iOS: Improve accessibility of multiline TextInputs
Summary:
Fixes #13691.

Prior to this change, VoiceOver generally didn't say anything when selecting a multiline TextInput. The only exception was VoiceOver would announce the TextInput's placeholder if it had one set.

After this change, VoiceOver announces the following for multiline TextInputs:
  - The TextInput's content.
  - The TextInput's placeholder if the TextInput doesn't have any content in it.
  - The fact that the TextInput is a textfield.
  - The cursor position if the TextInput is being edited.

This is similar to the behavior of single line TextInputs.

This change achieves this by disabling `RCTTextView` as an accessibility element. `RCTTextView` is a subclass of `RCTView` so VoiceOver doesn't recognize this as a textfield. Instead, VoiceOver now sees the child `RCTUITextView` which is a subclass of `UITextView` so VoiceOver does recognize it as a textfield. Additionally, an `accessibilityLabel` implementation was added to `RCTUITextView` in order to take the value of the placeholder into account.

Verified the announcements of TextInputs with various props:
  - No placeholder and no content
  - Just a placeholder
  - Just content
  - Both a placeholder and content

Did this for both singe line inputs and multiline inputs. For setting content in multiline inputs, I tested both using the `value` prop and passing children. All other props being equal, these configurations resulted in similar announcements.

I verified that the following accessibility props work the same on singleline and multiline TextInputs:
  - `accessible`
  - `accessibilityLabel`
  - `accessibilityTraits`
  - `accessibilityViewIsModal`
  - `onAccessibilityTap`
  - `onMagicTap`

Additionally, my team has been using this change in our app.

Adam Comella
Microsoft Corp.
Closes https://github.com/facebook/react-native/pull/14200

Differential Revision: D5185727

Pulled By: shergin

fbshipit-source-id: 94271e6c8b089eb82006b52fe7917649d69e74af
2017-06-05 16:15:45 -07:00
..
RCTText.xcodeproj RCTTextField was spliited into two classes 2017-05-29 16:01:11 -07:00
RCTConvert+Text.h iOS: Introduce spellCheck prop to TextInput 2016-11-25 04:28:28 -08:00
RCTConvert+Text.m iOS: Introduce spellCheck prop to TextInput 2016-11-25 04:28:28 -08:00
RCTRawTextManager.h Move all header imports to "<React/..>" 2016-11-23 07:58:39 -08:00
RCTRawTextManager.m Revert D4538026: Stop allocating an RCTView for everying RCTRawText 2017-02-13 15:00:18 -08:00
RCTShadowRawText.h Move all header imports to "<React/..>" 2016-11-23 07:58:39 -08:00
RCTShadowRawText.m Move all header imports to "<React/..>" 2016-11-23 07:58:39 -08:00
RCTShadowText.h Move all header imports to "<React/..>" 2016-11-23 07:58:39 -08:00
RCTShadowText.m Several layout related helper methods of RCTShadowView was moved to new (+Layout) category. 2017-05-08 11:31:20 -07:00
RCTShadowTextField.h Better TextInput: RCTTextView and RCTTextField was marked as Yoga leaf nodes 2017-03-13 13:46:26 -07:00
RCTShadowTextField.m Better TextInput: RCTTextView and RCTTextField was marked as Yoga leaf nodes 2017-03-13 13:46:26 -07:00
RCTShadowTextView.h Better TextInput: RCTTextView and RCTTextField was marked as Yoga leaf nodes 2017-03-13 13:46:26 -07:00
RCTShadowTextView.m Better TextInput: RCTTextView and RCTTextField was marked as Yoga leaf nodes 2017-03-13 13:46:26 -07:00
RCTText.h Added support of `<Text>`'s `selectable` attribute on iOS 2016-11-17 16:13:28 -08:00
RCTText.m Fixed issue where the copy item would be added to the tooltips on the… 2017-04-27 15:50:15 -07:00
RCTTextField.h RCTTextField was spliited into two classes 2017-05-29 16:01:11 -07:00
RCTTextField.m Introducing `-[RCTView reactAccessibleView]` 2017-06-02 14:19:57 -07:00
RCTTextFieldManager.h Move all header imports to "<React/..>" 2016-11-23 07:58:39 -08:00
RCTTextFieldManager.m RCTTextField was spliited into two classes 2017-05-29 16:01:11 -07:00
RCTTextManager.h Move all header imports to "<React/..>" 2016-11-23 07:58:39 -08:00
RCTTextManager.m Several layout related helper methods of RCTShadowView was moved to new (+Layout) category. 2017-05-08 11:31:20 -07:00
RCTTextSelection.h Move all header imports to "<React/..>" 2016-11-23 07:58:39 -08:00
RCTTextSelection.m Add TextInput controlled selection prop on iOS 2016-08-25 17:28:37 -07:00
RCTTextView.h Multiline <TextInput> was fixed to match layout logic of singlelined one 2017-05-29 16:01:09 -07:00
RCTTextView.m Introducing `-[RCTView reactAccessibleView]` 2017-06-02 14:19:57 -07:00
RCTTextViewManager.h Move all header imports to "<React/..>" 2016-11-23 07:58:39 -08:00
RCTTextViewManager.m Multiline <TextInput> was fixed to match layout logic of singlelined one 2017-05-29 16:01:09 -07:00
RCTUITextField.h RCTTextField was spliited into two classes 2017-05-29 16:01:11 -07:00
RCTUITextField.m RCTTextField was spliited into two classes 2017-05-29 16:01:11 -07:00
RCTUITextView.h Better TextInput: RCTUITextView was decoupled in separate file and now handles placeholder feature 2017-03-20 00:02:58 -07:00
RCTUITextView.m iOS: Improve accessibility of multiline TextInputs 2017-06-05 16:15:45 -07:00
Text.js Update examples in docs and address version lag of CRNA 2017-05-16 23:51:28 -07:00
TextStylePropTypes.js <Text> Expose Android's includeFontPadding property to JavaScript. 2016-12-02 12:58:36 -08:00
TextUpdateTest.js Re-license and rename UIExplorer integration test app as RNTester 2017-05-08 11:31:19 -07:00