Merge pull request #3351 from dklymenk/3102-add-accessibility-role-an…

…d-label-to-close-button #3102 add accessibility role and label to close button
Expensify · Jun 4, 2021 · d534b5f · d534b5f
2 parents 6923be0 + 2ea81f9
commit d534b5f
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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>