Picker - do not ignore accessibility props (#2416)

* Picker - do not ignore accessibility props

* Destruct

Author: M-i-k-e-l

src/components/picker/helpers/usePickerLabel.tsx

@@ -2,12 +2,16 @@ import {useCallback, useMemo} from 'react';
 import _ from 'lodash';
 import {PickerProps, PickerValue} from '../types';
 
-interface UsePickerLabelProps extends Pick<PickerProps, 'value' | 'getLabel' | 'getItemLabel' | 'placeholder'> {
+interface UsePickerLabelProps
+  extends Pick<
+    PickerProps,
+    'value' | 'getLabel' | 'getItemLabel' | 'placeholder' | 'accessibilityLabel' | 'accessibilityHint'
+  > {
   items: {value: string | number; label: string}[] | null | undefined;
 }
 
 const usePickerLabel = (props: UsePickerLabelProps) => {
-  const {value, items, getLabel, getItemLabel, placeholder} = props;
+  const {value, items, getLabel, getItemLabel, placeholder, accessibilityLabel, accessibilityHint} = props;
 
   const getLabelsFromArray = useCallback((value: PickerValue) => {
     const itemsByValue = _.keyBy(items, 'value');
@@ -41,10 +45,12 @@ const usePickerLabel = (props: UsePickerLabelProps) => {
   const accessibilityInfo = useMemo(() => {
     const label = _getLabel(value);
     return {
-      accessibilityLabel: label ? `${placeholder}. selected. ${label}` : `Select ${placeholder}`,
-      accessibilityHint: label ? 'Double tap to edit' : `Goes to ${placeholder}. Suggestions will be provided`
+      accessibilityLabel:
+        accessibilityLabel ?? (label ? `${placeholder}. selected. ${label}` : `Select ${placeholder}`),
+      accessibilityHint:
+        accessibilityHint ?? (label ? 'Double tap to edit' : `Goes to ${placeholder}. Suggestions will be provided`)
     };
-  }, [value]);
+  }, [value, accessibilityLabel, accessibilityHint]);
 
   return {
     getLabelsFromArray,

src/components/picker/index.tsx

@@ -88,6 +88,8 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
     useSafeArea,
     migrate,
     migrateTextField,
+    accessibilityLabel,
+    accessibilityHint,
     ...others
   } = themeProps;
   const {preset} = others;
@@ -121,6 +123,8 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
     items,
     getItemLabel,
     getLabel,
+    accessibilityLabel,
+    accessibilityHint,
     placeholder: themeProps.placeholder
   });