From 2ea81f9f84d40ee3fe0f6c444442b8c003e144b6 Mon Sep 17 00:00:00 2001
From: Dmytro Klymenko <dmytro.klymenko@protonmail.com>
Date: Thu, 3 Jun 2021 16:15:24 +0300
Subject: [PATCH] #3102 add accessibility role and label to close button

---
 src/components/HeaderWithCloseButton.js | 8 +++++++-
 src/languages/en.js                     | 1 +
 src/pages/iou/IOUModal.js               | 2 ++
 3 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/components/HeaderWithCloseButton.js b/src/components/HeaderWithCloseButton.js
index 45930710da7b..a56dac010ba0 100755
--- a/src/components/HeaderWithCloseButton.js
+++ b/src/components/HeaderWithCloseButton.js
@@ -7,6 +7,8 @@ import styles from '../styles/styles';
 import Header from './Header';
 import Icon from './Icon';
 import {Close, Download, BackArrow} from './Icon/Expensicons';
+import compose from '../libs/compose';
+import withLocalize, {withLocalizePropTypes} from './withLocalize';
 
 const propTypes = {
     /** Title of the Header */
@@ -29,6 +31,8 @@ const propTypes = {
 
     /** Whether we should show a download button */
     shouldShowDownloadButton: PropTypes.bool,
+
+    ...withLocalizePropTypes,
 };
 
 const defaultProps = {
@@ -76,6 +80,8 @@ const HeaderWithCloseButton = props => (
                 <TouchableOpacity
                     onPress={props.onCloseButtonPress}
                     style={[styles.touchableButtonImage]}
+                    accessibilityRole="button"
+                    accessibilityLabel={props.translate('common.close')}
                 >
                     <Icon src={Close} />
                 </TouchableOpacity>
@@ -88,4 +94,4 @@ HeaderWithCloseButton.propTypes = propTypes;
 HeaderWithCloseButton.defaultProps = defaultProps;
 HeaderWithCloseButton.displayName = 'HeaderWithCloseButton';
 
-export default HeaderWithCloseButton;
+export default compose(withLocalize)(HeaderWithCloseButton);
diff --git a/src/languages/en.js b/src/languages/en.js
index fa4489706212..5a36acaef318 100755
--- a/src/languages/en.js
+++ b/src/languages/en.js
@@ -29,6 +29,7 @@ export default {
         delete: 'Delete',
         contacts: 'Contacts',
         recents: 'Recents',
+        close: 'Close',
     },
     attachmentPicker: {
         cameraPermissionRequired: 'Camera Permission Required',
diff --git a/src/pages/iou/IOUModal.js b/src/pages/iou/IOUModal.js
index 0c1e0982f96c..4cf2600c2c77 100755
--- a/src/pages/iou/IOUModal.js
+++ b/src/pages/iou/IOUModal.js
@@ -294,6 +294,8 @@ class IOUModal extends Component {
                                     <TouchableOpacity
                                         onPress={() => Navigation.dismissModal()}
                                         style={[styles.touchableButtonImage]}
+                                        accessibilityRole="button"
+                                        accessibilityLabel={this.props.translate('common.close')}
                                     >
                                         <Icon src={Close} />
                                     </TouchableOpacity>