feat: add accessibility Label props (#229)

example/src/PickerExample.tsx

@@ -10,7 +10,9 @@ function BasicPickerExample() {
     <Picker
       testID="basic-picker"
       selectedValue={value}
-      onValueChange={(v) => setValue(v)}>
+      onValueChange={(v) => setValue(v)}
+      accessibilityLabel="Basic Picker Accessibility Label"
+    >
       <Item label="hello" value="key0" />
       <Item label="world" value="key1" />
     </Picker>

js/Picker.js

@@ -115,6 +115,11 @@ type PickerProps = $ReadOnly<{|
    * @platform android
    */
   numberOfLines?: ?number,
+
+  /**
+   * The string used for the accessibility label. Will be read once focused on the picker but not on change.
+   */
+  accessibilityLabel?: ?string,
 |}>;
 
 /**

js/__tests__/Picker.test.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import {Platform} from 'react-native';
 import Picker from '../Picker';
 
@@ -7,5 +7,14 @@ describe('Picker', () => {
     Platform.OS = 'ios';
     expect(<Picker />).toMatchSnapshot();
   });
-  it('should render the Android native component', () => {});
+  it('should render the Android native component', () => {
+    Platform.OS = 'android';
+    expect(<Picker />).toMatchSnapshot();
+  });
+  it('should render component with accessibility label', () => {
+    Platform.OS = 'ios';
+    expect(
+      <Picker accessibilityLabel="Label for this picker" />,
+    ).toMatchSnapshot();
+  });
 });

js/__tests__/__snapshots__/Picker.test.js.snap

@@ -1,5 +1,18 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Picker should render component with accessibility label 1`] = `
+<Picker
+  accessibilityLabel="Label for this picker"
+  mode="dialog"
+/>
+`;
+
+exports[`Picker should render the Android native component 1`] = `
+<Picker
+  mode="dialog"
+/>
+`;
+
 exports[`Picker should render the iOS native component 1`] = `
 <Picker
   mode="dialog"

typings/Picker.d.ts

@@ -54,15 +54,22 @@ export interface PickerProps<T = ItemValue> extends ViewProps {
   testID?: string;
    /**
     * Color of arrow for spinner dropdown in hexadecimal format
+    * @platform android
     */
-   dropdownIconColor?: string;
+  dropdownIconColor?: string;
 
   /**
   * On Android, used to truncate the text with an ellipsis after computing the text layout, including line wrapping,
   * such that the total number of lines does not exceed this number. Default is '1'
   * @platform android
   */
-	numberOfLines?: number;
+  numberOfLines?: number;
+
+  /**
+   * The string used for the accessibility label. Will be read once focused on the picker but not on change.
+   */
+  accessibilityLabel?: string;
+
 }
 
 declare class Picker<T> extends React.Component<PickerProps<T>, {}> {