feat(iOS): set AccessibilityLanguage for correct accent (#6493)

Author: OtavioStasiak

app/containers/message/Message.tsx

@@ -1,6 +1,7 @@
 import React, { useContext } from 'react';
 import { View, type ViewStyle } from 'react-native';
 import Touchable from 'react-native-platform-touchable';
+import { A11y } from 'react-native-a11y-order';
 
 import MessageContext from './Context';
 import User from './User';
@@ -25,6 +26,7 @@ import { getInfoMessage } from './utils';
 import MessageTime from './Time';
 import { useResponsiveLayout } from '../../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 import Quote from './Components/Attachments/Quote';
+import translationLanguages from '../../lib/constants/translationLanguages';
 
 const MessageInner = React.memo((props: IMessageInner) => {
 	const { isLargeFontScale } = useResponsiveLayout();
@@ -145,7 +147,11 @@ const Message = React.memo((props: IMessageTouchable & IMessage) => {
 			!props.unread && props.unread !== null ? i18n.t('Message_was_read') : i18n.t('Message_was_not_read');
 		const readReceipt = props.isReadReceiptEnabled && !props.isInfo ? readOrUnreadLabel : '';
 		const encryptedMessageLabel = props.isEncrypted ? i18n.t('Encrypted_message') : '';
-		return `${user} ${hour} ${label}. ${encryptedMessageLabel} ${readReceipt}`;
+		const translatedLanguage = translationLanguages[props?.autoTranslateLanguage || 'en'];
+		const translated = props.isTranslated ? i18n.t('Message_translated_into_idiom', { idiom: translatedLanguage }) : '';
+		return props.isTranslated
+			? `${user} ${hour} ${translated}`
+			: `${user} ${hour} ${translated} ${label}. ${encryptedMessageLabel} ${readReceipt}`;
 	};
 
 	if (props.isThreadReply || props.isThreadSequential || props.isInfo || props.isIgnored) {
@@ -157,39 +163,51 @@ const Message = React.memo((props: IMessageTouchable & IMessage) => {
 				{thread}
 				<View accessible accessibilityLabel={accessibilityLabel()} style={[styles.flex, infoStyle]}>
 					<MessageAvatar small {...props} />
-					<View style={styles.messageContent}>
-						<Content {...props} />
-						{props.isInfo && props.type === 'message_pinned' ? (
-							<View pointerEvents='none'>
-								<Attachments {...props} />
-							</View>
-						) : null}
-					</View>
+					<A11y.Index
+						accessible={props.isTranslated}
+						accessibilityLabel={props?.msg || ''}
+						accessibilityLanguage={props.autoTranslateLanguage}
+						index={2}>
+						<View style={styles.messageContent}>
+							<Content {...props} />
+							{props.isInfo && props.type === 'message_pinned' ? (
+								<View pointerEvents='none'>
+									<Attachments {...props} />
+								</View>
+							) : null}
+						</View>
+					</A11y.Index>
 				</View>
 			</View>
 		);
 	}
 
 	return (
 		<View testID={`message-${props.id}`} accessible accessibilityLabel={accessibilityLabel()} style={styles.container}>
-			<View style={styles.flex}>
-				<MessageAvatar {...props} />
-				<View style={styles.messageContent}>
-					<MessageInner {...props} />
+			<A11y.Index
+				accessible={props.isTranslated}
+				accessibilityLabel={props?.msg || ''}
+				accessibilityLanguage={props.autoTranslateLanguage}
+				index={2}>
+				<View accessible style={styles.flex}>
+					<MessageAvatar {...props} />
+					<View style={styles.messageContent}>
+						<MessageInner {...props} />
+					</View>
+					{!props.isHeader ? (
+						<RightIcons
+							type={props.type}
+							msg={props.msg}
+							isEdited={props.isEdited}
+							hasError={props.hasError}
+							isReadReceiptEnabled={props.isReadReceiptEnabled}
+							unread={props.unread}
+							pinned={props.pinned}
+							isTranslated={props.isTranslated}
+						/>
+					) : null}
 				</View>
-				{!props.isHeader ? (
-					<RightIcons
-						type={props.type}
-						msg={props.msg}
-						isEdited={props.isEdited}
-						hasError={props.hasError}
-						isReadReceiptEnabled={props.isReadReceiptEnabled}
-						unread={props.unread}
-						pinned={props.pinned}
-						isTranslated={props.isTranslated}
-					/>
-				) : null}
-			</View>
+			</A11y.Index>
 		</View>
 	);
 });
@@ -209,20 +227,26 @@ const MessageTouchable = React.memo((props: IMessageTouchable & IMessage) => {
 
 	if (props.hasError || props.isInfo) {
 		return (
-			<View>
+			<A11y.Order>
 				<Message {...props} />
-			</View>
+			</A11y.Order>
 		);
 	}
 
 	return (
-		<Touchable
-			onLongPress={onLongPress}
-			onPress={onPress}
-			disabled={(props.isInfo && !props.isThreadReply) || props.archived || props.isTemp || props.type === 'jitsi_call_started'}
-			style={{ backgroundColor }}>
-			<Message {...props} />
-		</Touchable>
+		<A11y.Order>
+			<A11y.Index index={1}>
+				<Touchable
+					onLongPress={onLongPress}
+					onPress={onPress}
+					disabled={
+						(props.isInfo && !props.isThreadReply) || props.archived || props.isTemp || props.type === 'jitsi_call_started'
+					}
+					style={{ backgroundColor }}>
+					<Message {...props} />
+				</Touchable>
+			</A11y.Index>
+		</A11y.Order>
 	);
 });