diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js b/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js
index 4cbc778e40b9..cd9c05344e82 100644
--- a/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js
+++ b/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}) => (
showContextMenuForReport(event, anchor, report.reportID, action, checkIfContextMenuActive, ReportUtils.isArchivedRoom(report))}
+ accessibilityRole="imagebutton"
+ accessibilityLabel={props.translate('accessibilityHints.viewAttachment')}
>
(this.pressableRef = el)}
- style={this.props.styles}
+ style={this.props.style}
+ // eslint-disable-next-line react/jsx-props-no-spreading
+ {...restProps}
>
{this.props.children}
-
+
);
}
}
diff --git a/src/languages/en.js b/src/languages/en.js
index 151ae3c03e6a..ea8dfc2b0cad 100755
--- a/src/languages/en.js
+++ b/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]',
diff --git a/src/languages/es.js b/src/languages/es.js
index 18c94ef3c23c..1b69a6fb4a7c 100644
--- a/src/languages/es.js
+++ b/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]',
diff --git a/src/pages/DetailsPage.js b/src/pages/DetailsPage.js
index 2b5be4121760..ac42017d3c7c 100755
--- a/src/pages/DetailsPage.js
+++ b/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';
diff --git a/src/pages/ProfilePage.js b/src/pages/ProfilePage.js
index ac0d1db4d14b..41a5d153f0cc 100755
--- a/src/pages/ProfilePage.js
+++ b/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}) => (