17047 migrate PressableWithSecondaryInteraction to PressableWithFeedback component

src/CONST.js

@@ -2448,6 +2448,13 @@ const CONST = {
         EXPENSIFY_LOGO_SIZE_RATIO: 0.22,
         EXPENSIFY_LOGO_MARGIN_RATIO: 0.03,
     },
+    ACCESSIBILITY_ROLE: {
+        BUTTON: 'button',
+        LINK: 'link',
+        MENUITEM: 'menuitem',
+        TEXT: 'text',
+        RADIO: 'radio',
+    },
 };
 
 export default CONST;

src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js

@@ -13,6 +13,7 @@ import * as DeviceCapabilities from '../../libs/DeviceCapabilities';
 import styles from '../../styles/styles';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../withWindowDimensions';
 import {propTypes as anchorForCommentsOnlyPropTypes, defaultProps as anchorForCommentsOnlyDefaultProps} from './anchorForCommentsOnlyPropTypes';
+import CONST from '../../CONST';
 
 const propTypes = {
     /** Press in handler for the link */
@@ -65,6 +66,8 @@ const BaseAnchorForCommentsOnly = (props) => {
                 onPress={linkProps.onPress}
                 onPressIn={props.onPressIn}
                 onPressOut={props.onPressOut}
+                accessibilityRole={CONST.ACCESSIBILITY_ROLE.LINK}
+                accessibilityLabel={props.href}
             >
                 <Tooltip text={props.href}>
                     <Text

src/components/LHNOptionsList/OptionRowLHN.js

@@ -144,10 +144,12 @@ const OptionRowLHN = (props) => {
                             props.isFocused ? styles.sidebarLinkActive : null,
                             hovered && !props.isFocused ? props.hoverStyle : null,
                         ]}
+                        accessibilityRole={CONST.ACCESSIBILITY_ROLE.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={CONST.ACCESSIBILITY_ROLE.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>}