feat(a11y): add accessibility label to icons (#6358)

* feat: added new label

* feat: accessibility label

* fix: thread

* feat: updated message composer accessibiity label

* feat: a11y upload progress

* feat: a11y label error

* fix: snapshot test

* fix: icons

* fix: threads label

* chore: format code with Prettier [skip ci]

* fix: phone and roomItem label

* fix: label of threads

* fix: regression a11y label roomHeader

* fix: cancel order and playback speed

* chore: code improvements

* chore: format code with Prettier [skip ci]

* chore: Upgrade RN to 0.79.4 (#6428)

* feat(a11y): mentions autocomplete focus (#6409)

* feat: added isAutocompleteVisible logic to enable or disable list to be accessible

* fix: android announcement

* fix: autocomplete label

* fix: change focus after display autocomplete and fixed username labels

* fix: autcoompleteuserroom style

* fix: revert unused type change

* fix: a11y cancel button

* fix: use || comparison instead of ??

* fix: more on legal button instead of props

* chore: remove conditional rendering on headerCallButton

---------

Co-authored-by: OtavioStasiak <OtavioStasiak@users.noreply.github.com>
Co-authored-by: Diego Mello <diegolmello@gmail.com>

Author: OtavioStasiak

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} />