Picker - useWheelPicker fix accessibility (#3696)

Author: M-i-k-e-l

src/components/WheelPicker/Item.tsx

@@ -25,6 +25,7 @@ interface InternalProps<T> extends WheelPickerItemProps<T> {
   inactiveColor?: string;
   style?: TextStyle;
   onSelect: (index: number) => void;
+  onPress?: () => void;
   centerH?: boolean;
   fakeLabel?: string;
   fakeLabelStyle?: TextStyle;
@@ -42,6 +43,7 @@ const WheelPickerItem = <T extends WheelPickerItemValue = number>(props: Interna
     fakeLabelProps,
     itemHeight,
     onSelect,
+    onPress,
     offset,
     activeColor = Colors.$textPrimary,
     inactiveColor = Colors.$textNeutralHeavy,
@@ -76,6 +78,11 @@ const WheelPickerItem = <T extends WheelPickerItemValue = number>(props: Interna
     return [animatedColorStyle, style, fakeLabel ? textWithLabelPaddingStyle : styles.textPadding];
   }, [style, fakeLabel, animatedColorStyle, textWithLabelPaddingStyle]);
 
+  const _onPress = useCallback(() => {
+    selectItem();
+    onPress?.();
+  }, [onPress, selectItem]);
+
   const _fakeLabelStyle = useMemo(() => StyleSheet.flatten([fakeLabelStyle, styles.hidden]), [fakeLabelStyle]);
   return (
     <AnimatedTouchableOpacity
@@ -86,7 +93,7 @@ const WheelPickerItem = <T extends WheelPickerItemValue = number>(props: Interna
       centerH={align ? align === WheelPickerAlign.CENTER : centerH}
       right={align ? align === WheelPickerAlign.RIGHT : !centerH}
       left={align === WheelPickerAlign.LEFT}
-      onPress={selectItem}
+      onPress={_onPress}
       // @ts-ignore reanimated2
       index={index}
       testID={testID}

src/components/picker/PickerItemsList.tsx

@@ -128,6 +128,10 @@ const PickerItemsList = (props: PickerItemsListProps) => {
     );
   };
 
+  const onDonePress = useCallback(() => {
+    context.onPress(wheelPickerValue);
+  }, [context.onPress, wheelPickerValue]);
+
   const renderPickerHeader = () => {
     const {cancelButtonProps, cancelLabel, doneLabel, title, titleStyle, containerStyle, onDone, onCancel} =
       topBarProps ?? {};
@@ -138,7 +142,14 @@ const PickerItemsList = (props: PickerItemsListProps) => {
         <View row spread padding-page style={containerStyle}>
           {(cancelButtonProps || cancelLabel) && renderCancel()}
           <Text style={titleStyle}>{title}</Text>
-          <Text text70 $textPrimary accessibilityRole={'button'} onPress={() => context.onPress(wheelPickerValue)}>
+          <Text
+            text70
+            $textPrimary
+            accessibilityElementsHidden={useWheelPicker}
+            importantForAccessibility={useWheelPicker ? 'no' : 'yes'}
+            accessibilityRole={'button'}
+            onPress={onDonePress}
+          >
             {doneLabel ?? 'Select'}
           </Text>
         </View>

src/components/picker/index.tsx

@@ -124,6 +124,14 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
     items
   });
 
+  const accessibleFilteredItems = useMemo(() => {
+    return filteredItems.map((item: PickerItemProps) => ({
+      ...item,
+      onPress:
+        useWheelPicker && Constants.accessibility.isScreenReaderEnabled ? () => onDoneSelecting(item.value) : undefined
+    }));
+  }, [useWheelPicker, filteredItems, onDoneSelecting]);
+
   const {label, accessibilityInfo} = usePickerLabel({
     value,
     items,
@@ -247,7 +255,7 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
         useWheelPicker={useWheelPicker}
         mode={mode}
         useDialog={useDialog}
-        items={useItems ? filteredItems : undefined}
+        items={useItems ? accessibleFilteredItems : undefined}
         topBarProps={{
           ...topBarProps,
           onCancel: cancelSelect,
@@ -266,7 +274,7 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
         renderCustomTopElement={renderCustomTopElement}
         selectionStatus={selectionStatus}
       >
-        {filteredItems}
+        {accessibleFilteredItems}
       </PickerItemsList>
     );
   }, [
@@ -285,7 +293,7 @@ const Picker = React.forwardRef((props: PickerProps, ref) => {
     renderCustomSearch,
     renderHeader,
     listProps,
-    filteredItems,
+    accessibleFilteredItems,
     useSafeArea,
     useWheelPicker,
     items,