Merge pull request #20251 from robertKozik/17047-migrate-PressableWit…

…hSecondaryInteraction 17047 migrate PressableWithSecondaryInteraction to PressableWithFeedback component
Expensify · Jun 22, 2023 · a777544 · a777544
2 parents 91bbba6 + 4572235
commit a777544
Show file tree

Hide file tree

Showing 8 changed files with 34 additions and 21 deletions.
diff --git a/src/CONST.js b/src/CONST.js
@@ -2506,6 +2506,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;
diff --git a/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js b/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js
@@ -14,6 +14,7 @@ import styles from '../../styles/styles';
 import * as StyleUtils from '../../styles/StyleUtils';
 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 */
@@ -66,6 +67,8 @@ function BaseAnchorForCommentsOnly(props) {
             onPress={linkProps.onPress}
             onPressIn={props.onPressIn}
             onPressOut={props.onPressOut}
+            accessibilityRole={CONST.ACCESSIBILITY_ROLE.LINK}
+            accessibilityLabel={props.href}
         >
             <Tooltip text={props.href}>
                 <Text

diff --git a/src/components/LHNOptionsList/OptionRowLHN.js b/src/components/LHNOptionsList/OptionRowLHN.js
@@ -142,11 +142,10 @@ function 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}
-                        >
+                        <View style={sidebarInnerRowStyle}>
                             <View style={[styles.flexRow, styles.alignItemsCenter]}>
                                 {!_.isEmpty(optionItem.icons) &&
                                     (optionItem.shouldShowSubscript ? (

diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js
@@ -122,6 +122,8 @@ function MenuItem(props) {
             ]}
             disabled={props.disabled}
             ref={props.forwardedRef}
+            accessibilityRole={CONST.ACCESSIBILITY_ROLE.MENUITEM}
+            accessibilityLabel={props.title}
         >
             {({hovered, pressed}) => (
                 <>

diff --git a/src/components/PressableWithSecondaryInteraction/index.js b/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,10 +76,11 @@ 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
+                wrapperStyle={StyleUtils.combineStyles(DeviceCapabilities.canUseTouchScreen() ? [styles.userSelectNone, styles.noSelect] : [])}
                 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)}
@@ -88,7 +89,7 @@ class PressableWithSecondaryInteraction extends Component {
                 style={(state) => [StyleUtils.parseStyleFromFunction(this.props.style, state), ...[this.props.inline && styles.dInline]]}
             >
                 {this.props.children}
-            </Pressable>
+            </PressableWithFeedback>
         );
     }
 }

diff --git a/src/components/PressableWithSecondaryInteraction/index.native.js b/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';
  */
 function 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')}
         >

diff --git a/src/components/Reactions/EmojiReactionBubble.js b/src/components/Reactions/EmojiReactionBubble.js
@@ -6,6 +6,7 @@ import * as StyleUtils from '../../styles/StyleUtils';
 import PressableWithSecondaryInteraction from '../PressableWithSecondaryInteraction';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../withWindowDimensions';
 import {withCurrentUserPersonalDetailsDefaultProps} from '../withCurrentUserPersonalDetails';
+import CONST from '../../CONST';
 
 const propTypes = {
     /**
@@ -59,6 +60,8 @@ function EmojiReactionBubble(props) {
             enableLongPressWithHover={props.isSmallScreenWidth}
             // Prevent text input blur when emoji reaction is clicked
             onMouseDown={(e) => e.preventDefault()}
+            accessibilityRole={CONST.ACCESSIBILITY_ROLE.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>}

diff --git a/src/pages/home/report/ReportActionItem.js b/src/pages/home/report/ReportActionItem.js
@@ -452,10 +452,11 @@ function ReportActionItem(props) {
             onSecondaryInteraction={showPopover}
             preventDefaultContextMenu={!props.draftMessage && !hasErrors}
             withoutFocusOnSecondaryInteraction
+            accessibilityLabel={props.translate('accessibilityHints.chatMessage')}
         >
             <Hoverable disabled={Boolean(props.draftMessage)}>
                 {(hovered) => (
-                    <View accessibilityLabel={props.translate('accessibilityHints.chatMessage')}>
+                    <View>
                         {props.shouldDisplayNewMarker && <UnreadActionIndicator reportActionID={props.action.reportActionID} />}
                         <MiniReportActionContextMenu
                             reportID={props.report.reportID}