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}) => (