Merge pull request #16553 from Prince-Mendiratta/accessibility-improv…

…ement
Expensify · Mar 28, 2023 · 08441e4 · 08441e4
2 parents 8ac3824 + f8f848e
commit 08441e4
Show file tree

Hide file tree

Showing 16 changed files with 218 additions and 103 deletions.
diff --git a/src/components/Icon/index.js b/src/components/Icon/index.js
@@ -52,7 +52,7 @@ class Icon extends PureComponent {
         if (this.props.inline) {
             return (
                 <View
-                    accessibilityHint={`${this.props.src.name} Icon`}
+                    testID={`${this.props.src.name} Icon`}
                     style={[StyleUtils.getWidthAndHeightStyle(width, height), styles.bgTransparent, styles.overflowVisible]}
                 >
                     <View style={iconStyles}>
@@ -68,7 +68,7 @@ class Icon extends PureComponent {
 
         return (
             <View
-                accessibilityHint={`${this.props.src.name} Icon`}
+                testID={`${this.props.src.name} Icon`}
                 style={this.props.additionalStyles}
             >
                 <this.props.src

diff --git a/src/components/LHNOptionsList/OptionRowLHN.js b/src/components/LHNOptionsList/OptionRowLHN.js
@@ -127,7 +127,7 @@ const OptionRowLHN = (props) => {
                             hovered && !props.isFocused ? props.hoverStyle : null,
                         ]}
                     >
-                        <View accessibilityHint="Navigates to a chat" style={sidebarInnerRowStyle}>
+                        <View accessibilityHint={props.translate('accessibilityHints.navigatesToChat')} style={sidebarInnerRowStyle}>
                             <View
                                 style={[
                                     styles.flexRow,
@@ -168,7 +168,7 @@ const OptionRowLHN = (props) => {
                                 <View style={contentContainerStyles}>
                                     <View style={[styles.flexRow, styles.alignItemsCenter, styles.mw100, styles.overflowHidden]}>
                                         <DisplayNames
-                                            accessibilityLabel="Chat user display names"
+                                            accessibilityLabel={props.translate('accessibilityHints.chatUserDisplayNames')}
                                             fullTitle={optionItem.text}
                                             displayNamesWithTooltips={optionItem.displayNamesWithTooltips}
                                             tooltipEnabled
@@ -179,7 +179,7 @@ const OptionRowLHN = (props) => {
                                         {optionItem.isChatRoom && (
                                             <TextPill
                                                 style={textPillStyle}
-                                                accessibilityLabel="Workspace name"
+                                                accessibilityLabel={props.translate('accessibilityHints.workspaceName')}
                                                 text={optionItem.subtitle}
                                             />
                                         )}
@@ -188,7 +188,7 @@ const OptionRowLHN = (props) => {
                                         <Text
                                             style={alternateTextStyle}
                                             numberOfLines={1}
-                                            accessibilityLabel="Last chat message preview"
+                                            accessibilityLabel={props.translate('accessibilityHints.lastChatMessagePreview')}
                                         >
                                             {optionItem.alternateText}
                                         </Text>

diff --git a/src/components/OptionRow.js b/src/components/OptionRow.js
@@ -232,7 +232,7 @@ class OptionRow extends Component {
                                     }
                                     <View style={contentContainerStyles}>
                                         <DisplayNames
-                                            accessibilityLabel="Chat user display names"
+                                            accessibilityLabel={this.props.translate('accessibilityHints.chatUserDisplayNames')}
                                             fullTitle={this.props.option.text}
                                             displayNamesWithTooltips={displayNamesWithTooltips}
                                             tooltipEnabled={this.props.showTitleTooltip}

diff --git a/src/components/UnreadActionIndicator.js b/src/components/UnreadActionIndicator.js
@@ -5,7 +5,7 @@ import Text from './Text';
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
 
 const UnreadActionIndicator = props => (
-    <View accessibilityLabel="New message line indicator" data-action-id={props.reportActionID} style={styles.unreadIndicatorContainer}>
+    <View accessibilityLabel={props.translate('accessibilityHints.newMessageLineIndicator')} data-action-id={props.reportActionID} style={styles.unreadIndicatorContainer}>
         <View style={styles.unreadIndicatorLine} />
         <Text style={styles.unreadIndicatorText}>
             {props.translate('common.new')}

diff --git a/src/languages/en.js b/src/languages/en.js
@@ -279,6 +279,8 @@ export default {
         fabNewChat: 'New chat (Floating action)',
         chatPinned: 'Chat pinned',
         draftedMessage: 'Drafted message',
+        listOfChatMessages: 'List of chat messages',
+        listOfChats: 'List of chats',
     },
     iou: {
         amount: 'Amount',
@@ -612,6 +614,7 @@ export default {
             invalidFormatEmailLogin: 'The email entered is invalid. Please fix the format and try again.',
         },
         cannotGetAccountDetails: 'Couldn\'t retrieve account details, please try to sign in again.',
+        loginForm: 'Login form',
     },
     personalDetails: {
         error: {
@@ -1207,4 +1210,15 @@ export default {
     },
     allStates: COMMON_CONST.STATES,
     allCountries: CONST.ALL_COUNTRIES,
+    accessibilityHints: {
+        navigateToChatsList: 'Navigate back to chats list',
+        chatWelcomeMessage: 'Chat welcome message',
+        navigatesToChat: 'Navigates to a chat',
+        newMessageLineIndicator: 'New message line indicator',
+        chatMessage: 'Chat message',
+        lastChatMessagePreview: 'Last chat message preview',
+        workspaceName: 'Workspace name',
+        chatUserDisplayNames: 'Chat user display names',
+        scrollToNewestMessages: 'Scroll to newest messages',
+    },
 };
diff --git a/src/languages/es.js b/src/languages/es.js
@@ -278,6 +278,8 @@ export default {
         fabNewChat: 'Nuevo chat',
         chatPinned: 'Chat fijado',
         draftedMessage: 'Mensaje borrador',
+        listOfChatMessages: 'Lista de mensajes del chat',
+        listOfChats: 'lista de chats',
     },
     iou: {
         amount: 'Importe',
@@ -611,6 +613,7 @@ export default {
             invalidFormatEmailLogin: 'El email introducido no es válido. Corrígelo e inténtalo de nuevo.',
         },
         cannotGetAccountDetails: 'No se pudieron cargar los detalles de tu cuenta, por favor intenta iniciar sesión de nuevo.',
+        loginForm: 'Formulario de inicio de sesión',
     },
     personalDetails: {
         error: {
@@ -1673,4 +1676,15 @@ export default {
         ZM: 'Zambia',
         ZW: 'Zimbabue',
     },
+    accessibilityHints: {
+        navigateToChatsList: 'Vuelve a la lista de chats',
+        chatWelcomeMessage: 'Mensaje de bienvenida al chat',
+        navigatesToChat: 'Navega a un chat',
+        newMessageLineIndicator: 'Indicador de nueva línea de mensaje',
+        chatMessage: 'mensaje de chat',
+        lastChatMessagePreview: 'Vista previa del último mensaje del chat',
+        workspaceName: 'Nombre del espacio de trabajo',
+        chatUserDisplayNames: 'Nombres de los usuarios del chat',
+        scrollToNewestMessages: 'Desplázate a los mensajes más recientes',
+    },
 };
diff --git a/src/pages/home/HeaderView.js b/src/pages/home/HeaderView.js
@@ -93,7 +93,7 @@ const HeaderView = (props) => {
                     <Pressable
                         onPress={props.onNavigationMenuButtonClicked}
                         style={[styles.LHNToggle]}
-                        accessibilityHint="Navigate back to chats list"
+                        accessibilityHint={props.translate('accessibilityHints.navigateToChatsList')}
                     >
                         <Tooltip text={props.translate('common.back')} shiftVertical={4}>
                             <Icon src={Expensicons.BackArrow} />

diff --git a/src/pages/home/report/FloatingMessageCounter/index.js b/src/pages/home/report/FloatingMessageCounter/index.js
@@ -63,7 +63,7 @@ class FloatingMessageCounter extends PureComponent {
     render() {
         return (
             <FloatingMessageCounterContainer
-                accessibilityHint="Scroll to newest messages"
+                accessibilityHint={this.props.translate('accessibilityHints.scrollToNewestMessages')}
                 containerStyles={[styles.floatingMessageCounterTransformation(this.translateY)]}
             >
                 <View style={styles.floatingMessageCounter}>

diff --git a/src/pages/home/report/ReportActionItem.js b/src/pages/home/report/ReportActionItem.js
@@ -38,6 +38,7 @@ import focusTextInputAfterAnimation from '../../../libs/focusTextInputAfterAnima
 import ChronosOOOListActions from '../../../components/ReportActionItem/ChronosOOOListActions';
 import ReportActionItemReactions from '../../../components/Reactions/ReportActionItemReactions';
 import * as Report from '../../../libs/actions/Report';
+import withLocalize from '../../../components/withLocalize';
 
 const propTypes = {
     /** Report for this action */
@@ -240,7 +241,7 @@ class ReportActionItem extends Component {
             >
                 <Hoverable>
                     {hovered => (
-                        <View accessibilityLabel="Chat message">
+                        <View accessibilityLabel={this.props.translate('accessibilityHints.chatMessage')}>
                             {this.props.shouldDisplayNewMarker && (
                                 <UnreadActionIndicator reportActionID={this.props.action.reportActionID} />
                             )}
@@ -305,6 +306,7 @@ ReportActionItem.defaultProps = defaultProps;
 
 export default compose(
     withWindowDimensions,
+    withLocalize,
     withNetwork(),
     withBlockedFromConcierge({propName: 'blockedFromConcierge'}),
     withReportActionsDrafts({

diff --git a/src/pages/home/report/ReportActionItemCreated.js b/src/pages/home/report/ReportActionItemCreated.js
@@ -16,6 +16,7 @@ import EmptyStateBackgroundImage from '../../../../assets/images/empty-state_bac
 import * as StyleUtils from '../../../styles/StyleUtils';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions';
 import compose from '../../../libs/compose';
+import withLocalize from '../../../components/withLocalize';
 
 const propTypes = {
     /** The id of the report */
@@ -57,7 +58,7 @@ const ReportActionItemCreated = (props) => {
                     style={StyleUtils.getReportWelcomeBackgroundImageStyle(props.isSmallScreenWidth)}
                 />
                 <View
-                    accessibilityLabel="Chat welcome message"
+                    accessibilityLabel={props.translate('accessibilityHints.chatWelcomeMessage')}
                     style={[styles.p5, StyleUtils.getReportWelcomeTopMarginStyle(props.isSmallScreenWidth)]}
                 >
                     <Pressable
@@ -83,6 +84,7 @@ ReportActionItemCreated.displayName = 'ReportActionItemCreated';
 
 export default compose(
     withWindowDimensions,
+    withLocalize,
     withOnyx({
         report: {
             key: ({reportID}) => `${ONYXKEYS.COLLECTION.REPORT}${reportID}`,

diff --git a/src/pages/home/report/ReportActionsList.js b/src/pages/home/report/ReportActionsList.js
@@ -20,6 +20,7 @@ import CONST from '../../../CONST';
 import * as StyleUtils from '../../../styles/StyleUtils';
 import reportPropTypes from '../../reportPropTypes';
 import networkPropTypes from '../../../components/networkPropTypes';
+import withLocalize from '../../../components/withLocalize';
 
 const propTypes = {
     /** Position of the "New" line marker */
@@ -150,7 +151,7 @@ class ReportActionsList extends React.Component {
         return (
             <Animated.View style={[StyleUtils.fade(this.state.fadeInAnimation), styles.flex1]}>
                 <InvertedFlatList
-                    accessibilityLabel="List of chat messages"
+                    accessibilityLabel={this.props.translate('sidebarScreen.listOfChatMessages')}
                     ref={ReportScrollManager.flatListRef}
                     data={this.props.sortedReportActions}
                     renderItem={this.renderItem}
@@ -208,6 +209,7 @@ ReportActionsList.defaultProps = defaultProps;
 export default compose(
     withDrawerState,
     withWindowDimensions,
+    withLocalize,
     withPersonalDetails(),
     withNetwork(),
 )(ReportActionsList);
diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js
@@ -140,7 +140,7 @@ class SidebarLinks extends React.Component {
         return (
             <View
                 accessibilityElementsHidden={this.props.isSmallScreenWidth && !this.props.isDrawerOpen}
-                accessibilityLabel="List of chats"
+                accessibilityLabel={this.props.translate('sidebarScreen.listOfChats')}
                 style={[styles.flex1, styles.h100]}
             >
                 <View

diff --git a/src/pages/signin/LoginForm.js b/src/pages/signin/LoginForm.js
@@ -168,7 +168,7 @@ class LoginForm extends React.Component {
         const serverErrorText = ErrorUtils.getLatestErrorMessage(this.props.account);
         return (
             <>
-                <View accessibilityLabel="Login form" style={[styles.mt3]}>
+                <View accessibilityLabel={this.props.translate('loginForm.loginForm')} style={[styles.mt3]}>
                     <TextInput
                         ref={el => this.input = el}
                         label={this.props.translate('loginForm.phoneOrEmail')}