chore(a11y): avatar and change avatar accessibility label

app/i18n/locales/ar.json

@@ -35,7 +35,8 @@
   "Auto_Translate": "ترجمة تلقائية",
   "Automatic": "تلقائي",
   "Avatar_changed_successfully": "تم تغيير الصورة الرمزية بنجاح!",
-  "Avatar_Photo": "صورة رمزية {{username}}",
+  "Avatar_default_photo": "الصورة الرمزية لـ {{username}}، صورة رمزية بلون الخلفية {{backgroundColor}} بحرف المستخدم الأول {{firstLetter}}",
+  "Avatar_Photo": "الصورة الرمزية لـ{{username}}",
   "Avatar_Url": "عنوان ويب الصورة الرمزية",
   "Away": "غير متواجد",
   "Black": "أسود",

app/i18n/locales/bn-IN.json

@@ -56,7 +56,8 @@
   "Automatic": "স্বয়ংক্রিয়",
   "Avatar": "অবতার",
   "Avatar_changed_successfully": "অবতার সফলভাবে পরিবর্তন হয়েছে!",
-  "Avatar_Photo": "{{username}} অবতার",
+  "Avatar_default_photo": "{{username}}'এর অবতার, {{firstLetter}} অক্ষরযুক্ত {{backgroundColor}} অবতার",
+  "Avatar_Photo": "{{username}}' এর অবতার",
   "Avatar_Url": "অবতার URL",
   "Avatars": "এভাটার",
   "Away": "দূরে",

app/i18n/locales/cs.json

@@ -59,7 +59,8 @@
   "Automatic": "Automatický",
   "Avatar": "Avatar",
   "Avatar_changed_successfully": "Avatar se úspěšně změnil!",
-  "Avatar_Photo": "{{username}} Avatar",
+  "Avatar_default_photo": "Avatar uživatele {{username}}, avatar s pozadím {{backgroundColor}} a iniciálou uživatele {{firstLetter}}.",
+  "Avatar_Photo": "Avatar uživatele {{username}}",
   "Avatar_Url": "Adresa URL avatara",
   "Avatars": "Avataři",
   "Away": "Pryč",

app/i18n/locales/de.json

@@ -56,7 +56,8 @@
   "Automatic": "Automatisch",
   "Avatar": "Profilbild",
   "Avatar_changed_successfully": "Avatar erfolgreich geändert!",
-  "Avatar_Photo": "{{username}} Avatar",
+  "Avatar_default_photo": "{{username}}s Avatar, {{backgroundColor}} Avatar mit Benutzerinitiale {{firstLetter}}",
+  "Avatar_Photo": "{{username}}s Avatar",
   "Avatar_Url": "Avatar-URL",
   "Avatars": "Avatare",
   "Away": "Abwesend",

app/i18n/locales/en.json

@@ -59,7 +59,8 @@
   "Automatic": "Automatic",
   "Avatar": "Avatar",
   "Avatar_changed_successfully": "Avatar changed successfully!",
-  "Avatar_Photo": "{{username}} Avatar",
+  "Avatar_default_photo": "{{username}}'s avatar, {{backgroundColor}} avatar with user initial {{firstLetter}}",
+  "Avatar_Photo": "{{username}}'s avatar",
   "Avatar_Url": "Avatar URL",
   "Avatars": "Avatars",
   "Away": "Away",

app/i18n/locales/es.json

@@ -31,7 +31,8 @@
   "Auto_Translate": "Traducción automática",
   "Automatic": "Automático",
   "Avatar_changed_successfully": "¡Avatar modificado correctamente!",
-  "Avatar_Photo": "Avatar de {{username}}",
+  "Avatar_default_photo": "Avatar de {{username}}, avatar {{backgroundColor}} con la inicial del usuario {{firstLetter}}",
+  "Avatar_Photo": "El avatar de {{username}}",
   "Avatar_Url": "URL del Avatar",
   "Away": "Ausente",
   "Black": "Negro",

app/i18n/locales/fi.json

@@ -48,7 +48,8 @@
   "Auto-join": "Automaattinen liittyminen",
   "Automatic": "Automaattinen",
   "Avatar_changed_successfully": "Avatar on vaihdettu!",
-  "Avatar_Photo": "{{username}} Avatar",
+  "Avatar_default_photo": "{{username}}:n avatar, {{backgroundColor}} avatar käyttäjän kirjaimella {{firstLetter}}",
+  "Avatar_Photo": "{{username}}:n avatar",
   "Avatar_Url": "Avatarin URL-osoite",
   "Avatars": "Avatarit",
   "Away": "Poissa",

app/i18n/locales/fr.json

@@ -39,7 +39,8 @@
   "Auto-join": "Rejoindre automatiquement",
   "Automatic": "Automatique",
   "Avatar_changed_successfully": "Avatar changé avec succès !",
-  "Avatar_Photo": "Avatar de {{username}}",
+  "Avatar_default_photo": "Avatar de {{username}}, avatar {{backgroundColor}} avec l'initiale de l'utilisateur {{firstLetter}}.",
+  "Avatar_Photo": "L'avatar de {{username}}",
   "Avatar_Url": "URL de l'avatar",
   "Avatars": "Avatars",
   "Away": "Absent",

app/i18n/locales/hi-IN.json

@@ -56,7 +56,8 @@
   "Automatic": "स्वच्छता से",
   "Avatar": "अवतार",
   "Avatar_changed_successfully": "अवतार सफलता पर बदला गया है!",
-  "Avatar_Photo": "{{username}} अवतार",
+  "Avatar_default_photo": "{{username}} का अवतार, {{backgroundColor}} अवतार जिसमें उपयोगकर्ता का प्रथमाक्षर {{firstLetter}} है।",
+  "Avatar_Photo": "{{username}} का अवतार",
   "Avatar_Url": "अवतार URL",
   "Avatars": "अवतार",
   "Away": "दूर",

app/i18n/locales/hu.json

@@ -56,7 +56,8 @@
   "Automatic": "Automatikus",
   "Avatar": "Avatar",
   "Avatar_changed_successfully": "Az avatar sikeresen megváltozott!",
-  "Avatar_Photo": "{{username}} Avatar",
+  "Avatar_default_photo": "{{username}} avatarja, {{backgroundColor}} avatar a felhasználó {{firstLetter}} kezdőbetűjével",
+  "Avatar_Photo": "{{username}} avatárja",
   "Avatar_Url": "Avatar URL",
   "Avatars": "Avatarok",
   "Away": "Távol",

app/i18n/locales/it.json

@@ -40,7 +40,8 @@
   "Auto_Translate": "Traduzione automatica",
   "Automatic": "Automatico",
   "Avatar_changed_successfully": "Avatar aggiornato correttamente!",
-  "Avatar_Photo": "Avatar di {{username}}",
+  "Avatar_default_photo": "Avatar di {{username}}, avatar {{backgroundColor}} con iniziale dell'utente {{lettera}}",
+  "Avatar_Photo": "L'avatar di {{username}}",
   "Avatar_Url": "URL avatar",
   "Away": "Assente",
   "Black": "Nero",

app/i18n/locales/ja.json

@@ -34,7 +34,8 @@
   "Auto_Translate": "自動翻訳",
   "Automatic": "自動",
   "Avatar_changed_successfully": "アバターを変更しました！",
-  "Avatar_Photo": "{{username}} アバター",
+  "Avatar_default_photo": "{{username}}のアバター、ユーザーの頭文字{{firstLetter}}が入った{{backgroundColor}}のアバター",
+  "Avatar_Photo": "{{username}}のアバター",
   "Avatar_Url": "アバターURL",
   "Away": "退出中",
   "Black": "ブラック",

app/i18n/locales/nl.json

@@ -39,7 +39,8 @@
   "Auto-join": "Automatisch deelnemen",
   "Automatic": "Automatisch",
   "Avatar_changed_successfully": "Avatar succesvol gewijzigd!",
-  "Avatar_Photo": "{{username}} Avatar",
+  "Avatar_default_photo": "{{username}}'s avatar, {{backgroundColor}} avatar met gebruikersinitiaal {{firstLetter}}",
+  "Avatar_Photo": "De avatar van {{username}}",
   "Avatar_Url": "Avatar-URL",
   "Avatars": "Avatars",
   "Away": "Afwezig",

app/i18n/locales/pt-BR.json

@@ -58,6 +58,7 @@
   "Automatic": "Automático",
   "Avatar": "Avatar",
   "Avatar_changed_successfully": "Avatar alterado com sucesso!",
+  "Avatar_default_photo": "Avatar de {{username}}, avatar {{backgroundColor}} com a inicial do usuário {{firstLetter}}",
   "Avatar_Photo": "Avatar de {{username}}",
   "Avatar_Url": "Avatar URL",
   "Avatars": "Avatars",

app/i18n/locales/pt-PT.json

@@ -33,6 +33,7 @@
   "Auto_Translate": "Auto-Tradução",
   "Automatic": "Automático",
   "Avatar_changed_successfully": "Avatar alterado com sucesso!",
+  "Avatar_default_photo": "Avatar de {{username}}, avatar de cor de fundo {{backgroundColor}} com a inicial do utilizador {{firstLetter}}",
   "Avatar_Photo": "Avatar de {{username}}",
   "Avatar_Url": "URL do Avatar",
   "Away": "Ausente",

app/i18n/locales/ru.json

@@ -46,7 +46,8 @@
   "Auto-join": "Автодобавление",
   "Automatic": "Автоматически",
   "Avatar_changed_successfully": "Аватар успешно изменен!",
-  "Avatar_Photo": "{{username}} Аватар",
+  "Avatar_default_photo": "Аватар {{username}}, аватар {{backgroundColor}} с инициалом пользователя {{firstLetter}}",
+  "Avatar_Photo": "Аватар пользователя {{username}}",
   "Avatar_Url": "URL аватара",
   "Avatars": "Аватары",
   "Away": "Отошел",

app/i18n/locales/sl-SI.json

@@ -44,7 +44,8 @@
   "Auto-join": "Samodejna pridružitev",
   "Automatic": "Avtomatično",
   "Avatar_changed_successfully": "Avatar uspešno spremenjen",
-  "Avatar_Photo": "{{username}} Avatar",
+  "Avatar_default_photo": "{{username}}'s avatar, avatar z barvo ozadja {{backgroundColor}} z začetnico uporabnika {{firstLetter}}",
+  "Avatar_Photo": "{{username}}'s avatar",
   "Avatar_Url": "Avatar URL",
   "Avatars": "Avatari",
   "Away": "Odsoten",

app/i18n/locales/sv.json

@@ -48,7 +48,8 @@
   "Auto-join": "Anslut automatiskt",
   "Automatic": "Automatiskt",
   "Avatar_changed_successfully": "Avataren har ändrats",
-  "Avatar_Photo": "{{username}} Avatar",
+  "Avatar_default_photo": "{{username}}s avatar, {{backgroundColor}} avatar med användarinitial {{firstLetter}}",
+  "Avatar_Photo": "{{username}}s avatar",
   "Avatar_Url": "URL till avatar",
   "Avatars": "Avatarer",
   "Away": "Borta",

app/i18n/locales/ta-IN.json

@@ -56,7 +56,8 @@
   "Automatic": "தானாக",
   "Avatar": "அவதார்",
   "Avatar_changed_successfully": "அவதார் வேறுபடுத்தப்பட்டது!",
-  "Avatar_Photo": "{{username}} அவதார்",
+  "Avatar_default_photo": "{{username}}'வின் அவதார், பயனர் துவக்கம் {{firstLetter}} உடன் {{backgroundColor}} அவதார்",
+  "Avatar_Photo": "{{username}} இன் அவதார்",
   "Avatar_Url": "அவதார் URL",
   "Avatars": "அவதார்கள்",
   "Away": "விலகியிருக்கிறேன்",

app/i18n/locales/te-IN.json

@@ -56,7 +56,8 @@
   "Automatic": "స్వయంగా",
   "Avatar": "అవతార్",
   "Avatar_changed_successfully": "అవతార్ విజయవంతంగా మారింది!",
-  "Avatar_Photo": "{{username}} अवतार",
+  "Avatar_default_photo": "{{username}} का अवतार, उपयोगकर्ता के आरंभिक {{firstLetter}} के साथ {{backgroundColor}} अवतार",
+  "Avatar_Photo": "{{username}} का अवतार",
   "Avatar_Url": "అవతార్ URL",
   "Avatars": "అవతార్లు",
   "Away": "దూరంగా",

app/i18n/locales/tr.json

@@ -34,7 +34,8 @@
   "Auto_Translate": "Otomatik Çevir",
   "Automatic": "Otomatik",
   "Avatar_changed_successfully": "Profil fotoğrafı başarıyla değiştirildi!",
-  "Avatar_Photo": "{{username}} Avatar",
+  "Avatar_default_photo": "{{username}}'in avatarı, kullanıcı baş harfi {{firstLetter}} olan {{backgroundColor}} arka planlı avatar",
+  "Avatar_Photo": "{{username}}'nin avatarı",
   "Avatar_Url": "Profil fotoğrafı URL'si",
   "Away": "Uzakta",
   "Black": "Koyu",

app/i18n/locales/zh-CN.json

@@ -34,7 +34,8 @@
   "Auto_Translate": "自动翻译",
   "Automatic": "自动",
   "Avatar_changed_successfully": "头像更新成功！",
-  "Avatar_Photo": "{{username}} 头像",
+  "Avatar_default_photo": "{{username}}的头像，用户首字母为{{firstLetter}}的{{backgroundColor}}头像",
+  "Avatar_Photo": "{{username}}的头像",
   "Avatar_Url": "头像地址",
   "Away": "离开",
   "Black": "黑色",

app/i18n/locales/zh-TW.json

@@ -34,7 +34,8 @@
   "Auto_Translate": "自動翻譯",
   "Automatic": "自動",
   "Avatar_changed_successfully": "大頭貼更新成功！",
-  "Avatar_Photo": "{{username}} 頭像",
+  "Avatar_default_photo": "{{username}}的頭像，{{backgroundColor}}頭像，使用者首字母為{{firstLetter}}",
+  "Avatar_Photo": "{{username}}的頭像",
   "Avatar_Url": "大頭貼地址",
   "Away": "離開",
   "Black": "黑色",

app/lib/constants/defaultSettings.ts

@@ -171,6 +171,9 @@ export const defaultSettings = {
 	UI_Allow_room_names_with_special_chars: {
 		type: 'valueAsBoolean'
 	},
+	UI_Use_Name_Avatar: {
+		type: 'valueAsBoolean'
+	},
 	UI_Use_Real_Name: {
 		type: 'valueAsBoolean'
 	},

app/lib/methods/helpers/getDefaultAvatarInfo.ts

@@ -0,0 +1,24 @@
+import { store } from '../../store/auxStore';
+
+// Borrowed from https://github.com/RocketChat/Rocket.Chat/blob/a4f2102af1c2e875c60cafebd0163105bdaca678/apps/meteor/server/routes/avatar/utils.ts#L133
+
+const colors = ['#158D65', '#7F1B9F', '#B68D00', '#E26D0E', '#10529E', '#6C727A'];
+const MAX_SVG_AVATAR_INITIALS = 3;
+const getAvatarBackgroundColor = (name: string): string => colors[name.length % colors.length];
+const getAvatarFirstLetter = (name: string) =>
+	name
+		.replace(/[^A-Za-z0-9]/g, '')
+		.substr(0, 1)
+		.toUpperCase();
+const getInitials = (name: string) => name.split(' ').slice(0, MAX_SVG_AVATAR_INITIALS).map(getAvatarBackgroundColor).join('');
+
+export const getDefaultAvatarInfo = (username: string | undefined) => {
+	if (!username) return;
+	const { UI_Use_Name_Avatar } = store.getState().settings;
+
+	return {
+		backgroundColor: getAvatarBackgroundColor(username),
+		firstLetter: !UI_Use_Name_Avatar ? getAvatarFirstLetter(username) : getInitials(username),
+		username
+	};
+};

app/views/ChangeAvatarView/AvatarSuggestion.tsx

@@ -7,6 +7,7 @@ import I18n from '../../i18n';
 import styles from './styles';
 import { useTheme } from '../../theme';
 import AvatarSuggestionItem from './AvatarSuggestionItem';
+import { getDefaultAvatarInfo } from '../../lib/methods/helpers/getDefaultAvatarInfo';
 
 const AvatarSuggestion = ({
 	onPress,
@@ -18,6 +19,10 @@ const AvatarSuggestion = ({
 	resetAvatar?: () => void;
 }) => {
 	const [avatarSuggestions, setAvatarSuggestions] = useState<IAvatar[]>([]);
+	const defaultAvatarInfo = getDefaultAvatarInfo(username);
+	const defaultAvatarAccessibilityInfo = defaultAvatarInfo
+		? I18n.t('Avatar_default_photo', defaultAvatarInfo)
+		: I18n.t('Select_Uploaded_Image');
 
 	const { colors } = useTheme();
 
@@ -47,10 +52,21 @@ const AvatarSuggestion = ({
 			<Text style={[styles.itemLabel, { color: colors.fontTitlesLabels }]}>{I18n.t('Images_uploaded')}</Text>
 			<View style={styles.containerAvatarSuggestion}>
 				{username && resetAvatar ? (
-					<AvatarSuggestionItem text={`@${username}`} testID={`reset-avatar-suggestion`} onPress={resetAvatar} />
+					<AvatarSuggestionItem
+						accessibilityLabel={defaultAvatarAccessibilityInfo}
+						text={`@${username}`}
+						testID={`reset-avatar-suggestion`}
+						onPress={resetAvatar}
+					/>
 				) : null}
 				{avatarSuggestions.slice(0, 7).map(item => (
-					<AvatarSuggestionItem item={item} key={item?.url} testID={`${item?.service}-avatar-suggestion`} onPress={onPress} />
+					<AvatarSuggestionItem
+						accessibilityLabel={I18n.t('Select_Uploaded_Image')}
+						item={item}
+						key={item?.url}
+						testID={`${item?.service}-avatar-suggestion`}
+						onPress={onPress}
+					/>
 				))}
 			</View>
 		</View>

app/views/ChangeAvatarView/AvatarSuggestionItem.tsx

@@ -4,7 +4,6 @@ import { View, StyleSheet } from 'react-native';
 import { IAvatar } from '../../definitions';
 import Avatar from '../../containers/Avatar';
 import { useTheme } from '../../theme';
-import i18n from '../../i18n';
 
 const styles = StyleSheet.create({
 	container: {
@@ -22,24 +21,20 @@ const AvatarSuggestionItem = ({
 	item,
 	onPress,
 	text,
-	testID
+	testID,
+	accessibilityLabel
 }: {
 	item?: IAvatar;
 	testID?: string;
 	onPress: Function;
 	text?: string;
+	accessibilityLabel?: string;
 }) => {
 	const { colors } = useTheme();
 
 	return (
 		<View key={item?.service} testID={testID} style={[styles.container, { backgroundColor: colors.strokeLight }]}>
-			<Avatar
-				accessibilityLabel={i18n.t('Select_Uploaded_Image')}
-				avatar={item?.url}
-				text={text}
-				size={64}
-				onPress={() => onPress(item)}
-			/>
+			<Avatar accessibilityLabel={accessibilityLabel} avatar={item?.url} text={text} size={64} onPress={() => onPress(item)} />
 		</View>
 	);
 };