17047 migrate PressableWithSecondaryInteraction to PressableWithFeedback component

src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js

@@ -60,12 +60,13 @@ const BaseAnchorForCommentsOnly = (props) => {
             onPress={linkProps.onPress}
             onPressIn={props.onPressIn}
             onPressOut={props.onPressOut}
+            accessibilityRole="link"
+            accessibilityLabel={props.href}
         >
             <Tooltip text={props.href}>
                 <Text
                     ref={(el) => (linkRef = el)}
                     style={StyleSheet.flatten([props.style, defaultTextStyle])}
-                    accessibilityRole="link"
                     hrefAttrs={{
                         rel: props.rel,
                         target: isEmail ? '_self' : props.target,

src/components/LHNOptionsList/OptionRowLHN.js

@@ -144,10 +144,12 @@ const OptionRowLHN = (props) => {
                             props.isFocused ? styles.sidebarLinkActive : null,
                             hovered && !props.isFocused ? props.hoverStyle : null,
                         ]}
+                        accessibilityRole="button"
+                        accessibilityLabel={props.translate('accessibilityHints.navigatesToChat')}
                     >
                         <View
-                            accessibilityHint={props.translate('accessibilityHints.navigatesToChat')}
                             style={sidebarInnerRowStyle}
+                            accessibilityHint={props.translate('accessibilityHints.navigatesToChat')}
                         >
                             <View style={[styles.flexRow, styles.alignItemsCenter]}>
                                 {!_.isEmpty(optionItem.icons) &&

src/components/MenuItem.js

@@ -122,6 +122,8 @@ const MenuItem = (props) => {
             ]}
             disabled={props.disabled}
             ref={props.forwardedRef}
+            accessibilityRole="menuitem"
+            accessibilityLabel={props.title}
         >
             {({hovered, pressed}) => (
                 <>

src/components/PressableWithSecondaryInteraction/index.js

@@ -1,10 +1,10 @@
 import _ from 'underscore';
 import React, {Component} from 'react';
-import {Pressable} from 'react-native';
 import * as pressableWithSecondaryInteractionPropTypes from './pressableWithSecondaryInteractionPropTypes';
 import styles from '../../styles/styles';
 import * as DeviceCapabilities from '../../libs/DeviceCapabilities';
 import * as StyleUtils from '../../styles/StyleUtils';
+import PressableWithFeedback from '../Pressable/PressableWithFeedback';
 
 /**
  * This is a special Pressable that calls onSecondaryInteraction when LongPressed, or right-clicked.
@@ -76,19 +76,19 @@ class PressableWithSecondaryInteraction extends Component {
 
         // On Web, Text does not support LongPress events thus manage inline mode with styling instead of using Text.
         return (
-            <Pressable
+            <PressableWithFeedback
                 style={StyleUtils.combineStyles(this.props.inline ? styles.dInline : this.props.style)}
                 onPressIn={this.props.onPressIn}
                 onLongPress={this.props.onSecondaryInteraction ? this.executeSecondaryInteraction : undefined}
-                activeOpacity={this.props.activeOpacity}
+                pressDimmingValue={this.props.activeOpacity}
                 onPressOut={this.props.onPressOut}
                 onPress={this.props.onPress}
                 ref={(el) => (this.pressableRef = el)}
                 // eslint-disable-next-line react/jsx-props-no-spreading
                 {...defaultPressableProps}
             >
                 {this.props.children}
-            </Pressable>
+            </PressableWithFeedback>
         );
     }
 }

src/components/PressableWithSecondaryInteraction/index.native.js

@@ -1,9 +1,8 @@
 import _ from 'underscore';
 import React, {forwardRef} from 'react';
-import {Pressable} from 'react-native';
 import * as pressableWithSecondaryInteractionPropTypes from './pressableWithSecondaryInteractionPropTypes';
 import Text from '../Text';
-import HapticFeedback from '../../libs/HapticFeedback';
+import PressableWithFeedback from '../Pressable/PressableWithFeedback';
 
 /**
  * This is a special Pressable that calls onSecondaryInteraction when LongPressed.
@@ -13,22 +12,20 @@ import HapticFeedback from '../../libs/HapticFeedback';
  */
 const PressableWithSecondaryInteraction = (props) => {
     // Use Text node for inline mode to prevent content overflow.
-    const Node = props.inline ? Text : Pressable;
+    const Node = props.inline ? Text : PressableWithFeedback;
+    const executeSecondaryInteraction = (e) => {
+        e.preventDefault();
+        props.onSecondaryInteraction(e);
+    };
+
     return (
         <Node
             ref={props.forwardedRef}
             onPress={props.onPress}
-            onLongPress={(e) => {
-                if (!props.onSecondaryInteraction) {
-                    return;
-                }
-                e.preventDefault();
-                HapticFeedback.longPress();
-                props.onSecondaryInteraction(e);
-            }}
+            onLongPress={props.onSecondaryInteraction ? executeSecondaryInteraction : undefined}
             onPressIn={props.onPressIn}
             onPressOut={props.onPressOut}
-            activeOpacity={props.activeOpacity}
+            pressDimmingValue={props.activeOpacity}
             // eslint-disable-next-line react/jsx-props-no-spreading
             {..._.omit(props, 'onLongPress')}
         >

src/components/Reactions/EmojiReactionBubble.js

@@ -58,6 +58,8 @@ const EmojiReactionBubble = (props) => (
         enableLongPressWithHover={props.isSmallScreenWidth}
         // Prevent text input blur when emoji reaction is clicked
         onMouseDown={(e) => e.preventDefault()}
+        accessibilityRole="button"
+        accessibilityLabel={props.emojiCodes.join('')}
     >
         <Text style={[styles.emojiReactionBubbleText, styles.userSelectNone, StyleUtils.getEmojiReactionBubbleTextStyle(props.isContextMenu)]}>{props.emojiCodes.join('')}</Text>
         {props.count > 0 && <Text style={[styles.reactionCounterText, styles.userSelectNone, StyleUtils.getEmojiReactionCounterTextStyle(props.hasUserReacted)]}>{props.count}</Text>}

src/libs/ReportUtils.js

@@ -241,7 +241,7 @@ function canDeleteReportAction(reportAction, reportID) {
         return true;
     }
     const report = lodashGet(allReports, `${ONYXKEYS.COLLECTION.REPORT}${reportID}`, {});
-    const policy = lodashGet(allPolicies, `${ONYXKEYS.COLLECTION.POLICY}${report.policyID}`, {});
+    const policy = lodashGet(allPolicies, `${ONYXKEYS.COLLECTION.POLICY}${report.policyID}`) || {};
     return policy.role === CONST.POLICY.ROLE.ADMIN;
 }