17046 — migrate PressableWithotFocus to GenericPressable

src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js

@@ -3,11 +3,14 @@ import htmlRendererPropTypes from './htmlRendererPropTypes';
 import AttachmentModal from '../../AttachmentModal';
 import styles from '../../../styles/styles';
 import ThumbnailImage from '../../ThumbnailImage';
-import PressableWithoutFocus from '../../PressableWithoutFocus';
+import PressableWithoutFocus from '../../Pressable/PressableWithoutFocus';
 import CONST from '../../../CONST';
 import {ShowContextMenuContext, showContextMenuForReport} from '../../ShowContextMenuContext';
 import tryResolveUrlFromApiRoot from '../../../libs/tryResolveUrlFromApiRoot';
 import * as ReportUtils from '../../../libs/ReportUtils';
+import withLocalize, {withLocalizePropTypes} from '../../withLocalize';
+
+const propTypes = {...htmlRendererPropTypes, ...withLocalizePropTypes};
 
 function ImageRenderer(props) {
     const htmlAttribs = props.tnode.attributes;
@@ -60,9 +63,11 @@ function ImageRenderer(props) {
                 >
                     {({show}) => (
                         <PressableWithoutFocus
-                            style={styles.noOutline}
+                            style={[styles.noOutline]}
                             onPress={show}
                             onLongPress={(event) => showContextMenuForReport(event, anchor, report.reportID, action, checkIfContextMenuActive, ReportUtils.isArchivedRoom(report))}
+                            accessibilityRole="imagebutton"
+                            accessibilityLabel={props.translate('accessibilityHints.viewAttachment')}
                         >
                             <ThumbnailImage
                                 previewSourceURL={previewSource}
@@ -79,7 +84,7 @@ function ImageRenderer(props) {
     );
 }
 
-ImageRenderer.propTypes = htmlRendererPropTypes;
+ImageRenderer.propTypes = propTypes;
 ImageRenderer.displayName = 'ImageRenderer';
 
-export default ImageRenderer;
+export default withLocalize(ImageRenderer);

src/components/Pressable/PressableWithFeedback.js

@@ -11,7 +11,7 @@ import * as StyleUtils from '../../styles/StyleUtils';
 const omittedProps = ['style', 'pressStyle', 'hoverStyle', 'focusStyle', 'wrapperStyle'];
 
 const PressableWithFeedbackPropTypes = {
-    ..._.omit(GenericPressablePropTypes.pressablePropTypes, omittedProps),
+    ...GenericPressablePropTypes.pressablePropTypes,
     /**
      * Determines what opacity value should be applied to the underlaying view when Pressable is pressed.
      * To disable dimming, pass 1 as pressDimmingValue
@@ -31,7 +31,7 @@ const PressableWithFeedbackPropTypes = {
 };
 
 const PressableWithFeedbackDefaultProps = {
-    ..._.omit(GenericPressablePropTypes.defaultProps, omittedProps),
+    ...GenericPressablePropTypes.defaultProps,
     pressDimmingValue: variables.pressDimValue,
     hoverDimmingValue: variables.hoverDimValue,
     nativeID: '',

src/components/PressableWithoutFocus.js → src/components/Pressable/PressableWithoutFocus.js

@@ -1,6 +1,8 @@
 import React from 'react';
-import {Pressable} from 'react-native';
+import _ from 'underscore';
 import PropTypes from 'prop-types';
+import GenericPressable from './GenericPressable';
+import genericPressablePropTypes from './GenericPressable/PropTypes';
 
 const propTypes = {
     /** Element that should be clickable  */
@@ -14,11 +16,14 @@ const propTypes = {
 
     /** Styles that should be passed to touchable container */
     // eslint-disable-next-line react/forbid-prop-types
-    styles: PropTypes.arrayOf(PropTypes.object),
+    style: PropTypes.arrayOf(PropTypes.object),
+
+    /** Proptypes of pressable component used for implementation */
+    ...genericPressablePropTypes.pressablePropTypes,
 };
 
 const defaultProps = {
-    styles: [],
+    style: [],
     onLongPress: undefined,
 };
 
@@ -41,15 +46,18 @@ class PressableWithoutFocus extends React.Component {
     }
 
     render() {
+        const restProps = _.omit(this.props, ['children', 'onPress', 'onLongPress', 'style']);
         return (
-            <Pressable
+            <GenericPressable
                 onPress={this.pressAndBlur}
                 onLongPress={this.props.onLongPress}
                 ref={(el) => (this.pressableRef = el)}
-                style={this.props.styles}
+                style={this.props.style}
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...restProps}
             >
                 {this.props.children}
-            </Pressable>
+            </GenericPressable>
         );
     }
 }

src/languages/en.js

@@ -1399,6 +1399,7 @@ export default {
         chatUserDisplayNames: 'Chat user display names',
         scrollToNewestMessages: 'Scroll to newest messages',
         prestyledText: 'Prestyled text',
+        viewAttachment: 'View attachment',
     },
     parentReportAction: {
         deletedMessage: '[Deleted message]',

src/languages/es.js

@@ -1865,6 +1865,7 @@ export default {
         chatUserDisplayNames: 'Nombres de los usuarios del chat',
         scrollToNewestMessages: 'Desplázate a los mensajes más recientes',
         prestyledText: 'texto preestilizado',
+        viewAttachment: 'Ver archivo adjunto',
     },
     parentReportAction: {
         deletedMessage: '[Mensaje eliminado]',

src/pages/DetailsPage.js

@@ -22,7 +22,7 @@ import * as ReportUtils from '../libs/ReportUtils';
 import * as Expensicons from '../components/Icon/Expensicons';
 import MenuItem from '../components/MenuItem';
 import AttachmentModal from '../components/AttachmentModal';
-import PressableWithoutFocus from '../components/PressableWithoutFocus';
+import PressableWithoutFocus from '../components/Pressable/PressableWithoutFocus';
 import * as Report from '../libs/actions/Report';
 import OfflineWithFeedback from '../components/OfflineWithFeedback';
 import AutoUpdateTime from '../components/AutoUpdateTime';

src/pages/ProfilePage.js

@@ -23,7 +23,7 @@ import * as ReportUtils from '../libs/ReportUtils';
 import * as Expensicons from '../components/Icon/Expensicons';
 import MenuItem from '../components/MenuItem';
 import AttachmentModal from '../components/AttachmentModal';
-import PressableWithoutFocus from '../components/PressableWithoutFocus';
+import PressableWithoutFocus from '../components/Pressable/PressableWithoutFocus';
 import * as Report from '../libs/actions/Report';
 import OfflineWithFeedback from '../components/OfflineWithFeedback';
 import AutoUpdateTime from '../components/AutoUpdateTime';
@@ -148,8 +148,10 @@ function ProfilePage(props) {
                             >
                                 {({show}) => (
                                     <PressableWithoutFocus
-                                        style={styles.noOutline}
+                                        style={[styles.noOutline]}
                                         onPress={show}
+                                        accessibilityLabel={props.translate('common.profile')}
+                                        accessibilityRole="imagebutton"
                                     >
                                         <OfflineWithFeedback pendingAction={lodashGet(details, 'pendingFields.avatar', null)}>
                                             <Avatar