Merge branch 'develop' into chore-a11y-signup

CONTRIBUTING.md

@@ -78,7 +78,8 @@ We use [Jest](https://jestjs.io/) and [Storybook](https://storybook.js.org/) on
 
 Storybook is a tool for developing UI Components and has some plugins to make Jest generate snapshots of them.
 
-[On the root of the project](https://github.com/RocketChat/Rocket.Chat.ReactNative/blob/develop/index.js#L24), comment everything leaving only the last import to Storybook left  and refresh your project.
+To open the Storybook, run yarn `storybook:start`, and then use `yarn android` or `yarn ios` to launch it on your desired platform.
+
 You'll see some tests like this:
 
 <img src="https://user-images.githubusercontent.com/804994/89677725-56393200-d8c4-11ea-84b0-213be1d24e98.png" width="350" />

android/app/build.gradle

@@ -93,7 +93,7 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         versionCode VERSIONCODE as Integer
-        versionName "4.57.0"
+        versionName "4.58.0"
         vectorDrawables.useSupportLibrary = true
         if (!isFoss) {
             manifestPlaceholders = [BugsnagAPIKey: BugsnagAPIKey as String]

android/app/src/main/res/values/styles.xml

@@ -2,7 +2,6 @@
     <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
         <item name="android:colorEdgeEffect">#aaaaaa</item>
         <item name="colorPrimaryDark">@color/splashBackground</item>
-        <item name="android:navigationBarColor">@color/splashBackground</item>
         <item name="android:forceDarkAllowed">false</item>
         <!-- RN 0.68.2 -->
         <item name="android:editTextBackground">@drawable/rn_edit_text_material</item> 

app/AppContainer.tsx

@@ -17,6 +17,7 @@ import MasterDetailStack from './stacks/MasterDetailStack';
 import ShareExtensionStack from './stacks/ShareExtensionStack';
 import { ThemeContext } from './theme';
 import { setCurrentScreen } from './lib/methods/helpers/log';
+import { themes } from './lib/constants';
 
 const createStackNavigator = createNativeStackNavigator;
 
@@ -59,7 +60,7 @@ const App = memo(({ root, isMasterDetail }: { root: string; isMasterDetail: bool
 				}
 				Navigation.routeNameRef.current = currentRouteName;
 			}}>
-			<Stack.Navigator screenOptions={{ headerShown: false, animation: 'none' }}>
+			<Stack.Navigator screenOptions={{ headerShown: false, animation: 'none', navigationBarColor: themes[theme].surfaceLight }}>
 				{root === RootEnum.ROOT_LOADING || root === RootEnum.ROOT_LOADING_SHARE_EXTENSION ? (
 					<Stack.Screen name='AuthLoading' component={AuthLoadingView} />
 				) : null}

app/containers/Avatar/Avatar.tsx

@@ -4,10 +4,12 @@ import FastImage from 'react-native-fast-image';
 import Touchable from 'react-native-platform-touchable';
 import { settings as RocketChatSettings } from '@rocket.chat/sdk';
 
+import Emoji from '../markdown/components/emoji/Emoji';
 import { getAvatarURL } from '../../lib/methods/helpers/getAvatarUrl';
 import { SubscriptionType } from '../../definitions';
-import Emoji from '../markdown/Emoji';
 import { IAvatar } from './interfaces';
+import MarkdownContext from '../markdown/contexts/MarkdownContext';
+import I18n from '../../i18n';
 
 const Avatar = React.memo(
 	({
@@ -31,12 +33,14 @@ const Avatar = React.memo(
 		type = SubscriptionType.DIRECT,
 		avatarExternalProviderUrl,
 		roomAvatarExternalProviderUrl,
-		cdnPrefix
+		cdnPrefix,
+		accessibilityLabel
 	}: IAvatar) => {
 		if ((!text && !avatar && !emoji && !rid) || !server) {
 			return null;
 		}
 
+		const avatarAccessibilityLabel = accessibilityLabel ?? I18n.t('Avatar_Photo', { username: text });
 		const avatarStyle = {
 			width: size,
 			height: size,
@@ -45,7 +49,14 @@ const Avatar = React.memo(
 
 		let image;
 		if (emoji) {
-			image = <Emoji getCustomEmoji={getCustomEmoji} isMessageContainsOnlyEmoji literal={emoji} style={avatarStyle} />;
+			image = (
+				<MarkdownContext.Provider
+					value={{
+						getCustomEmoji
+					}}>
+					<Emoji block={{ type: 'EMOJI', value: { type: 'PLAIN_TEXT', value: emoji }, shortCode: emoji }} style={avatarStyle} />
+				</MarkdownContext.Provider>
+			);
 		} else {
 			let uri = avatar;
 			if (!isStatic) {
@@ -80,11 +91,19 @@ const Avatar = React.memo(
 		}
 
 		if (onPress) {
-			image = <Touchable onPress={onPress}>{image}</Touchable>;
+			image = (
+				<Touchable accessibilityLabel={avatarAccessibilityLabel} onPress={onPress}>
+					{image}
+				</Touchable>
+			);
 		}
 
 		return (
-			<View style={[avatarStyle, style]} testID='avatar'>
+			<View
+				accessible
+				accessibilityLabel={!onPress ? avatarAccessibilityLabel : undefined}
+				style={[avatarStyle, style]}
+				testID='avatar'>
 				{image}
 				{children}
 			</View>

app/containers/Avatar/AvatarContainer.tsx

@@ -19,7 +19,8 @@ const AvatarContainer = ({
 	onPress,
 	getCustomEmoji,
 	isStatic,
-	rid
+	rid,
+	accessibilityLabel
 }: IAvatar): React.ReactElement => {
 	const server = useSelector((state: IApplicationState) => state.server.server);
 	const serverVersion = useSelector((state: IApplicationState) => state.server.version);
@@ -66,6 +67,7 @@ const AvatarContainer = ({
 			avatarETag={avatarETag}
 			serverVersion={serverVersion}
 			cdnPrefix={cdnPrefix}
+			accessibilityLabel={accessibilityLabel}
 		/>
 	);
 };

app/containers/Avatar/interfaces.ts

@@ -25,4 +25,5 @@ export interface IAvatar {
 	avatarExternalProviderUrl?: string;
 	roomAvatarExternalProviderUrl?: string;
 	cdnPrefix?: string;
+	accessibilityLabel?: string;
 }

app/containers/Check.tsx

@@ -8,8 +8,7 @@ import { useTheme } from '../theme';
 const styles = StyleSheet.create({
 	icon: {
 		width: 22,
-		height: 22,
-		marginHorizontal: 15
+		height: 22
 	}
 });
 

app/containers/CollapsibleText/index.tsx

@@ -3,8 +3,8 @@ import { TextStyle, Text, StyleSheet } from 'react-native';
 
 import sharedStyles from '../../views/Styles';
 import { useTheme } from '../../theme';
-import { previewFormatText } from '../markdown/previewFormatText';
 import I18n from '../../i18n';
+import { previewFormatText } from '../../lib/helpers/previewFormatText';
 
 interface ICollapsibleText {
 	msg?: string;
@@ -67,15 +67,13 @@ const CollapsibleText = ({ msg, style = [], linesToTruncate = 1 }: ICollapsibleT
 				} else {
 					setShowTruncated(false);
 				}
-			}}
-		>
+			}}>
 			{m}
 			{truncatedText ? (
 				<Text
 					testID='collapsible-text-show-less'
 					onPress={() => setShowTruncated(true)}
-					style={[styles.textInfo, { color: colors.fontHint }]}
-				>
+					style={[styles.textInfo, { color: colors.fontHint }]}>
 					{` ${I18n.t('Show_less')}`}
 				</Text>
 			) : null}

app/containers/ServerItem/styles.ts

@@ -7,20 +7,21 @@ export const ROW_HEIGHT = 56;
 export default StyleSheet.create({
 	serverItemContainer: {
 		flexDirection: 'row',
-		alignItems: 'center'
+		alignItems: 'center',
+		padding: 12
 	},
 	serverIcon: {
 		width: 44,
 		height: 44,
-		margin: 12,
 		borderRadius: 4,
 		resizeMode: 'contain'
 	},
 	serverTextContainer: {
 		flex: 1,
 		flexDirection: 'column',
 		justifyContent: 'center',
-		paddingRight: 18
+		paddingRight: 18,
+		paddingLeft: 12
 	},
 	serverName: {
 		fontSize: 18,

app/containers/UIKit/index.tsx

@@ -77,7 +77,7 @@ class MessageParser extends UiKitParserMessage<React.ReactElement> {
 				<MarkdownPreview msg={element.text} style={[isContext && { color: themes[theme].fontSecondaryInfo }]} numberOfLines={0} />
 			);
 		}
-		return <Markdown msg={element.text} theme={theme} style={[isContext && { color: themes[theme].fontSecondaryInfo }]} />;
+		return <Markdown msg={element.text} style={[isContext && { color: themes[theme].fontSecondaryInfo }]} />;
 	}
 
 	button(element: IButton, context: BlockContext) {