feat(a11y): add accessibilityLabel (#5793)

RocketChat · Jul 31, 2024 · d0548a0 · d0548a0
1 parent 3933932
commit d0548a0
Show file tree

Hide file tree

Showing 91 changed files with 1,008 additions and 1,509 deletions.
diff --git a/android/app/src/main/java/chat/rocket/reactnative/MainActivity.kt b/android/app/src/main/java/chat/rocket/reactnative/MainActivity.kt
@@ -33,12 +33,4 @@ class MainActivity : ReactActivity() {
   override fun invokeDefaultOnBackPressed() {
     moveTaskToBack(true)
   }
-
-	// from react-native-orientation
-	override fun onConfigurationChanged(newConfig: Configuration) {
-		super.onConfigurationChanged(newConfig)
-		val intent = Intent("onConfigurationChanged")
-		intent.putExtra("newConfig", newConfig)
-		sendBroadcast(intent)
-	}
 }
diff --git a/app/actions/actionsTypes.ts b/app/actions/actionsTypes.ts
@@ -16,8 +16,6 @@ export const ROOMS = createRequestTypes('ROOMS', [
 	...defaultTypes,
 	'REFRESH',
 	'SET_SEARCH',
-	'CLOSE_SERVER_DROPDOWN',
-	'TOGGLE_SERVER_DROPDOWN',
 	'OPEN_SEARCH_HEADER',
 	'CLOSE_SEARCH_HEADER'
 ]);

diff --git a/app/actions/rooms.ts b/app/actions/rooms.ts
@@ -53,18 +53,6 @@ export function setSearch(searchText: string): ISetSearch {
 	};
 }
 
-export function closeServerDropdown(): Action {
-	return {
-		type: ROOMS.CLOSE_SERVER_DROPDOWN
-	};
-}
-
-export function toggleServerDropdown(): Action {
-	return {
-		type: ROOMS.TOGGLE_SERVER_DROPDOWN
-	};
-}
-
 export function openSearchHeader(): Action {
 	return {
 		type: ROOMS.OPEN_SEARCH_HEADER

diff --git a/app/containers/Button/index.tsx b/app/containers/Button/index.tsx
@@ -67,7 +67,13 @@ const Button: React.FC<IButtonProps> = ({
 	const textStyle = [styles.text, { color: isDisabled ? colors.fontDisabled : resolvedTextColor, fontSize }, styleText];
 
 	return (
-		<Touchable onPress={onPress} disabled={isDisabled} style={containerStyle} accessibilityLabel={title} {...otherProps}>
+		<Touchable
+			onPress={onPress}
+			disabled={isDisabled}
+			style={containerStyle}
+			accessibilityLabel={title}
+			accessibilityRole='button'
+			{...otherProps}>
 			{loading ? <ActivityIndicator color={resolvedTextColor} /> : <Text style={textStyle}>{title}</Text>}
 		</Touchable>
 	);

diff --git a/app/containers/DirectoryItem/index.tsx b/app/containers/DirectoryItem/index.tsx
@@ -50,27 +50,29 @@ const DirectoryItem = ({
 }: IDirectoryItem): React.ReactElement => {
 	const { theme } = useTheme();
 	return (
-		<Touch onPress={onPress} style={{ backgroundColor: themes[theme].surfaceRoom }} testID={testID}>
-			<View style={[styles.directoryItemContainer, styles.directoryItemButton, style]}>
-				<Avatar text={avatar} size={30} type={type} rid={rid} style={styles.directoryItemAvatar} />
-				<View style={styles.directoryItemTextContainer}>
-					<View style={styles.directoryItemTextTitle}>
-						{type !== 'd' ? <RoomTypeIcon type={type} teamMain={teamMain} /> : null}
-						<Text style={[styles.directoryItemName, { color: themes[theme].fontTitlesLabels }]} numberOfLines={1}>
-							{title}
-						</Text>
+		<View accessible accessibilityLabel={`${title} ${rightLabel}`}>
+			<Touch onPress={onPress} style={{ backgroundColor: themes[theme].surfaceRoom }} testID={testID}>
+				<View style={[styles.directoryItemContainer, styles.directoryItemButton, style]}>
+					<Avatar text={avatar} size={30} type={type} rid={rid} style={styles.directoryItemAvatar} />
+					<View style={styles.directoryItemTextContainer}>
+						<View style={styles.directoryItemTextTitle}>
+							{type !== 'd' ? <RoomTypeIcon type={type} teamMain={teamMain} /> : null}
+							<Text style={[styles.directoryItemName, { color: themes[theme].fontTitlesLabels }]} numberOfLines={1}>
+								{title}
+							</Text>
+						</View>
+						{description ? (
+							<MarkdownPreview
+								msg={description}
+								style={[styles.directoryItemUsername, { color: themes[theme].fontSecondaryInfo }]}
+								numberOfLines={1}
+							/>
+						) : null}
 					</View>
-					{description ? (
-						<MarkdownPreview
-							msg={description}
-							style={[styles.directoryItemUsername, { color: themes[theme].fontSecondaryInfo }]}
-							numberOfLines={1}
-						/>
-					) : null}
+					<DirectoryItemLabel text={rightLabel} theme={theme} />
 				</View>
-				<DirectoryItemLabel text={rightLabel} theme={theme} />
-			</View>
-		</Touch>
+			</Touch>
+		</View>
 	);
 };
 

diff --git a/app/containers/HeaderButton/HeaderButtonItem.tsx b/app/containers/HeaderButton/HeaderButtonItem.tsx
@@ -14,6 +14,7 @@ export interface IHeaderButtonItem {
 	badge?(): void;
 	color?: string;
 	disabled?: boolean;
+	accessibilityLabel?: string;
 }
 
 export const BUTTON_HIT_SLOP = {
@@ -40,7 +41,17 @@ const styles = StyleSheet.create({
 	}
 });
 
-const Item = ({ title, iconName, onPress, testID, badge, color, disabled, ...props }: IHeaderButtonItem): React.ReactElement => {
+const Item = ({
+	title,
+	iconName,
+	onPress,
+	testID,
+	badge,
+	color,
+	disabled,
+	accessibilityLabel,
+	...props
+}: IHeaderButtonItem): React.ReactElement => {
 	const { colors } = useTheme();
 	return (
 		<PlatformPressable
@@ -53,7 +64,8 @@ const Item = ({ title, iconName, onPress, testID, badge, color, disabled, ...pro
 				{
 					opacity: disabled ? 0.5 : 1
 				}
-			]}>
+			]}
+			accessibilityLabel={accessibilityLabel}>
 			<>
 				{iconName ? (
 					<CustomIcon name={iconName} size={24} color={color} {...props} />

diff --git a/app/containers/List/ListHeader.tsx b/app/containers/List/ListHeader.tsx
@@ -21,14 +21,15 @@ const styles = StyleSheet.create({
 interface IListHeader {
 	title: string;
 	translateTitle?: boolean;
+	numberOfLines?: number;
 }
 
-const ListHeader = React.memo(({ title, translateTitle = true }: IListHeader) => {
+const ListHeader = React.memo(({ title, translateTitle = true, numberOfLines = 1 }: IListHeader) => {
 	const { theme } = useTheme();
 
 	return (
 		<View style={styles.container}>
-			<Text style={[styles.title, { color: themes[theme].fontHint }]} numberOfLines={1}>
+			<Text style={[styles.title, { color: themes[theme].fontHint }]} numberOfLines={numberOfLines}>
 				{translateTitle ? I18n.t(title) : title}
 			</Text>
 		</View>

diff --git a/app/containers/List/ListItem.tsx b/app/containers/List/ListItem.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { I18nManager, StyleProp, StyleSheet, Text, TextStyle, View } from 'react-native';
 
 import Touch from '../Touch';
@@ -68,6 +68,8 @@ interface IListItemContent {
 	alert?: boolean;
 	heightContainer?: number;
 	styleTitle?: StyleProp<TextStyle>;
+	additionalAcessibilityLabel?: string | boolean;
+	additionalAcessibilityLabelCheck?: boolean;
 }
 
 const Content = React.memo(
@@ -85,14 +87,40 @@ const Content = React.memo(
 		showActionIndicator = false,
 		theme,
 		heightContainer,
-		styleTitle
+		styleTitle,
+		additionalAcessibilityLabel,
+		additionalAcessibilityLabelCheck
 	}: IListItemContent) => {
 		const { fontScale } = useDimensions();
 
+		const handleAcessibilityLabel = useMemo(() => {
+			let label = '';
+			if (title) {
+				label = translateTitle ? I18n.t(title) : title;
+			}
+			if (subtitle) {
+				label = translateSubtitle ? `${label} ${I18n.t(subtitle)}` : `${label} ${subtitle}`;
+			}
+			if (typeof additionalAcessibilityLabel === 'string') {
+				label = `${label} ${additionalAcessibilityLabel}`;
+			}
+			if (typeof additionalAcessibilityLabel === 'boolean') {
+				if (additionalAcessibilityLabelCheck) {
+					label = `${label} ${additionalAcessibilityLabel ? I18n.t('Checked') : I18n.t('Unchecked')}`;
+				} else {
+					label = `${label} ${additionalAcessibilityLabel ? I18n.t('Enabled') : I18n.t('Disabled')}`;
+				}
+			}
+			return label;
+		}, [title, subtitle, translateTitle, translateSubtitle, additionalAcessibilityLabel, additionalAcessibilityLabelCheck]);
+
 		return (
 			<View
 				style={[styles.container, disabled && styles.disabled, { height: (heightContainer || BASE_HEIGHT) * fontScale }]}
-				testID={testID}>
+				testID={testID}
+				accessible
+				accessibilityLabel={handleAcessibilityLabel}
+				accessibilityRole='button'>
 				{left ? <View style={styles.leftContainer}>{left()}</View> : null}
 				<View style={styles.textContainer}>
 					<View style={styles.textAlertContainer}>

diff --git a/app/containers/LoginServices/ButtonService.tsx b/app/containers/LoginServices/ButtonService.tsx
@@ -7,7 +7,7 @@ import { CustomIcon } from '../CustomIcon';
 import { IButtonService } from './interfaces';
 import styles from './styles';
 
-const ButtonService = ({ name, authType, onPress, backgroundColor, buttonText, icon }: IButtonService) => {
+const ButtonService = ({ name, authType, onPress, backgroundColor, buttonText, icon, accessibilityLabel }: IButtonService) => {
 	const { colors } = useTheme();
 
 	return (
@@ -17,6 +17,8 @@ const ButtonService = ({ name, authType, onPress, backgroundColor, buttonText, i
 			style={[styles.serviceButton, { backgroundColor }]}
 			activeOpacity={0.5}
 			underlayColor={colors.fontWhite}
+			accessible
+			accessibilityLabel={accessibilityLabel}
 		>
 			<View style={styles.serviceButtonContainer}>
 				{authType === 'oauth' || authType === 'apple' ? <CustomIcon name={icon} size={24} style={styles.serviceIcon} /> : null}

diff --git a/app/containers/LoginServices/Service.tsx b/app/containers/LoginServices/Service.tsx
@@ -96,6 +96,7 @@ const Service = React.memo(
 				icon={icon}
 				name={service.name}
 				authType={service.authType}
+				accessibilityLabel={`${I18n.t('Continue_with')} ${modifiedName.current}`}
 			/>
 		);
 	}

diff --git a/app/containers/LoginServices/interfaces.ts b/app/containers/LoginServices/interfaces.ts
@@ -66,4 +66,5 @@ export interface IButtonService {
 	backgroundColor: string;
 	buttonText: ReactElement;
 	icon: TIconsName;
+	accessibilityLabel?: string;
 }
diff --git a/app/containers/RoomHeader/RoomHeader.tsx b/app/containers/RoomHeader/RoomHeader.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 
 import I18n from '../../i18n';
@@ -174,10 +174,17 @@ const Header = React.memo(
 
 		const handleOnPress = useCallback(() => onPress(), []);
 
+		const accessibilityLabel = useMemo(() => {
+			if (tmid) {
+				return `${title} ${parentTitle}`;
+			}
+			return title;
+		}, [title, parentTitle, tmid]);
+
 		return (
 			<TouchableOpacity
 				testID='room-header'
-				accessibilityLabel={title}
+				accessibilityLabel={accessibilityLabel}
 				onPress={handleOnPress}
 				style={[
 					styles.container,
@@ -186,7 +193,8 @@ const Header = React.memo(
 					}
 				]}
 				disabled={disabled}
-				hitSlop={HIT_SLOP}>
+				hitSlop={HIT_SLOP}
+				accessibilityRole='header'>
 				<View style={styles.titleContainer}>
 					{tmid ? null : (
 						<RoomTypeIcon

diff --git a/app/containers/RoomItem/LastMessage.tsx b/app/containers/RoomItem/LastMessage.tsx
@@ -2,73 +2,23 @@ import { dequal } from 'dequal';
 import React from 'react';
 import { TextStyle } from 'react-native';
 
-import I18n from '../../i18n';
-import { E2E_MESSAGE_TYPE, E2E_STATUS } from '../../lib/constants';
+import { formatLastMessage } from '../../lib/methods/formatLastMessage';
 import { isAndroid } from '../../lib/methods/helpers';
 import { useTheme } from '../../theme';
 import { MarkdownPreview } from '../markdown';
 import { ILastMessageProps } from './interfaces';
 import styles from './styles';
 
-const formatMsg = ({ lastMessage, type, showLastMessage, username, useRealName }: Partial<ILastMessageProps>) => {
-	if (!showLastMessage) {
-		return '';
-	}
-	if (!lastMessage || !lastMessage.u) {
-		return I18n.t('No_Message');
-	}
-	if (lastMessage.t === 'jitsi_call_started') {
-		const { u } = lastMessage;
-		return I18n.t('Started_call', { userBy: u.username });
-	}
-
-	let prefix = '';
-	const isLastMessageSentByMe = lastMessage.u.username === username;
-
-	if (!lastMessage.msg && lastMessage.attachments && Object.keys(lastMessage.attachments).length) {
-		const userAttachment = () => {
-			if (isLastMessageSentByMe) {
-				return I18n.t('You');
-			}
-			if (useRealName && lastMessage.u.name) {
-				return lastMessage.u.name;
-			}
-			return lastMessage.u.username;
-		};
-		return I18n.t('User_sent_an_attachment', { user: userAttachment() });
-	}
-
-	// Encrypted message pending decrypt
-	if (lastMessage.t === E2E_MESSAGE_TYPE && lastMessage.e2e !== E2E_STATUS.DONE) {
-		lastMessage.msg = I18n.t('Encrypted_message');
-	}
-
-	if (isLastMessageSentByMe) {
-		prefix = I18n.t('You_colon');
-	} else if (type !== 'd') {
-		const {
-			u: { name }
-		} = lastMessage;
-		prefix = `${useRealName ? name : lastMessage.u.username}: `;
-	}
-
-	if (lastMessage.t === 'videoconf') {
-		prefix = '';
-		lastMessage.msg = I18n.t('Call_started');
-	}
-
-	return `${prefix}${lastMessage.msg}`;
-};
-
 const arePropsEqual = (oldProps: any, newProps: any) => dequal(oldProps, newProps);
 
 const LastMessage = React.memo(({ lastMessage, type, showLastMessage, username, alert, useRealName }: ILastMessageProps) => {
 	const { colors } = useTheme();
 	// Android has a bug with the text align on the markdown preview
 	const alignSelf: TextStyle = isAndroid ? { alignSelf: 'stretch' } : {};
+
 	return (
 		<MarkdownPreview
-			msg={formatMsg({
+			msg={formatLastMessage({
 				lastMessage,
 				type,
 				showLastMessage,