Merge branch 'develop' of https://github.com/RocketChat/Rocket.Chat.ReactNative into chore.gh-poc-lint

Author: Rohit3523

app/containers/AudioPlayer/PlayButton.tsx

@@ -7,6 +7,7 @@ import RCActivityIndicator from '../ActivityIndicator';
 import { AUDIO_BUTTON_HIT_SLOP } from './constants';
 import { TAudioState } from './types';
 import NativeButton from '../NativeButton';
+import getPlayButtonAccessibilityLabel from './getPlayButtonAccessibilityLabel';
 
 interface IButton {
 	disabled?: boolean;
@@ -45,6 +46,8 @@ const PlayButton = ({ onPress, disabled = false, audioState }: IButton): React.R
 
 	return (
 		<NativeButton
+			accessible
+			accessibilityLabel={getPlayButtonAccessibilityLabel(audioState)}
 			style={[styles.playPauseButton, { backgroundColor: colors.buttonBackgroundPrimaryDefault }]}
 			disabled={disabled}
 			onPress={onPress}

app/containers/AudioPlayer/PlaybackSpeed.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Text } from 'react-native';
 
+import i18n from '../../i18n';
 import styles from './styles';
 import { useTheme } from '../../theme';
 import { AUDIO_PLAYBACK_SPEED, AVAILABLE_SPEEDS } from './constants';
@@ -19,6 +20,8 @@ const PlaybackSpeed = () => {
 
 	return (
 		<NativeButton
+			accessible
+			accessibilityLabel={i18n.t('Playback_speed', { playbackSpeed: `${playbackSpeed} x` })}
 			onPress={onPress}
 			style={[styles.containerPlaybackSpeed, { backgroundColor: colors.buttonBackgroundSecondaryDefault }]}>
 			<Text style={[styles.playbackSpeedText, { color: colors.buttonFontSecondary }]}>{playbackSpeed}x</Text>

app/containers/AudioPlayer/getPlayButtonAccessibilityLabel.ts

@@ -0,0 +1,19 @@
+import i18n from '../../i18n';
+import { TAudioState } from './types';
+
+const getPlayButtonAccessibilityLabel = (state: TAudioState) => {
+	switch (state) {
+		case 'loading':
+			return i18n.t('Loading');
+		case 'paused':
+			return i18n.t('Play');
+		case 'playing':
+			return i18n.t('Pause');
+		case 'to-download':
+			return i18n.t('To_download');
+		default:
+			return '';
+	}
+};
+
+export default getPlayButtonAccessibilityLabel;

app/containers/EmojiPicker/EmojiSearch.tsx

@@ -20,6 +20,7 @@ export const EmojiSearch = ({ onBlur, onChangeText, bottomSheet }: IEmojiSearchB
 
 	return (
 		<FormTextInput
+			accessibilityLabel={I18n.t('Search_emoji')}
 			autoCapitalize='none'
 			autoCorrect={false}
 			autoComplete='off'

app/containers/EmojiPicker/PressableEmoji.tsx

@@ -9,8 +9,12 @@ import { Emoji } from './Emoji';
 
 export const PressableEmoji = ({ emoji, onPress }: { emoji: IEmoji; onPress: (emoji: IEmoji) => void }): React.ReactElement => {
 	const { colors } = useTheme();
+	const accessibilityLabel = typeof emoji === 'string' ? emoji : emoji.name;
+
 	return (
 		<Pressable
+			accessible
+			accessibilityLabel={accessibilityLabel}
 			key={typeof emoji === 'string' ? emoji : emoji.name}
 			onPress={() => onPress(emoji)}
 			testID={`emoji-${typeof emoji === 'string' ? emoji : emoji.name}`}

app/containers/EmojiPicker/index.tsx

@@ -14,7 +14,8 @@ import { TabView } from '../TabView';
 
 const routes = categories.tabs.map(tab => ({
 	key: tab.category,
-	title: tab.tabLabel
+	title: tab.tabLabel,
+	accessibilityLabel: tab.accessibilityLabel
 }));
 
 const EmojiPicker = ({
@@ -39,6 +40,8 @@ const EmojiPicker = ({
 
 	const renderTabItem = (tab: Route, color: string) => (
 		<CustomIcon
+			accessible
+			accessibilityLabel={tab?.accessibilityLabel}
 			size={24}
 			name={tab.title as TIconsName}
 			color={color}

app/containers/Header/components/HeaderBackButton.tsx

@@ -2,6 +2,7 @@ import { HeaderBackButtonProps, HeaderBackButton as RNHeaderBackButton } from '@
 import { Platform, StyleSheet } from 'react-native';
 
 import { useTheme } from '../../../theme';
+import I18n from '../../../i18n';
 
 const styles = StyleSheet.create({
 	container: {
@@ -20,6 +21,13 @@ const styles = StyleSheet.create({
 
 export const HeaderBackButton = ({ ...props }: HeaderBackButtonProps) => {
 	const { colors } = useTheme();
-
-	return <RNHeaderBackButton tintColor={colors.fontDefault} style={styles.container} testID='header-back' {...props} />;
+	return (
+		<RNHeaderBackButton
+			accessibilityLabel={I18n.t('Back')}
+			tintColor={colors.fontDefault}
+			style={styles.container}
+			testID='header-back'
+			{...props}
+		/>
+	);
 };

app/containers/Header/components/HeaderButton/Common.tsx

@@ -24,7 +24,14 @@ export const Drawer = ({
 	const { colors } = useTheme();
 	return (
 		<Container style={style} left>
-			<Item iconName='hamburguer' onPress={onPress} testID={testID} color={colors.fontDefault} {...props} />
+			<Item
+				accessibilityLabel={I18n.t('Menu')}
+				iconName='hamburguer'
+				onPress={onPress}
+				testID={testID}
+				color={colors.fontDefault}
+				{...props}
+			/>
 		</Container>
 	);
 };
@@ -78,6 +85,6 @@ export const Preferences = React.memo(({ onPress, testID, ...props }: IHeaderBut
 
 export const Legal = React.memo(
 	({ navigation, testID, onPress = () => navigation?.navigate('LegalView'), ...props }: IHeaderButtonCommon) => (
-		<More onPress={onPress} testID={testID} {...props} />
+		<More accessibilityLabel={I18n.t('More')} onPress={onPress} testID={testID} {...props} />
 	)
 );

app/containers/MessageActions/Header.tsx

@@ -11,6 +11,7 @@ import CustomEmoji from '../EmojiPicker/CustomEmoji';
 import sharedStyles from '../../views/Styles';
 import { IEmoji, TAnyMessageModel } from '../../definitions';
 import Touch from '../Touch';
+import I18n from '../../i18n';
 
 export interface IHeader {
 	handleReaction: (emoji: IEmoji | null, message: TAnyMessageModel) => void;
@@ -67,6 +68,8 @@ const HeaderItem = ({ item, onReaction, theme }: THeaderItem) => {
 	return (
 		<Touch
 			testID={`message-actions-emoji-${item}`}
+			accessible
+			accessibilityLabel={I18n.t('React_with_emojjname', { emojiName: item })}
 			onPress={() => onReaction({ emoji: item })}
 			style={[styles.headerItem, { backgroundColor: themes[theme].surfaceHover }]}>
 			{typeof item === 'string' ? (
@@ -80,6 +83,8 @@ const HeaderItem = ({ item, onReaction, theme }: THeaderItem) => {
 const HeaderFooter = ({ onReaction, theme }: THeaderFooter) => (
 	<Touch
 		testID='add-reaction'
+		accessible
+		accessibilityLabel={I18n.t('Select_emoji_reaction')}
 		onPress={(param: any) => onReaction(param)}
 		style={[styles.headerItem, { backgroundColor: themes[theme].surfaceHover }]}>
 		<CustomIcon name='reaction-add' size={24} />

app/containers/MessageComposer/MessageComposer.tsx

@@ -1,5 +1,5 @@
 import React, { ReactElement, useRef, useImperativeHandle, useCallback } from 'react';
-import { View, StyleSheet, NativeModules } from 'react-native';
+import { View, StyleSheet, NativeModules, AccessibilityInfo, findNodeHandle } from 'react-native';
 import { KeyboardAccessoryView } from 'react-native-ui-lib/keyboard';
 import { useBackHandler } from '@react-native-community/hooks';
 import { Q } from '@nozbe/watermelondb';
@@ -210,6 +210,13 @@ export const MessageComposer = ({
 		emitter.emit(`setComposerHeight${tmid ? 'Thread' : ''}`, height);
 	};
 
+	const accessibilityFocusOnInput = () => {
+		const node = findNodeHandle(composerInputRef.current);
+		if (node) {
+			AccessibilityInfo.setAccessibilityFocus(node);
+		}
+	};
+
 	const backgroundColor = action === 'edit' ? colors.statusBackgroundWarning2 : colors.surfaceLight;
 
 	const renderContent = () => {
@@ -249,7 +256,10 @@ export const MessageComposer = ({
 				iOSScrollBehavior={NativeModules.KeyboardTrackingViewTempManager?.KeyboardTrackingScrollBehaviorFixedOffset}
 				onHeightChanged={onHeightChanged}
 			/>
-			<Autocomplete onPress={item => composerInputComponentRef.current.onAutocompleteItemSelected(item)} />
+			<Autocomplete
+				onPress={item => composerInputComponentRef.current.onAutocompleteItemSelected(item)}
+				accessibilityFocusOnInput={accessibilityFocusOnInput}
+			/>
 		</MessageInnerContext.Provider>
 	);
 };