17037 — migrate BaseAutoCompleteSuggestions to PressableWithFeedback

src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.js

@@ -1,12 +1,12 @@
 import React, {useEffect} from 'react';
-import {Pressable} from 'react-native';
 import Animated, {Easing, FadeOutDown, useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
 // We take FlatList from this package to properly handle the scrolling of AutoCompleteSuggestions in chats since one scroll is nested inside another
 import {FlatList} from 'react-native-gesture-handler';
 import styles from '../../styles/styles';
 import * as StyleUtils from '../../styles/StyleUtils';
 import CONST from '../../CONST';
 import {propTypes} from './autoCompleteSuggestionsPropTypes';
+import PressableWithFeedback from '../Pressable/PressableWithFeedback';
 
 /**
  * @param {Number} numRows
@@ -34,14 +34,16 @@ const BaseAutoCompleteSuggestions = (props) => {
      * @returns {JSX.Element}
      */
     const renderSuggestionMenuItem = ({item, index}) => (
-        <Pressable
+        <PressableWithFeedback
             style={({hovered}) => StyleUtils.getAutoCompleteSuggestionItemStyle(props.highlightedSuggestionIndex, CONST.AUTO_COMPLETE_SUGGESTER.ITEM_HEIGHT, hovered, index)}
+            hoverDimmingValue={1}
             onMouseDown={(e) => e.preventDefault()}
             onPress={() => props.onSelect(index)}
             onLongPress={() => {}}
+            accessibilityLabel={props.accessibilityLabelExtractor(item, index)}
         >
             {props.renderSuggestionMenuItem(item, index)}
-        </Pressable>
+        </PressableWithFeedback>
     );
 
     const innerHeight = CONST.AUTO_COMPLETE_SUGGESTER.ITEM_HEIGHT * props.suggestions.length;

src/components/AutoCompleteSuggestions/autoCompleteSuggestionsPropTypes.js

@@ -24,6 +24,9 @@ const propTypes = {
 
     /** Show that we should include ReportRecipientLocalTime view height */
     shouldIncludeReportRecipientLocalTimeHeight: PropTypes.bool.isRequired,
+
+    /** create accessibility label for each item */
+    accessibilityLabelExtractor: PropTypes.func.isRequired,
 };
 
 const defaultProps = {};

src/components/EmojiSuggestions.js

@@ -94,6 +94,7 @@ const EmojiSuggestions = (props) => {
             onSelect={props.onSelect}
             isSuggestionPickerLarge={props.isEmojiPickerLarge}
             shouldIncludeReportRecipientLocalTimeHeight={props.shouldIncludeReportRecipientLocalTimeHeight}
+            accessibilityLabelExtractor={keyExtractor}
         />
     );
 };

src/components/MentionSuggestions.js

@@ -100,6 +100,7 @@ const MentionSuggestions = (props) => {
             onSelect={props.onSelect}
             isSuggestionPickerLarge={props.isMentionPickerLarge}
             shouldIncludeReportRecipientLocalTimeHeight={props.shouldIncludeReportRecipientLocalTimeHeight}
+            accessibilityLabelExtractor={keyExtractor}
         />
     );
 };