Support for accessibility Label prop to the Picker component (#27342)

Summary:
With a Picker we would like to allow accessibility labels to be passed as a prop for situations where we want go give more detail. For example if we have a number picker that will be used for a timer instead of just saying 3, we might want to say 3 hours.

## Changelog
[General] [Added] - Picker test with an accessibility label prop
[General] [Added] - Support for accessibility Label prop to the Picker component
Pull Request resolved: #27342

Test Plan: Test plan is testing in RNTester making sure the examples work

Differential Revision: D18770184

Pulled By: hramos

fbshipit-source-id: e6f8ab4a9c50f3fb46342198441ecc71394913d3

Author: KevinGVargas

Libraries/Components/Picker/Picker.js

@@ -106,6 +106,10 @@ type PickerProps = $ReadOnly<{|
    * Used to locate this view in end-to-end tests.
    */
   testID?: ?string,
+  /**
+   * The string used for the accessibility label. Will be read once focused on the picker but not on change.
+   */
+  accessibilityLabel?: ?string,
 |}>;
 
 /**

Libraries/Components/Picker/PickerIOS.ios.js

@@ -48,6 +48,7 @@ type Props = $ReadOnly<{|
   onChange?: ?(event: PickerIOSChangeEvent) => mixed,
   onValueChange?: ?(itemValue: string | number, itemIndex: number) => mixed,
   selectedValue: ?(number | string),
+  accessibilityLabel?: ?string,
 |}>;
 
 type State = {|
@@ -106,6 +107,7 @@ class PickerIOS extends React.Component<Props, State> {
           items={this.state.items}
           selectedIndex={this.state.selectedIndex}
           onChange={this._onChange}
+          accessibilityLabel={this.props.accessibilityLabel}
         />
       </View>
     );

Libraries/Components/Picker/RCTPickerNativeComponent.js

@@ -39,6 +39,7 @@ type NativeProps = $ReadOnly<{|
   selectedIndex: number,
   style?: ?TextStyleProp,
   testID?: ?string,
+  accessibilityLabel?: ?string,
 |}>;
 
 type ComponentType = HostComponent<NativeProps>;

RNTester/js/examples/Picker/PickerExample.js

@@ -125,6 +125,25 @@ class ColorPickerExample extends React.Component<{...}, ColorState> {
     );
   }
 }
+class AccessibilityLabelPickerExample extends React.Component<{}, State> {
+  state: State = {
+    value: '3',
+  };
+
+  render(): React.Node {
+    return (
+      <Picker
+        accessibilityLabel={this.state.value + 'Hours'}
+        style={styles.picker}
+        selectedValue={this.state.value}
+        onValueChange={v => this.setState({value: v})}>
+        <Item label="1" value="1" />
+        <Item label="2" value="2" />
+        <Item label="3" value="3" />
+      </Picker>
+    );
+  }
+}
 
 const styles = StyleSheet.create({
   picker: {
@@ -160,6 +179,12 @@ exports.examples = [
       return <PromptPickerExample />;
     },
   },
+  {
+    title: 'Accessibility Label pickers',
+    render: function(): React.Element<typeof AccessibilityLabelPickerExample> {
+      return <AccessibilityLabelPickerExample />;
+    },
+  },
   {
     title: 'Picker with no listener',
     render: function(): React.Element<typeof PromptPickerExample> {
@@ -186,4 +211,10 @@ exports.examples = [
       return <ColorPickerExample />;
     },
   },
+  {
+    title: 'AccessibilityLabel pickers',
+    render: function(): React.Element<typeof AccessibilityLabelPickerExample> {
+      return <AccessibilityLabelPickerExample />;
+    },
+  },
 ];

React/Views/RCTPicker.m

@@ -10,7 +10,7 @@
 #import "RCTConvert.h"
 #import "RCTUtils.h"
 
-@interface RCTPicker() <UIPickerViewDataSource, UIPickerViewDelegate>
+@interface RCTPicker() <UIPickerViewDataSource, UIPickerViewDelegate, UIPickerViewAccessibilityDelegate>
 @end
 
 @implementation RCTPicker
@@ -109,4 +109,10 @@ - (void)pickerView:(__unused UIPickerView *)pickerView
   }
 }
 
+#pragma mark - UIPickerViewAccessibilityDelegate protocol
+
+- (NSString *)pickerView:(UIPickerView *)pickerView accessibilityLabelForComponent:(NSInteger)component{
+    return super.accessibilityLabel;
+}
+
 @end

React/Views/RCTPickerManager.m

@@ -23,6 +23,7 @@ - (UIView *)view
 
 RCT_EXPORT_VIEW_PROPERTY(items, NSArray<NSDictionary *>)
 RCT_EXPORT_VIEW_PROPERTY(selectedIndex, NSInteger)
+RCT_REMAP_VIEW_PROPERTY(accessibilityLabel, reactAccessibilityElement.accessibilityLabel, NSString)
 RCT_EXPORT_VIEW_PROPERTY(onChange, RCTBubblingEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(color, UIColor)
 RCT_EXPORT_VIEW_PROPERTY(textAlign, NSTextAlignment)