Merge branch 'a11y-ff' into feat.native-stack

RocketChat · Jul 31, 2024 · cf24708 · cf24708
2 parents 38282b1 + 6fd9ee7
commit cf24708
Show file tree

Hide file tree

Showing 175 changed files with 3,137 additions and 2,763 deletions.
diff --git a/README.md b/README.md
@@ -1,7 +1,7 @@
 # Rocket.Chat Mobile
 
 - **Supported server versions:** 0.70.0+
-- **Supported iOS versions**: 12+
+- **Supported iOS versions**: 13.4+
 - **Supported Android versions**: 6.0+
 
 ## Download
@@ -13,7 +13,7 @@
   <img alt="Download on App Store" src="https://user-images.githubusercontent.com/7317008/43209852-4ca39622-904b-11e8-8ce1-cdc3aee76ae9.png" height=43>
 </a>
 
-Check [our docs](https://docs.rocket.chat/use-rocket.chat/rocket.chat-mobile) for  beta and Experimental versions.
+Check [our docs](https://developer.rocket.chat/docs/mobile-app) for  beta and Experimental versions.
 
 ## Reporting an Issue
 

diff --git a/android/app/build.gradle b/android/app/build.gradle
@@ -93,7 +93,7 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         versionCode VERSIONCODE as Integer
-        versionName "4.50.0"
+        versionName "4.51.0"
         vectorDrawables.useSupportLibrary = true
         if (!isFoss) {
             manifestPlaceholders = [BugsnagAPIKey: BugsnagAPIKey as String]

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/android/app/src/main/java/chat/rocket/reactnative/networking/SSLPinningModule.java b/android/app/src/main/java/chat/rocket/reactnative/networking/SSLPinningModule.java
@@ -39,6 +39,7 @@
 import com.dylanvann.fastimage.FastImageOkHttpUrlLoader;
 
 import expo.modules.av.player.datasource.SharedCookiesDataSourceFactory;
+import expo.modules.filesystem.FileSystemModule;
 
 public class SSLPinningModule extends ReactContextBaseJavaModule implements KeyChainAliasCallback {
 
@@ -113,6 +114,8 @@ public void setCertificate(String data, Promise promise) {
         FastImageOkHttpUrlLoader.setOkHttpClient(getOkHttpClient());
         // Expo AV network layer
         SharedCookiesDataSourceFactory.setOkHttpClient(getOkHttpClient());
+        // Expo File System network layer
+        FileSystemModule.setOkHttpClient(getOkHttpClient());
 
         promise.resolve(null);
     }

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/ActionSheet/ActionSheet.tsx b/app/containers/ActionSheet/ActionSheet.tsx
@@ -3,7 +3,7 @@ import * as Haptics from 'expo-haptics';
 import React, { forwardRef, isValidElement, useEffect, useImperativeHandle, useRef, useState, useCallback } from 'react';
 import { Keyboard, LayoutChangeEvent, useWindowDimensions } from 'react-native';
 import { Easing, useDerivedValue, useSharedValue } from 'react-native-reanimated';
-import BottomSheet, { BottomSheetBackdrop, BottomSheetBackdropProps } from '@gorhom/bottom-sheet';
+import BottomSheet, { BottomSheetBackdrop, BottomSheetBackdropProps } from '@discord/bottom-sheet';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { useTheme } from '../../theme';

diff --git a/app/containers/ActionSheet/BottomSheetContent.tsx b/app/containers/ActionSheet/BottomSheetContent.tsx
@@ -1,6 +1,6 @@
 import { Text, ViewProps } from 'react-native';
 import React from 'react';
-import { BottomSheetView, BottomSheetFlatList } from '@gorhom/bottom-sheet';
+import { BottomSheetView, BottomSheetFlatList } from '@discord/bottom-sheet';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import I18n from '../../i18n';

diff --git a/app/containers/ActionSheet/Item.tsx b/app/containers/ActionSheet/Item.tsx
@@ -36,14 +36,16 @@ export const Item = React.memo(({ item, hide }: IActionSheetItem) => {
 	}
 
 	return (
-		<Touch onPress={onPress} style={[styles.item, { backgroundColor: colors.surfaceLight }]} testID={item.testID}>
-			{item.icon ? <CustomIcon name={item.icon} size={20} color={color} /> : null}
-			<View style={styles.titleContainer}>
-				<Text numberOfLines={1} style={[styles.title, { color, marginLeft: item.icon ? 16 : 0 }]}>
-					{item.title}
-				</Text>
-			</View>
-			{item.right ? <View style={styles.rightContainer}>{item.right ? item.right() : null}</View> : null}
-		</Touch>
+		<View accessible accessibilityLabel={item.title}>
+			<Touch onPress={onPress} style={[styles.item, { backgroundColor: colors.surfaceLight }]} testID={item.testID}>
+				{item.icon ? <CustomIcon name={item.icon} size={20} color={color} /> : null}
+				<View style={styles.titleContainer}>
+					<Text numberOfLines={1} style={[styles.title, { color, marginLeft: item.icon ? 16 : 0 }]}>
+						{item.title}
+					</Text>
+				</View>
+				{item.right ? <View style={styles.rightContainer}>{item.right ? item.right() : null}</View> : null}
+			</Touch>
+		</View>
 	);
 });
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/MessageActions/Header.tsx b/app/containers/MessageActions/Header.tsx
@@ -65,8 +65,7 @@ const HeaderItem = ({ item, onReaction, theme }: THeaderItem) => (
 	<Touch
 		testID={`message-actions-emoji-${item}`}
 		onPress={() => onReaction({ emoji: item })}
-		style={[styles.headerItem, { backgroundColor: themes[theme].surfaceHover }]}
-	>
+		style={[styles.headerItem, { backgroundColor: themes[theme].surfaceHover }]}>
 		{typeof item === 'string' ? (
 			<Text style={styles.headerIcon}>{shortnameToUnicode(`:${item}:`)}</Text>
 		) : (
@@ -79,8 +78,7 @@ const HeaderFooter = ({ onReaction, theme }: THeaderFooter) => (
 	<Touch
 		testID='add-reaction'
 		onPress={(param: any) => onReaction(param)}
-		style={[styles.headerItem, { backgroundColor: themes[theme].surfaceHover }]}
-	>
+		style={[styles.headerItem, { backgroundColor: themes[theme].surfaceHover }]}>
 		<CustomIcon name='reaction-add' size={24} />
 	</Touch>
 );

diff --git a/app/containers/MessageComposer/MessageComposer.test.tsx b/app/containers/MessageComposer/MessageComposer.test.tsx
@@ -100,8 +100,10 @@ describe('MessageComposer', () => {
 		const onSendMessage = jest.fn();
 		render(<Render context={{ onSendMessage }} />);
 		expect(screen.getByTestId('message-composer-send-audio')).toBeOnTheScreen();
+		expect(screen.queryByTestId('message-composer-send')).not.toBeOnTheScreen();
 
 		await user.type(screen.getByTestId('message-composer-input'), 'test');
+		expect(screen.getByTestId('message-composer-input')).not.toBe('');
 		expect(screen.queryByTestId('message-composer-send-audio')).not.toBeOnTheScreen();
 		expect(screen.getByTestId('message-composer-send')).toBeOnTheScreen();