Merge pull request #19602 from robertKozik/17019-migrate-ReportAction…

…Compose Migrate ReportActionCompose to PressableWithFeedback
Expensify · Jun 13, 2023 · 14335e2 · 14335e2
2 parents 24945f2 + 0cce232
commit 14335e2
Showing 1 changed file with 18 additions and 16 deletions.
diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-// eslint-disable-next-line no-restricted-imports
-import {View, TouchableOpacity, InteractionManager, LayoutAnimation, NativeModules, findNodeHandle} from 'react-native';
+import {View, InteractionManager, LayoutAnimation, NativeModules, findNodeHandle} from 'react-native';
 import _ from 'underscore';
 import lodashGet from 'lodash/get';
 import {withOnyx} from 'react-native-onyx';
@@ -53,6 +52,7 @@ import * as Welcome from '../../../libs/actions/Welcome';
 import Permissions from '../../../libs/Permissions';
 import * as TaskUtils from '../../../libs/actions/Task';
 import * as Browser from '../../../libs/Browser';
+import PressableWithFeedback from '../../../components/Pressable/PressableWithFeedback';
 
 const propTypes = {
     /** Beta features list */
@@ -954,7 +954,7 @@ class ReportActionCompose extends React.Component {
                                                 >
                                                     {this.props.isComposerFullSize && (
                                                         <Tooltip text={this.props.translate('reportActionCompose.collapse')}>
-                                                            <TouchableOpacity
+                                                            <PressableWithFeedback
                                                                 onPress={(e) => {
                                                                     e.preventDefault();
                                                                     this.setShouldShowSuggestionMenuToFalse();
@@ -964,14 +964,16 @@ class ReportActionCompose extends React.Component {
                                                                 onMouseDown={(e) => e.preventDefault()}
                                                                 style={styles.composerSizeButton}
                                                                 disabled={isBlockedFromConcierge || this.props.disabled}
+                                                                accessibilityRole="button"
+                                                                accessibilityLabel={this.props.translate('reportActionCompose.collapse')}
                                                             >
                                                                 <Icon src={Expensicons.Collapse} />
-                                                            </TouchableOpacity>
+                                                            </PressableWithFeedback>
                                                         </Tooltip>
                                                     )}
                                                     {!this.props.isComposerFullSize && isFullComposerAvailable && (
                                                         <Tooltip text={this.props.translate('reportActionCompose.expand')}>
-                                                            <TouchableOpacity
+                                                            <PressableWithFeedback
                                                                 onPress={(e) => {
                                                                     e.preventDefault();
                                                                     this.setShouldShowSuggestionMenuToFalse();
@@ -981,13 +983,15 @@ class ReportActionCompose extends React.Component {
                                                                 onMouseDown={(e) => e.preventDefault()}
                                                                 style={styles.composerSizeButton}
                                                                 disabled={isBlockedFromConcierge || this.props.disabled}
+                                                                accessibilityRole="button"
+                                                                accessibilityLabel={this.props.translate('reportActionCompose.expand')}
                                                             >
                                                                 <Icon src={Expensicons.Expand} />
-                                                            </TouchableOpacity>
+                                                            </PressableWithFeedback>
                                                         </Tooltip>
                                                     )}
                                                     <Tooltip text={this.props.translate('reportActionCompose.addAction')}>
-                                                        <TouchableOpacity
+                                                        <PressableWithFeedback
                                                             ref={(el) => (this.actionButton = el)}
                                                             onPress={(e) => {
                                                                 e.preventDefault();
@@ -998,9 +1002,11 @@ class ReportActionCompose extends React.Component {
                                                             }}
                                                             style={styles.composerSizeButton}
                                                             disabled={isBlockedFromConcierge || this.props.disabled}
+                                                            accessibilityRole="button"
+                                                            accessibilityLabel={this.props.translate('reportActionCompose.addAction')}
                                                         >
                                                             <Icon src={Expensicons.Plus} />
-                                                        </TouchableOpacity>
+                                                        </PressableWithFeedback>
                                                     </Tooltip>
                                                 </View>
                                                 <PopoverMenu
@@ -1121,22 +1127,18 @@ class ReportActionCompose extends React.Component {
                             onMouseDown={(e) => e.preventDefault()}
                         >
                             <Tooltip text={this.props.translate('common.send')}>
-                                <TouchableOpacity
+                                <PressableWithFeedback
                                     style={[styles.chatItemSubmitButton, this.state.isCommentEmpty || hasExceededMaxCommentLength ? undefined : styles.buttonSuccess]}
                                     onPress={this.submitForm}
                                     disabled={this.state.isCommentEmpty || isBlockedFromConcierge || this.props.disabled || hasExceededMaxCommentLength}
-                                    hitSlop={{
-                                        top: 3,
-                                        right: 3,
-                                        bottom: 3,
-                                        left: 3,
-                                    }}
+                                    accessibilityRole="button"
+                                    accessibilityLabel={this.props.translate('common.send')}
                                 >
                                     <Icon
                                         src={Expensicons.Send}
                                         fill={this.state.isCommentEmpty || hasExceededMaxCommentLength ? themeColors.icon : themeColors.textLight}
                                     />
-                                </TouchableOpacity>
+                                </PressableWithFeedback>
                             </Tooltip>
                         </View>
                     </View>